Bootstrap 5 Flexbox Tutorial — Complete Guide with Examples

Bootstrap 5's flexbox utilities are one of its most powerful features. Once you learn the pattern — d-flex on the container, modifiers on the container, flex-* on items — you can handle almost any layout without writing custom CSS.

Enabling Flexbox

<!-- Block flex container (full width) -->
<div class="d-flex">...</div>

<!-- Inline flex container (content width) -->
<div class="d-inline-flex">...</div>

<!-- Responsive: block on mobile, flex from md up -->
<div class="d-block d-md-flex">...</div>

Flex Direction

Controls which direction items flow:

<!-- Row (default) — left to right -->
<div class="d-flex flex-row gap-2">
  <div class="p-2 bg-light border">1</div>
  <div class="p-2 bg-light border">2</div>
  <div class="p-2 bg-light border">3</div>
</div>

<!-- Column — top to bottom -->
<div class="d-flex flex-column gap-2">
  <div class="p-2 bg-light border">1</div>
  <div class="p-2 bg-light border">2</div>
  <div class="p-2 bg-light border">3</div>
</div>

<!-- Reverse directions -->
<div class="d-flex flex-row-reverse">...</div>
<div class="d-flex flex-column-reverse">...</div>

<!-- Responsive: stack on mobile, row on md+ -->
<div class="d-flex flex-column flex-md-row gap-3">
  <div>Sidebar</div>
  <div class="flex-grow-1">Main content</div>
</div>

Justify Content (Main Axis)

Controls alignment along the main axis (horizontal in a row, vertical in a column):

<div class="d-flex justify-content-start">...</div>    <!-- default -->
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>  <!-- space between -->
<div class="d-flex justify-content-around">...</div>   <!-- space around -->
<div class="d-flex justify-content-evenly">...</div>   <!-- equal spaces -->

Most used patterns:

<!-- Navbar: logo on left, links on right -->
<nav class="d-flex justify-content-between align-items-center">
  <a class="fw-bold" style="color:#fd4766;">Brand</a>
  <div class="d-flex gap-3">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
</nav>

<!-- Card footer: price on left, button on right -->
<div class="d-flex justify-content-between align-items-center mt-3">
  <span class="fw-bold" style="color:#fd4766;">$29</span>
  <button class="btn btn-sm btn-primary">Buy</button>
</div>

Align Items (Cross Axis)

Controls alignment along the cross axis (vertical in a row):

<div class="d-flex align-items-start">...</div>    <!-- top -->
<div class="d-flex align-items-center">...</div>   <!-- center (most used) -->
<div class="d-flex align-items-end">...</div>      <!-- bottom -->
<div class="d-flex align-items-stretch">...</div>  <!-- fill height (default) -->
<div class="d-flex align-items-baseline">...</div> <!-- text baseline -->

Most used — vertical centering:

<!-- Icon + text aligned -->
<div class="d-flex align-items-center gap-2">
  <span>🏠</span>
  <span>Dashboard</span>
</div>

<!-- Avatar + name + role -->
<div class="d-flex align-items-center gap-3">
  <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
    style="width:40px;height:40px;">GS</div>
  <div>
    <p class="fw-bold mb-0">Gagan Singh</p>
    <p class="text-muted small mb-0">Founder</p>
  </div>
</div>

Align Self (Per Item)

Override alignment for a single flex item:

<div class="d-flex" style="height:100px;">
  <div class="align-self-start">Top</div>
  <div class="align-self-center">Middle</div>
  <div class="align-self-end">Bottom</div>
  <div class="align-self-stretch">Full height</div>
</div>

Gap Utilities

The cleanest way to space flex items — better than margins because gap doesn't add space to outer edges:

<!-- Uniform gap -->
<div class="d-flex gap-2">...</div>  <!-- 8px -->
<div class="d-flex gap-3">...</div>  <!-- 16px (most common) -->
<div class="d-flex gap-4">...</div>  <!-- 24px -->

