Bootstrap Flex Classes Cheat Sheet (d-flex, justify-content)

In Bootstrap 5, add d-flex to make an element a flex container, then align its children with justify-content-* (horizontal) and align-items-* (vertical), for example d-flex justify-content-between align-items-center. 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.

Bootstrap flex cheat sheet

Every class below also has responsive versions such as d-md-flex and justify-content-lg-between.

You want	Class
Make a flex container	d-flex, d-inline-flex
Row or column	flex-row, flex-column, flex-row-reverse, flex-column-reverse
Horizontal position in a row	justify-content-start, -center, -end, -between, -around, -evenly
Vertical position in a row	align-items-start, -center, -end, -baseline, -stretch
Align one item differently	align-self-start, -center, -end, -baseline, -stretch
Wrap onto new lines	flex-wrap, flex-nowrap, flex-wrap-reverse
Space wrapped lines	align-content-start, -center, -end, -between, -around, -stretch
Fill or share space	flex-fill, flex-grow-1, flex-grow-0, flex-shrink-1, flex-shrink-0
Space between items	gap-0 to gap-5, row-gap-*, column-gap-*
Push one item away	ms-auto, me-auto, mt-auto, mb-auto
Change visual order	order-first, order-0 to order-5, order-last

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; see Bootstrap Icons for the icon set).

<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>

Why flex classes don’t work

• justify-content-center does nothing. The parent needs d-flex. Alignment classes only apply to a flex container, and they go on the parent, not on the item you want to move.
• align-items-center doesn’t center vertically. The container is only as tall as its content, so there is no space to center in. Give it a height, such as min-vh-100 or a fixed height.
• The axes seem swapped. In flex-column, the main axis runs vertically, so justify-content-* positions items top to bottom and align-items-* left to right.
• ml-auto doesn’t push the item right. That is the Bootstrap 4 name. Bootstrap 5 uses ms-auto.
• A long word or URL overflows its item. Flex items don’t shrink below their content by default. Add text-break to the text or min-width: 0 to the item.

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. The same trick keeps a page footer at the bottom of short pages.
• 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.

Why is justify-content-center not working in Bootstrap?

The class only works on a flex container, so the parent element needs d-flex (or d-inline-flex) as well. Put both classes on the parent, not on the child you want to center.

How do I center an element vertically with Bootstrap flex?

Add d-flex align-items-center to the parent and give the parent a height, for example min-vh-100 for the full screen. Add justify-content-center too to center it horizontally as well.

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.