Bootstrap Flexbox

Level : Beginner
Mentor: Shailendra Chauhan
Duration : 00:01:30

Flexbox:

Flexbox is a layout model in Bootstrap that allows you to create flexible and responsive layouts with ease. It provides a powerful way to distribute space and align content within a container.

Example:

<div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Horizontal Direction:

You can control the horizontal direction of flex items using classes like flex-row and flex-row-reverse.

Example:

<div class="d-flex flex-row">
  <!-- Items arranged in a row -->
</div>

Vertical Direction:

Use classes like flex-column and flex-column-reverse to control the vertical direction of flex items:

Example:

<div class="d-flex flex-column">
  <!-- Items arranged in a column -->
</div>

Justify Content:

Bootstrap provides classes like justify-content-start, justify-content-center, and justify-content-end to align items along the main axis.

Example:

<div class="d-flex justify-content-center">
  <!-- Items centered horizontally -->
</div>

Fill / Equal Widths:

You can make flex items fill the available space evenly using the flex-fill class.

Example:

<div class="d-flex">
  <div class="flex-fill">Item 1</div>
  <div class="flex-fill">Item 2</div>
</div>

Grow:

Control the relative growth of flex items using classes like flex-grow-1.

Example:

<div class="d-flex">
  <div class="flex-grow-1">Item 1</div>
  <div>Item 2</div>
</div> 

Order:

Change the order of flex items using the order class.

Example:

<div class="d-flex">
  <div class="order-2">Item 2</div>
  <div class="order-1">Item 1</div>
</div> 

Auto Margins:

Apply automatic margins to flex items using ms-auto and me-auto classes:

Example:

<div class="d-flex">
  <div class="me-auto">Item 1</div>
  <div class="ms-auto">Item 2</div>
</div>

Wrap:

Wrap flex items to a new row/column when they don't fit using flex-wrap classes:

Example:

<div class="d-flex flex-wrap">
  <!-- Items will wrap to the next line if necessary -->
</div>

Align Content, Align Items, Align Self:

These classes (align-content-*, align-items-*, and align-self-*) are used to control vertical alignment of flex items and their content, similar to how justify-content works for horizontal alignment.

Example:

<div class="d-flex align-items-center">
  <!-- Items vertically centered -->
</div>

Responsive Flex Classes:

Bootstrap provides responsive classes that allow you to adjust flex behavior based on screen size.

Example:

<div class="d-flex d-md-none">
  <!-- Flex layout on screens smaller than medium -->
</div> 

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this