Bootstrap Flexbox

Level : Beginner

Mentor: Shailendra Chauhan

Duration : 00:03:00

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

Upto 60% OFF

Know More

Still have some questions? Let's discuss.