Flexbox Utilities

Bootstrap 4's grid is built on flexbox, and that same flexbox engine is exposed directly as a set of utility classes you can drop onto any element. .d-flex turns an element into a flex container, and from there .flex-row/.flex-column, .justify-content-*, .align-items-*, .flex-wrap, and .flex-grow-*/.flex-shrink-* let you lay things out without writing a single line of custom CSS. We'll use these to build a toolbar for TrailMap, our hiking trail directory app.

Turning On Flex: .d-flex and .d-inline-flex

.d-flex sets display: flex on an element, making its direct children flex items. .d-inline-flex does the same but with inline-flex, so the container itself flows inline with surrounding text.

<!-- TrailMap: a row of trail difficulty tags -->
<div class="d-flex">
  <span class="badge badge-success">Easy</span>
  <span class="badge badge-warning">Moderate</span>
  <span class="badge badge-danger">Hard</span>
</div>

Setting Direction: .flex-row and .flex-column

By default a flex container lays its items out in a row. Add .flex-row-reverse to reverse that order, or .flex-column/.flex-column-reverse to stack items vertically instead.

<!-- TrailMap: stacking the filter panel vertically on small screens -->
<div class="d-flex flex-column">
  <label>Region</label>
  <label>Difficulty</label>
  <label>Distance</label>
</div>

Controlling Wrapping: .flex-wrap

Flex items shrink to fit a single line by default (.flex-nowrap). Add .flex-wrap to let items drop onto a new line instead of squeezing, which matters once a toolbar has more buttons than will fit.

<div class="d-flex flex-wrap">
  <button class="btn btn-outline-secondary">Region</button>
  <button class="btn btn-outline-secondary">Difficulty</button>
  <button class="btn btn-outline-secondary">Distance</button>
  <button class="btn btn-outline-secondary">Elevation</button>
</div>

Justify Content and Align Items

.justify-content-* (start, end, center, between, around) controls spacing along the main axis. .align-items-* (start, end, center, baseline, stretch) controls alignment along the cross axis.

<!-- TrailMap: toolbar with logo on the left, actions on the right, vertically centered -->
<div class="d-flex justify-content-between align-items-center">
  <span class="h5 mb-0">TrailMap</span>
  <div class="d-flex">
    <button class="btn btn-sm btn-outline-primary">Sort</button>
    <button class="btn btn-sm btn-primary">Submit a Trail</button>
  </div>
</div>

Growing and Shrinking: .flex-grow-* and .flex-shrink-*

.flex-grow-1 lets an item expand to fill leftover space along the main axis; .flex-grow-0 keeps it at its natural size. .flex-shrink-1/.flex-shrink-0 control whether an item is allowed to shrink below its natural size when space is tight.

<!-- TrailMap: search box grows to fill space, the button stays fixed size -->
<div class="d-flex">
  <input class="form-control flex-grow-1" type="text" placeholder="Search trails...">
  <button class="btn btn-primary flex-shrink-0">Search</button>
</div>

Worked Example: A TrailMap Toolbar Built With Flex Utilities

Putting it all together, here's the toolbar that sits above TrailMap's trail listing page — a title on the left, a search box that grows to fill the middle, and action buttons pinned to the right, all wrapping cleanly on narrow screens.

<div class="d-flex flex-wrap justify-content-between align-items-center p-2">
  <span class="h5 mb-0 flex-shrink-0">Trails near you</span>
  <input class="form-control flex-grow-1 mx-2" style="max-width: 320px;" type="text" placeholder="Search trails...">
  <div class="d-flex flex-shrink-0">
    <button class="btn btn-outline-secondary">Filter</button>
    <button class="btn btn-primary">Submit a Trail</button>
  </div>
</div>
Up next: Flex utilities handle layout direction and alignment, but you'll also want fine control over the gaps between elements — that's the Spacing Utilities lesson.