Bootstrap 5 Flexbox: Alignment Utilities That Actually Work

Flexbox is the backbone of modern web layout. But even experienced developers get tripped up by it — especially when working inside a framework like Bootstrap 5 where the utility classes abstract away the raw CSS. You’ve seen the confusion: justify-content-center doesn’t seem to center anything, items refuse to align vertically, or a flex container collapses unexpectedly on mobile. Sound familiar?

This guide cuts through the noise. We’re going to walk through every meaningful Bootstrap 5 flexbox and alignment utility, show you real code, explain what’s actually happening under the hood, and point out the gotchas that catch even senior developers off guard. By the end, you’ll be reaching for these classes with confidence — no custom CSS required for the vast majority of layout challenges.

What Is Bootstrap 5 Flexbox and How Does It Map to CSS?

Bootstrap 5 flexbox utilities are a set of classes that wrap the CSS Flexible Box Layout specification. Every class translates to one or two CSS declarations applied to the element or its children. There is no magic — it’s clean, predictable CSS.

The foundation of everything is d-flex, which sets display: flex on an element. Without this class applied to a container, every other flex utility you add to that element will have zero effect. This is the most common source of confusion for developers who add justify-content-center to an element and wonder why nothing happens.

<!-- Wrong: no d-flex parent -->
<div class="justify-content-center">
  <p>This won't be centered via flexbox</p>
</div>

<!-- Correct: d-flex is the foundation -->
<div class="d-flex justify-content-center">
  <p>This IS centered via flexbox</p>
</div>

Bootstrap also offers d-inline-flex which sets display: inline-flex — useful when you want a flex container that only takes up as much width as its content, rather than expanding to fill the full row.

Both d-flex and d-inline-flex support the full suite of responsive breakpoint suffixes: d-sm-flex, d-md-flex, d-lg-flex, d-xl-flex, and d-xxl-flex. This lets you switch layout modes at specific viewport widths — a common pattern for stacking elements on mobile and placing them side by side on desktop.

Flex Direction and Wrapping: Controlling Flow

Once you’ve established a flex container, the next decision is direction. By default, flex items flow left-to-right in a single row (flex-direction: row). Bootstrap’s direction utilities let you change this cleanly.

<!-- Horizontal (default) -->
<div class="d-flex flex-row">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
  <div class="p-2">Item 3</div>
</div>

<!-- Vertical stack -->
<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>

<!-- Reversed horizontal -->
<div class="d-flex flex-row-reverse">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
</div>

<!-- Responsive: column on mobile, row on md+ -->
<div class="d-flex flex-column flex-md-row">
  <div class="p-2">Nav Item</div>
  <div class="p-2">Nav Item</div>
</div>

The responsive pattern on the last example is incredibly practical. In templates like Canvas Template, section layouts frequently use flex-column flex-md-row to stack content cards vertically on phones and display them side by side on wider screens — no media query custom CSS required.

Wrapping is equally important. By default, flex items won’t wrap — they’ll shrink to fit or overflow. Use flex-wrap to allow wrapping and flex-nowrap to enforce a single line.

<div class="d-flex flex-wrap">
  <div class="p-2" style="width: 200px;">Card 1</div>
  <div class="p-2" style="width: 200px;">Card 2</div>
  <div class="p-2" style="width: 200px;">Card 3</div>
  <div class="p-2" style="width: 200px;">Card 4</div>
</div>

There’s also flex-wrap-reverse, which wraps items but stacks new rows above the previous ones — a niche utility but occasionally useful for bottom-anchored UI patterns.

Justify Content: Mastering Main-Axis Alignment

This is where most developers hit a wall. Justify-content controls alignment along the main axis — which is horizontal when flex-direction: row (the default) and vertical when flex-direction: column. Many developers assume justify-content always controls horizontal alignment, which breaks down the moment they switch to a column layout.

<!-- Classic navbar pattern: logo left, nav links right -->
<nav class="d-flex justify-content-between align-items-center p-3">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="d-flex list-unstyled gap-3 mb-0">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

The justify-content-between pattern above is one of the most used layouts in any template. It pushes the brand logo to the left and the navigation links to the right without any custom CSS — a clean, production-ready pattern.

Align Items and Align Self: Cross-Axis Alignment

align-items controls alignment on the cross axis — perpendicular to the main axis. In a row-direction flex container, this controls vertical alignment. In a column-direction container, it controls horizontal alignment.

<!-- Vertically centre items in a row container -->
<div class="d-flex align-items-center" style="height: 200px; background: #f8f9fa;">
  <div class="p-3">Vertically centred</div>
  <div class="p-3">Also centred</div>
</div>

<!-- Baseline alignment for mixed font-size content -->
<div class="d-flex align-items-baseline">
  <span style="font-size: 2rem;">Large</span>
  <span style="font-size: 1rem;" class="ms-2">Small</span>
</div>

For individual item overrides, Bootstrap provides align-self-* utilities applied directly to the flex child rather than the container.

