Bootstrap 5 Flexbox: Aligning and Spacing Elements With Ease
Flexbox transformed the way developers approach layout — and Bootstrap 5 puts its full power behind a set of utility classes that let you align, distribute, and space elements without writing a single line of custom CSS. If you’ve ever wrestled with vertical centring or fought with justify-content in raw CSS, this guide will show you how Bootstrap 5 makes those problems routine to solve.
- Bootstrap 5 flexbox utilities replace the need for most custom alignment CSS, keeping your stylesheets lean and your markup predictable.
- Classes like justify-content- and align-items- map directly to CSS flexbox properties and support responsive breakpoint prefixes.
- Gap utilities (gap-*) provide a cleaner alternative to margin hacks when spacing flex children.
- Combining flex utilities with Bootstrap’s grid system gives you precise, responsive control over almost any layout pattern.
What Is Bootstrap 5 Flexbox and Why It Matters
Bootstrap 5 ships with a comprehensive set of flexbox utility classes built directly on the CSS Flexible Box Layout specification. Unlike Bootstrap 3’s float-based grid, Bootstrap 5’s entire grid system runs on flexbox under the hood — which means you already have a flex container the moment you use .row.
The utility classes extend this further, letting you apply flexbox behaviour to any element beyond the grid. They follow a consistent naming pattern that mirrors native CSS: d-flex creates a flex container, and every subsequent utility controls how its children behave. If you want a broader foundation before diving into flex specifics, the Bootstrap 5 Complete Guide for Web Designers covers the full picture from grid to components.
In 2025 and beyond, fast, maintainable layout code is a competitive advantage — and Bootstrap 5 flexbox utilities deliver exactly that.
Creating a Flex Container With d-flex
The starting point for any flexbox layout in Bootstrap 5 is d-flex. Apply it to a parent element and all direct children immediately become flex items. You can also use d-inline-flex when you need the container itself to behave as an inline element.
<div class="d-flex">
<div class="p-3 bg-light border">Item 1</div>
<div class="p-3 bg-light border">Item 2</div>
<div class="p-3 bg-light border">Item 3</div>
</div>By default, flex items line up in a row and stretch to match the tallest sibling. From here, every other utility class refines the behaviour of these items. Breakpoint prefixes work exactly as you would expect: d-md-flex activates flex layout only at medium viewports and above, keeping stacked mobile layouts intact.
Controlling Horizontal Alignment With justify-content
The justify-content-* classes control how flex items are distributed along the main axis (horizontal by default). Bootstrap 5 provides six variants that map directly to CSS values:
- justify-content-start — items packed to the left (default)
- justify-content-end — items packed to the right
- justify-content-center — items centred horizontally
- justify-content-between — equal space between items, none on the edges
- justify-content-around — equal space around each item
- justify-content-evenly — equal space between all items including edges
A classic use case is a navigation bar where the logo sits on the left and action buttons on the right. justify-content-between handles this in one class:
<nav class="d-flex justify-content-between align-items-center p-3 bg-dark">
<a href="#" class="text-white fw-bold">BrandName</a>
<div class="d-flex gap-3">
<a href="#" class="text-white">Features</a>
<a href="#" class="text-white">Pricing</a>
<a href="#" class="btn btn-primary btn-sm">Sign Up</a>
</div>
</nav>All classes support responsive prefixes — justify-content-lg-between applies only from large viewports up, letting you stack items on mobile without overrides.
Vertical Alignment With align-items and align-self
The align-items-* classes control alignment on the cross axis (vertical when items flow in a row). This is where Bootstrap 5 flexbox finally makes vertical centring trivial:
- align-items-start — items align to the top
- align-items-center — items centre vertically
- align-items-end — items align to the bottom
- align-items-baseline — items align on their text baseline
- align-items-stretch — items stretch to fill the container height (default)
When you need to override the parent’s alignment for a single child, align-self-* applies the same values to the individual item. This is useful when one card in a row needs to hug the bottom while others stay centred.
Combining d-flex, justify-content-center, and align-items-center on a container with a defined height produces a perfectly centred element — a pattern that used to require multiple hacks in pre-flexbox CSS:
<div class="d-flex justify-content-center align-items-center" style="min-height: 300px; background: #f8f9fa;">
<div class="text-center">
<h2>Perfectly Centred</h2>
<p class="text-muted">Horizontal and vertical, zero custom CSS.</p>
</div>
</div>Spacing Flex Children With gap Utilities
Before Bootstrap 5.1, developers relied on margin utilities like me-3 on each flex child to create spacing. The problem: the last child always needed a margin override, and responsive adjustments multiplied the classes quickly.
gap- utilities solve this cleanly. Applied to the flex container, they add consistent spacing between all children without affecting the outer edges — exactly how CSS gap works natively. Bootstrap maps gap-0 through gap-5 to its spacing scale, and you can also use row-gap- and column-gap-* to control axes independently.
<div class="d-flex flex-wrap gap-3">
<div class="p-3 bg-primary text-white rounded">Card A</div>
<div class="p-3 bg-primary text-white rounded">Card B</div>
<div class="p-3 bg-primary text-white rounded">Card C</div>
<div class="p-3 bg-primary text-white rounded">Card D</div>
</div>For more on Bootstrap 5 layout utilities beyond flexbox — including spacing, sizing, and display helpers — the post on 7 Bootstrap 5 Utilities That Will Transform Your Layout Design is worth reading alongside this one.
If you need to calculate exact pixel-to-rem conversions for custom gap values that extend Bootstrap’s scale, the px to rem converter saves time when writing override CSS.
Flex Direction, Wrap, and Order
Not every layout flows left to right. Bootstrap 5 includes flex-row, flex-row-reverse, flex-column, and flex-column-reverse to control the direction items flow. flex-column is particularly useful for sidebar navigation lists, step-by-step processes, or stacked form layouts.
When items overflow their container, flex-wrap allows them to wrap onto new lines — essential for responsive card grids that don’t use the full Bootstrap grid system. Pair it with gap-* for clean, self-managing layouts:
<div class="d-flex flex-wrap gap-4 justify-content-start">
<div class="p-4 bg-light border rounded" style="min-width: 200px;">Feature 1</div>
<div class="p-4 bg-light border rounded" style="min-width: 200px;">Feature 2</div>
<div class="p-4 bg-light border rounded" style="min-width: 200px;">Feature 3</div>
<div class="p-4 bg-light border rounded" style="min-width: 200px;">Feature 4</div>
<div class="p-4 bg-light border rounded" style="min-width: 200px;">Feature 5</div>
</div>The order-* utilities (order-0 through order-5, plus order-first and order-last) let you reorder items visually without changing the DOM — useful for mobile-first reordering where a hero CTA might need to appear above the headline image on small screens but after it on desktop. These work alongside Bootstrap’s grid utilities to give you granular control, as covered in detail in the Bootstrap 5 Complete Guide for Web Designers.
Frequently Asked Questions
What is the difference between d-flex and the Bootstrap grid row class?
The .row class already applies display: flex internally, but it is designed to work with .col-* children and includes negative margins for gutters. d-flex is a general-purpose utility you apply to any element when you want flexbox behaviour without the grid’s column system — for example, aligning a nav, a button group, or a card header.
Can I use Bootstrap 5 flexbox utilities responsively?
Yes. Every flexbox utility supports Bootstrap 5’s breakpoint prefixes: sm, md, lg, xl, and xxl. For example, flex-column flex-md-row stacks items vertically on mobile and switches to a horizontal row from medium viewports upward — no media queries required in your CSS.
How do gap utilities differ from using margin utilities on flex children?
gap- adds spacing between items only — it does not add space on the outer edges of the container. Margin utilities like me-3 add space to every item including the last, requiring you to either remove the final margin or use :last-child overrides. gap- is simpler, cleaner, and the recommended approach in Bootstrap 5.1 and later.
Does the Canvas HTML Template support Bootstrap 5 flexbox utilities out of the box?
Yes. The Canvas HTML Template is built on Bootstrap 5, so all flexbox utility classes — including d-flex, justify-content-, align-items-, and gap-* — are available in every Canvas layout without loading any additional library.
When should I use flexbox utilities versus the Bootstrap grid?
Use the grid (row/col) when you need column-based layouts with gutters, responsive column widths, and multi-row alignment. Use flexbox utilities when you need fine-grained control over alignment, spacing, or direction within a single row of elements — like navigation bars, button groups, icon-text pairs, or card footers. The two systems complement each other and are commonly used together in the same layout.
If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.