Bootstrap - Flex

Bootstrap 5 offers several utility classes for working with Flexbox. These classes allow you to define the display behavior of elements, control their direction, alignment, and distribution.

Key Flexbox Utility Classes

d-flex: This class makes an element a flex container.

flex-row: Arranges flex items in a horizontal (row) layout (default).

flex-column: Arranges flex items in a vertical (column) layout.

justify-content-*: Aligns flex items along the main axis (horizontal).

align-items-*: Aligns flex items along the cross axis (vertical).

align-self-*: Aligns a specific flex item along the cross axis.

flex-wrap: Allows flex items to wrap onto multiple lines.

3. Using Flex in Bootstrap 5

Flex Container

The d-flex class is used to define a flex container. When applied to a parent element, it enables Flexbox layout for the child elements.

<div class="d-flex">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

Here, all the child divs (Item 1, Item 2, and Item 3) are aligned horizontally by default (in a row).

Flex Direction

By default, flex items are placed in a horizontal row. You can change the direction of the flex container’s children using flex-row (default) or flex-column.

flex-row: Aligns items horizontally (left to right).

flex-column: Aligns items vertically (top to bottom).

<!-- Flex in Column Direction -->

<div class="d-flex flex-column">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

Wrapping Flex Items

By default, flex items will stay on a single line and may overflow if they don't fit. The flex-wrap class allows flex items to wrap to the next line if necessary.

<!-- Flex Items with Wrapping -->

<div class="d-flex flex-wrap">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

  <div class="p-2">Item 4</div>

</div>

Here, the flex items will wrap into a new line if the container is not wide enough to fit all items in one row.

4. Aligning Flex Items

Justify Content (Main Axis)

The justify-content classes align flex items along the main axis (the horizontal axis for a row, or vertical axis for a column). The following classes can be used:

justify-content-start: Aligns items to the start of the container.

justify-content-center: Aligns items in the center of the container.

justify-content-end: Aligns items to the end of the container.

justify-content-between: Distributes items with space between them.

justify-content-around: Distributes items with space around them.

justify-content-evenly: Distributes items with equal space between them.

<!-- Items Justified to the Center -->

<div class="d-flex justify-content-center">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

Align Items (Cross Axis)

The align-items classes align items along the cross axis (vertical for a row layout, horizontal for a column layout).

align-items-start: Aligns items at the start of the cross axis.

align-items-center: Aligns items in the center of the cross axis.

align-items-end: Aligns items at the end of the cross axis.

align-items-baseline: Aligns items along their baseline.

align-items-stretch: Stretches items to fill the container (default behavior).

<!-- Items Aligned Vertically in the Center -->

<div class="d-flex align-items-center" style="height: 200px;">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

Align Self

The align-self class can be applied to individual flex items to override the align-items setting for that specific item.

align-self-start: Aligns the item at the start of the cross axis.

align-self-center: Aligns the item in the center of the cross axis.

align-self-end: Aligns the item at the end of the cross axis.

align-self-baseline: Aligns the item along its baseline.

align-self-stretch: Stretches the item to fill the container.

<!-- Align Individual Item to the Start -->

<div class="d-flex align-items-center" style="height: 200px;">

  <div class="p-2 align-self-start">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

5. Flexbox Alignment Example

Here’s an example that combines several Flexbox utilities to create a responsive layout with items aligned both horizontally and vertically.

<div class="d-flex flex-wrap justify-content-between align-items-center" style="height: 300px;">

  <div class="p-3 bg-info">Item 1</div>

  <div class="p-3 bg-success">Item 2</div>

  <div class="p-3 bg-warning">Item 3</div>

  <div class="p-3 bg-danger">Item 4</div>

</div>

Explanation:

flex-wrap: Allows items to wrap onto a new line if necessary.

justify-content-between: Distributes the items with space between them.

align-items-center: Vertically centers the items in the container.

6. Responsive Flex Classes

Bootstrap 5’s Flexbox utilities are fully responsive. You can apply different flex settings based on breakpoints (sm, md, lg, xl, xxl).

For example, use flex-column on mobile and flex-row on larger screens:

<div class="d-flex flex-column flex-md-row">

  <div class="p-2">Item 1</div>

  <div class="p-2">Item 2</div>

  <div class="p-2">Item 3</div>

</div>

flex-column: Items are stacked vertically on smaller screens.

flex-md-row: On medium and larger screens, items are arranged horizontally.

Conclusion

Bootstrap 5’s Flexbox utilities simplify the process of creating flexible and responsive layouts. By using classes like d-flex, justify-content-*, align-items-*, and flex-wrap, you can easily control the positioning and behaviour of elements within a container. Additionally, Flexbox is fully integrated with Bootstrap’s grid system and responsive utilities, enabling developers to create modern, flexible web designs with minimal effort.