Bootstrap · Chapter 35 of 43

Bootstrap Flex Utilities

Bootstrap's flex utility classes let you use CSS flexbox layout directly through class names, without writing custom CSS. Add .d-flex to any element to make it a flex container.

Once an element is a flex container, additional classes control direction, wrapping, alignment and spacing of its flex children, such as .justify-content-center or .align-items-center.

Syntax

<div class="d-flex justify-content-between align-items-center">...</div>

Enabling flex layout

.d-flex turns an element into a flex container with row direction by default. .flex-column switches the direction to vertical stacking instead.

Aligning flex items

Use .justify-content-{value} to align items along the main axis (like center, between, around), and .align-items-{value} to align them along the cross axis (like start, center, end).

Example 1 (html)

<div class="d-flex justify-content-between bg-light p-3">
  <div>Left</div>
  <div>Right</div>
</div>

Output

Two boxes pushed to opposite ends of a light gray flex container

d-flex enables flexbox, and justify-content-between pushes the two children to opposite sides.

Example 2 (html)

<div class="d-flex flex-column align-items-center">
  <div class="mb-2">Item 1</div>
  <div>Item 2</div>
</div>

Output

Two stacked items centered horizontally within their container

flex-column stacks items vertically, and align-items-center centers them along the horizontal cross axis.

Key points

.d-flex enables flexbox layout on an element.
.flex-column switches the main axis to vertical.
.justify-content-{value} aligns items along the main axis.
.align-items-{value} aligns items along the cross axis.

💡 Note: Flex utilities can be combined with responsive breakpoint suffixes, like .d-md-flex, to enable flex layout only from a certain screen size.

Bootstrap Flex Utilities

Enabling flex layout

Aligning flex items

Key points

📝 Quick Quiz