Flex and Display Utilities

Beyond the grid, Bootstrap exposes flexbox itself as a set of utility classes — useful any time you need to arrange elements that aren't full grid columns, like the contents of a navbar or a card's footer.

Turning an element into a flex container

<div class="d-flex justify-content-between align-items-center">
  <h5 class="mb-0">Order #4821</h5>
  <span class="badge bg-success">Paid</span>
</div>

d-flex sets display: flex, and from there justify-content-* and align-items-* work exactly as they do on a grid row (because a row is just a d-flex element with some extra grid-specific styling). This pattern — a title on the left, a status or action on the right — comes up constantly in card headers, list items, and toolbars.

Direction and wrapping

<div class="d-flex flex-column flex-md-row gap-3">
  <div>Filter panel</div>
  <div>Results list</div>
</div>

flex-column stacks children vertically instead of the flexbox default of horizontal; flex-md-row switches back to horizontal from the md breakpoint up — a common way to put a filter sidebar above the results on mobile and beside them on desktop. gap-3 adds spacing between flex children directly, without needing margin utilities on each individual item.

Growing and shrinking

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="avatar.jpg" width="50" height="50" alt="" />
  </div>
  <div class="flex-grow-1 ms-3">
    <strong>Jordan Lee</strong>
    <p class="mb-0">Left a comment on your post.</p>
  </div>
</div>

flex-shrink-0 keeps the avatar at its natural size even if space gets tight; flex-grow-1 lets the text block expand to fill whatever space remains. This avatar-plus-text pattern is one of the most common uses of flex-grow/shrink utilities in real interfaces — notification rows, comments, chat messages.

Toggling display, responsively

<button class="btn btn-primary d-md-none">Menu</button>
<nav class="d-none d-md-flex gap-3">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <a href="#">Pricing</a>
</nav>

d-md-none hides the hamburger button from md up; d-none d-md-flex does the opposite for the full nav, hiding it by default and displaying it as a flex row once there's room. Note that these are display utilities, not visibility ones — d-none removes the element from layout entirely (display: none), whereas a visibility class like .invisible would hide it but still reserve its space.

Why use these instead of custom flexbox CSS

The value isn't that Bootstrap's flexbox utilities do anything CSS can't — it's that reaching for d-flex justify-content-between in your markup avoids a small, throwaway CSS rule for every one-off layout tweak, which otherwise tends to pile up into stylesheets full of single-use class names. Save custom flexbox CSS for layouts complex enough that chaining utility classes would be harder to read than just writing the rule.