Skip to main content

Flex in Bootstrap 5

Bootstrap Flex​

The Flexbox layout provides a powerful way to create flexible and responsive layouts with less CSS code.

To use the Flexbox grid system in Bootstrap, you can apply the following classes to your HTML elements:

  • .d-flex: This class makes an element a Flex container.
  • .flex-row: This class makes the Flex container a row.
  • .flex-column: This class makes the Flex container a column.
  • .justify-content-*: This class aligns Flex items along the main axis of the Flex container. You can replace the * with values such as start, center, end, between, around, or evenly.
  • .align-items-*: This class aligns Flex items along the cross axis of the Flex container. You can replace the * with values such as start, center, end, baseline, or stretch.
  • .flex-*: This class specifies the Flex grow, shrink, and basis values for Flex items. You can replace the * with values such as grow-0, shrink-1, basis-auto, or 1.

As an example:

<div class="d-flex flex-row justify-content-center align-items-center">
     <div class="flex-grow-1">Item 1</div>
     <div class="flex-shrink-1">Item 2</div>
     <div class="flex-basis-50">Item 3</div>
</div>

In this example:

  • We've created a Flex container that's a row, centered horizontally and vertically, and contains three Flex items with different grow, shrink, and basis values.
  • The first item will grow to fill the available space, the second item will shrink if necessary, and the third item will have a fixed width of 50 pixels.