<!-- Separate row and column gap -->
<div class="d-flex flex-wrap row-gap-3 column-gap-2">...</div>

Flex Wrap

Controls whether items wrap to a new line when they overflow:

<div class="d-flex flex-nowrap">...</div>    <!-- default: all on one line -->
<div class="d-flex flex-wrap">...</div>      <!-- wraps to next line -->
<div class="d-flex flex-wrap-reverse">...</div>

<!-- Tag cloud example — wraps naturally -->
<div class="d-flex flex-wrap gap-2">
  <span class="badge bg-light text-dark border">Angular</span>
  <span class="badge bg-light text-dark border">Bootstrap 5</span>
  <span class="badge bg-light text-dark border">React</span>
  <span class="badge bg-light text-dark border">Next.js</span>
  <span class="badge bg-light text-dark border">TypeScript</span>
</div>

Flex Grow and Shrink

<!-- flex-grow-1: item fills remaining space -->
<div class="d-flex gap-2">
  <div>Fixed width</div>
  <div class="flex-grow-1">Takes remaining space</div>
  <div>Fixed width</div>
</div>

<!-- Search bar fills available navbar space -->
<nav class="d-flex align-items-center gap-3 p-3 bg-white border-bottom">
  <span class="fw-bold" style="color:#fd4766;">Brand</span>
  <input class="form-control flex-grow-1" placeholder="Search...">
  <button class="btn btn-sm btn-outline-secondary">Filter</button>
</nav>

<!-- flex-shrink-0: prevents item from shrinking -->
<div class="d-flex gap-3">
  <img src="avatar.jpg" class="rounded-circle flex-shrink-0" width="40" height="40">
  <p class="mb-0">Long text that would otherwise squish the avatar...</p>
</div>

Order

Controls visual order of flex items without changing the DOM:

<div class="d-flex">
  <div class="order-3">First in DOM, third visually</div>
  <div class="order-1">Second in DOM, first visually</div>
  <div class="order-2">Third in DOM, second visually</div>
</div>

<!-- Responsive: content before sidebar on mobile, after on desktop -->
<div class="d-flex flex-column flex-md-row gap-3">
  <div class="order-2 order-md-1 flex-grow-1">Main content</div>
  <div class="order-1 order-md-2" style="width:280px;">Sidebar (shown first on mobile)</div>
</div>

Align Content (Multiline)

When flex-wrap creates multiple lines, align-content controls line spacing:

<div class="d-flex flex-wrap align-content-start" style="height:200px;">...</div>
<div class="d-flex flex-wrap align-content-center" style="height:200px;">...</div>
<div class="d-flex flex-wrap align-content-between" style="height:200px;">...</div>

Real-World Flexbox Patterns

<!-- Stat card: icon right-aligned, content left -->
<div class="d-flex align-items-start justify-content-between p-3 bg-white rounded shadow-sm">
  <div>
    <p class="text-muted small mb-1">Total Revenue</p>
    <h4 class="fw-bold mb-0">$12,480</h4>
    <span class="text-success small">↑ 8.2%</span>
  </div>
  <div class="rounded-2 p-2" style="background:rgba(253,71,102,0.1);">💰</div>
</div>

<!-- Button group: left buttons, right primary action -->
<div class="d-flex gap-2 mt-3">
  <button class="btn btn-outline-secondary">Cancel</button>
  <button class="btn btn-outline-secondary">Save Draft</button>
  <button class="btn btn-primary ms-auto">Publish</button>
</div>

<!-- Horizontal list with dividers -->
<div class="d-flex align-items-center gap-3 text-muted small">
  <span>Angular 21</span>
  <span class="vr"></span>
  <span>Bootstrap 5</span>
  <span class="vr"></span>
  <span>MIT License</span>
</div>

Flexbox vs Grid

Use flexbox for one-dimensional layouts — a row of items, a column of items, a navbar, a card footer. Use Bootstrap's grid (.row + .col-*) for two-dimensional page layouts where you need both row and column control.

In practice: grid for the page structure, flexbox for the components inside each grid cell.