<div class="d-flex align-items-start" style="height: 150px;">
  <div class="p-2">Aligned to start</div>
  <div class="p-2 align-self-center">I override to center</div>
  <div class="p-2 align-self-end">I sit at the bottom</div>
</div>

This pattern is invaluable for hero sections and feature rows where one column needs to be vertically centred while another aligns to the top. If you’re working on accessibility-sensitive layouts, check out our guide on how to make a Bootstrap 5 website accessible to WCAG 2.1 AA standards — flex layout order and visual flow have real implications for screen readers.

Gap, Order, and Grow/Shrink: The Utilities Developers Overlook

Before Bootstrap 5 adopted the gap utility, developers used margin utilities like me-2 or ms-3 to space flex items. This worked but created edge cases — the last item would have unwanted margin, or responsive reordering would produce inconsistent spacing. The gap-* utility solves this elegantly.

<!-- Old approach: margin hacks -->
<div class="d-flex">
  <div class="me-3">Item 1</div>
  <div class="me-3">Item 2</div>
  <div>Item 3</div> <!-- no margin on last -->
</div>

<!-- Modern approach: gap utility -->
<div class="d-flex gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Bootstrap 5 also ships row-gap-* and column-gap-* for separate axis control — critical when using flex-wrap where you want different horizontal and vertical spacing between wrapped rows.

The order-* utility lets you rearrange visual order independently of DOM order. Values range from order-0 through order-5, plus order-first (order: -1) and order-last (order: 6). Combined with responsive prefixes, you can completely restructure a layout at different breakpoints.

<div class="d-flex flex-column flex-md-row">
  <div class="order-2 order-md-1 p-3">Sidebar (second on mobile, first on desktop)</div>
  <div class="order-1 order-md-2 p-3">Main Content (first on mobile, second on desktop)</div>
</div>

For flex grow and shrink, Bootstrap provides flex-grow-0, flex-grow-1, flex-shrink-0, and flex-shrink-1. The most practical of these is flex-grow-1, which tells an item to consume all available remaining space — perfect for making a search input fill the width in a flex navbar, or ensuring a card body stretches to equal height.

<!-- Search bar that fills available space -->
<div class="d-flex gap-2 align-items-center">
  <label for="search" class="flex-shrink-0">Search:</label>
  <input id="search" type="text" class="form-control flex-grow-1" placeholder="Type to search...">
  <button class="btn btn-primary flex-shrink-0">Go</button>
</div>

Real-World Layout Patterns Using Bootstrap Flex Utilities

Theory is useful. Real patterns are better. Here are three production-ready layouts that combine multiple flex utilities — the kind of patterns you’ll find in a well-structured template like Canvas.

Pattern 1: Equal-height cards in a row

<div class="d-flex flex-wrap gap-4">
  <div class="card d-flex flex-column" style="width: 280px;">
    <img src="feature.jpg" class="card-img-top" alt="Feature">
    <div class="card-body d-flex flex-column">
      <h5 class="card-title">Feature Title</h5>
      <p class="card-text flex-grow-1">Description text that may vary in length.</p>
      <a href="#" class="btn btn-primary mt-auto">Learn More</a>
    </div>
  </div>
  <!-- Repeat cards -->
</div>

The flex-grow-1 on the paragraph and mt-auto on the button is the classic pattern for pushing a button to the bottom of a card regardless of content length. For more on card variants, see our deep-dive into Bootstrap 5 card components and all their variants.

Pattern 2: Centred hero section (horizontal and vertical)

<section class="d-flex justify-content-center align-items-center text-center" 
         style="min-height: 100vh; background: linear-gradient(135deg, #0d6efd, #6610f2);">
  <div class="text-white px-4">
    <h1 class="display-4 fw-bold">Build Something Great</h1>
    <p class="lead mb-4">The fastest way to launch a professional website.</p>
    <div class="d-flex justify-content-center gap-3 flex-wrap">
      <a href="#" class="btn btn-light btn-lg">Get Started</a>
      <a href="#" class="btn btn-outline-light btn-lg">View Demo</a>
    </div>
  </div>
</section>

Pattern 3: Sticky footer layout

<body class="d-flex flex-column" style="min-height: 100vh;">
  <header>...</header>
  <main class="flex-grow-1">
    <!-- Page content -->
  </main>
  <footer class="py-4 bg-dark text-white">
    <!-- Footer content -->
  </footer>
</body>

This three-line sticky footer solution — d-flex flex-column on body and flex-grow-1 on main — is one of the most elegant things Bootstrap 5 flexbox enables. If you’re building or customising a Bootstrap theme and want to integrate custom colour schemes with this kind of structural flex layout, see how SCSS variables let you theme a Bootstrap 5 site systematically.

Align Content: Multiline Flex Container Alignment

align-content is the least-understood flex utility, and it only takes effect when a flex container has multiple rows of flex items (i.e., when flex-wrap is active and items have actually wrapped). It controls how those rows are distributed along the cross axis — not the individual items within a row, but the rows themselves.

