How to Use Flexbox in Bootstrap (d-flex Utilities)

Bootstrap includes a full set of flexbox utility classes, so you can build flexible layouts and align content without writing custom CSS. The starting point is .d-flex, which turns any element into a flex container; from there you control direction, alignment, spacing, wrapping, and sizing with short classes. This guide covers the full toolkit, the patterns you will actually reach for, and how it fits the rest of Bootstrap layout.

Make a flex container

Add .d-flex (or .d-inline-flex) to lay out an element’s children with flexbox:

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

By default the items sit in a row. Use .flex-row, .flex-column, .flex-row-reverse, or .flex-column-reverse to change direction.

Justify content (main axis)

Control spacing along the main axis with justify-content-*: start, end, center, between, around, and evenly.

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

justify-content-end aligns items to the right, justify-content-center centers them horizontally, and justify-content-between pushes the first and last items to the edges with even space between, the classic header layout.

Align items (cross axis)

Control alignment on the cross axis with align-items-*: start, end, center, baseline, and stretch.

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

Use align-self-* to align a single child differently from the rest.

Wrap onto multiple lines

By default flex items stay on one line and may shrink. Allow them to wrap with flex-wrap, and control the spacing of the resulting rows with align-content-*:

<div class="d-flex flex-wrap gap-3">...</div>

Use flex-nowrap to force a single line (the default), or flex-wrap for responsive tag lists and card rows.

Grow, shrink, and fill

Control how items share space:

• flex-fill makes each item take an equal share of the row.
• flex-grow-1 lets one item expand to fill the leftover space while others stay their natural size.
• flex-shrink-0 stops an item from shrinking (useful for an icon or avatar next to flexible text).

<div class="d-flex">
  <img class="flex-shrink-0" src="avatar.png" width="48" alt="">
  <p class="flex-grow-1 ms-3">This text expands to fill the rest of the row.</p>
</div>

Push items apart with auto margins

In a flex container, an auto margin absorbs all the free space on that side, a clean way to push one item away from the rest without justify-content:

<nav class="d-flex">
  <a class="navbar-brand">Logo</a>
  <a class="ms-auto">Pushed to the right</a>
</nav>

ms-auto shoves the link to the right edge; me-auto would shove items left. These come from the spacing utilities.

Reorder items

Change the visual order without touching the HTML using order-* (0 through 5, plus order-first and order-last), with responsive variants:

<div class="d-flex">
  <div class="order-2">Shown second</div>
  <div class="order-1">Shown first</div>
</div>

How to center a div

The most common flex task is centering. Combine both axes (and give the container a height for vertical centering):

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="p-4 border rounded">Perfectly centered</div>
</div>

For every other centering case, including blocks, text, and grid columns, see how to center a div in Bootstrap.

Responsive variants

Every flex utility accepts a breakpoint, so a layout can change per screen size. For example, stack on mobile and switch to a row from medium screens up:

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

The pattern is {property}-{breakpoint}-{value}, using sm, md, lg, xl, and xxl.

Spacing between flex items

Add a gap utility for even spacing without margins, from gap-0 to gap-5 (matching the spacing scale), plus column-gap-* and row-gap-* for one axis:

<div class="d-flex flex-wrap gap-3">...</div>

Common patterns

• Header with brand left, actions right: d-flex justify-content-between align-items-center.
• Push a card footer to the bottom: make the card body d-flex flex-column and the footer mt-auto.
• Media object (avatar + text): d-flex with flex-shrink-0 on the image and flex-grow-1 on the text.
• Responsive stack to row: flex-column flex-md-row.

Next steps

Flex utilities cover most in-component layout; the grid handles page-level structure, and both build on the spacing scale. To see how they respond as you change the spacing scale or breakpoints, open the visual builder, adjust the variables, preview a full UI kit live, and export real Bootstrap CSS.

FAQ

How do I use flexbox in Bootstrap?

Add .d-flex to a container to make its children flex items, then control them with utilities: justify-content-* for the main axis, align-items-* for the cross axis, flex-wrap for wrapping, and gap-* for spacing. No custom CSS needed.

What is the difference between justify-content and align-items?

In a default row, justify-content-* positions items along the horizontal (main) axis and align-items-* along the vertical (cross) axis. Use both with center to center an item on both axes.

How do I make one flex item fill the remaining space?

Add flex-grow-1 to the item you want to expand; it takes the leftover space while the others keep their natural size. Use flex-fill on every item instead to split the row equally.

How do I push a flex item to the right in Bootstrap?

Add ms-auto to that item. The auto left margin absorbs the free space and pushes the item to the right edge, without needing justify-content.