Flexbox Utilities

The grid solves page-level layout, but toolbars, card footers, media objects and navigation rows are one-dimensional problems better handled by flexbox. Bootstrap exposes almost every flexbox property as a responsive utility class. By the end of this lesson you will be able to build these patterns, including the sticky-footer page layout, without writing any CSS.

Enabling Flex

d-flex creates a block-level flex container; d-inline-flex creates an inline one. Both accept breakpoint infixes, so d-md-flex switches to flex only from md up:

html

<div class="d-flex p-2 border">
  <div class="p-2 bg-light">Item 1</div>
  <div class="p-2 bg-light">Item 2</div>
</div>

Children of a flex container are laid out in a row by default and shrink to their content width.

Direction

| Class | Effect | |---|---| | flex-row | Left to right (default) | | flex-row-reverse | Right to left | | flex-column | Top to bottom | | flex-column-reverse | Bottom to top |

The most common responsive use is stacking on phones and going horizontal on larger screens:

html

<div class="d-flex flex-column flex-md-row gap-3">
  <div class="flex-fill card p-3">Stacked on phones</div>
  <div class="flex-fill card p-3">Side by side from md</div>
</div>

Justify and Align

justify-content-* distributes items along the main axis; align-items-* aligns them on the cross axis; align-self-* overrides alignment for a single item. All take start, end, center, and justify-content additionally takes between, around and evenly while align-items takes baseline and stretch.

html

<div class="d-flex justify-content-between align-items-center border p-2">
  <strong>Order #4821</strong>
  <span class="badge text-bg-success">Shipped</span>
</div>

For multi-line flex containers, align-content-* controls how the lines themselves are packed.

Grow, Shrink and Fill

flex-fill: every item with this class gets equal space (flex: 1 1 auto).
flex-grow-1 / flex-grow-0: let an item absorb remaining space, or not.
flex-shrink-1 / flex-shrink-0: allow or prevent an item from shrinking below its content size.

html

<div class="d-flex">
  <input class="form-control flex-grow-1" placeholder="Search">
  <button class="btn btn-primary ms-2 flex-shrink-0">Go</button>
</div>

flex-grow-1 is also the basis of the sticky footer layout shown at the top of the lesson: the <main> element grows to fill any unused height so the footer sits at the bottom even on short pages.

Auto Margins

Inside a flex container, ms-auto and me-auto consume all free space on one side, which pushes an item (and everything after it) to the opposite edge:

html

<nav class="d-flex align-items-center gap-3 p-2 border">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <a href="#" class="ms-auto btn btn-sm btn-primary">Sign in</a>
</nav>

In a column layout, mt-auto does the same vertically, for example to keep a "Read more" button at the bottom of a card regardless of text length: <div class="card-body d-flex flex-column"> ... <a class="btn btn-primary mt-auto">.

Wrapping and Order

By default flex items stay on one line and shrink. flex-wrap allows them to wrap; flex-nowrap forbids it; flex-wrap-reverse wraps upward. Pair wrapping with gap-* rather than margins:

html

<div class="d-flex flex-wrap gap-2">
  <span class="badge text-bg-secondary">html</span>
  <span class="badge text-bg-secondary">css</span>
  <span class="badge text-bg-secondary">bootstrap</span>
</div>

order-0 to order-5, order-first and order-last reorder flex items exactly as they do grid columns.

Responsive Reference

Every class in this lesson takes an optional breakpoint: flex-{bp}-column, justify-content-{bp}-between, align-items-{bp}-center, flex-{bp}-wrap, flex-{bp}-grow-1, order-{bp}-2, and so on. Read a class list from left to right as "phones first, then each breakpoint overrides".

Common Mistakes

Applying justify-content-* to a block element. It only affects flex (or grid) containers; add d-flex first.
Using w-100 on a flex child to make it stretch. Use flex-grow-1 or flex-fill so other items still fit.
Forgetting flex-wrap on tag lists. Without it, badges shrink and overflow instead of wrapping.
Nesting .row inside d-flex for equal columns. Use flex-fill or row-cols-*, not both systems at once.

Key Takeaways

d-flex and d-inline-flex create flex containers; flex-row/flex-column set the direction, responsively if needed.
justify-content-* handles the main axis, align-items-* the cross axis, align-self-* a single item.
flex-fill, flex-grow-* and flex-shrink-* control how items share space; flex-grow-1 on <main> builds a sticky footer.
ms-auto/mt-auto push items to the opposite edge; gap-* spaces wrapped items cleanly.
Every flex utility takes breakpoint infixes, so stacked-to-horizontal layouts need no CSS.

Next lesson: Shadows, Opacity, Overflow and Interaction Utilities - depth, transparency, scrolling behavior and user-select helpers that finish off a design.