<div class="d-flex flex-wrap align-content-center" 
     style="height: 400px; background: #f8f9fa;">
  <div class="p-3 m-1 bg-primary text-white" style="width: 120px;">1</div>
  <div class="p-3 m-1 bg-primary text-white" style="width: 120px;">2</div>
  <div class="p-3 m-1 bg-primary text-white" style="width: 120px;">3</div>
  <div class="p-3 m-1 bg-primary text-white" style="width: 120px;">4</div>
  <div class="p-3 m-1 bg-primary text-white" style="width: 120px;">5</div>
  <div class="p-3 m-1 bg-primary text-white" style="width: 120px;">6</div>
</div>

Available classes: align-content-start, align-content-end, align-content-center, align-content-between, align-content-around, and align-content-stretch. All support responsive breakpoint suffixes.

A common mistake is adding align-content-center to a single-row flex container and expecting items to centre vertically. It won’t work — use align-items-center for that. The rule of thumb: if you’re not using flex-wrap, you don’t need align-content.

Responsive Flex Utilities and Common Mistakes to Avoid

Every Bootstrap 5 flex utility supports the standard breakpoint system: no suffix (xs, all sizes), -sm-, -md-, -lg-, -xl-, -xxl-. This makes flex utilities extraordinarily powerful for building fully responsive layouts without a single line of custom CSS or a media query.

<!-- Stack on mobile, side-by-side on md, with different justify on lg -->
<div class="d-flex flex-column flex-md-row 
            justify-content-md-between 
            justify-content-lg-around 
            align-items-md-center gap-3">
  <div>Left Content</div>
  <div>Right Content</div>
</div>

Here are the most common mistakes developers make with Bootstrap flex utilities, and how to fix them:

Mistake 1: Forgetting d-flex on the container. As covered earlier — no flex parent, no flex behaviour. Always start with d-flex.

Mistake 2: Confusing main axis and cross axis. In a flex-row container, justify-content is horizontal and align-items is vertical. Flip the direction with flex-column and the axes flip too.

Mistake 3: Using align-content on single-row containers. It only works when items wrap across multiple rows. Use align-items for single-row cross-axis alignment.

Mistake 4: Adding flex utilities to Bootstrap grid columns. Bootstrap’s .col-* elements are flex children of the .row container. Adding d-flex and alignment utilities to the .row instead of a custom wrapper will conflict with Bootstrap’s grid behaviour. Keep grid and custom flex containers separate.

Mistake 5: Not using gap with flex-wrap. When items wrap, gaps applied via the gap utility correctly apply to all four sides of the spacing between items — margins will not behave the same way on wrapped rows. Always reach for gap-* in 2026.

If you’re performance-tuning a site built with these utilities, it’s worth reading our guide on page speed optimisation for Bootstrap 5 HTML templates — flex-heavy layouts can sometimes cause layout thrashing if not structured carefully.

For AI-assisted layout generation using flexbox patterns, CanvasBuilder can generate complete Bootstrap 5 flex layouts from a simple prompt — useful for rapid prototyping before refining classes manually.

Frequently Asked Questions

Why isn’t justify-content-center centering my content?

The most likely cause is that you haven’t applied d-flex to the same element. justify-content-center has no effect without an active flex context. Double-check that the element has both d-flex and justify-content-center applied. A secondary cause is that the flex container has no defined height when you’re trying to centre vertically — in a flex-column context, you need a height for justify-content-center to have space to work with.

What’s the difference between align-items and align-content in Bootstrap 5?

align-items controls how individual flex items are aligned within a single row on the cross axis. align-content controls how multiple rows of wrapped flex items are distributed within the container. If your flex container only has one row of items (no wrapping, or not enough items to wrap), align-content will have no visible effect. Use align-items for the common case of vertical centring in a row container.

Can I use Bootstrap flex utilities inside a Bootstrap grid?

Yes, but with care. The .row element is itself a flex container, so avoid adding conflicting flex utilities directly to it. You can safely add d-flex and related utilities to elements inside .col-* wrappers to create inner flex layouts. For example, making a card inside a grid column use flex internally is perfectly valid and very common.

How do I vertically centre content in a full-screen section using Bootstrap 5 flexbox?

Apply d-flex justify-content-center align-items-center to the section element and set a minimum height. The minimum height is critical — without it, the container collapses to its content height and there’s no space to centre within.

<section class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
  <div class="text-center">
    <h1>Perfectly Centred</h1>
  </div>
</section>

Are Bootstrap 5 flex utilities enough, or do I need custom CSS for complex layouts?

For the vast majority of real-world layouts, Bootstrap 5’s flex utilities are more than sufficient — especially when combined with the gap, order, grow, and shrink utilities. Custom CSS is generally needed only for highly specific animations, non-standard aspect ratios, or browser-quirk workarounds. If you find yourself writing a lot of custom flex CSS in a Bootstrap project, it’s usually a sign that the utility classes aren’t being combined creatively enough. Tools like CanvasBuilder can help you explore utility combinations quickly.