Flexbox Utilities
Bootstrap 5's grid is built on flexbox, and Bootstrap exposes almost the entire flexbox spec as ready-made utility classes. That means you can lay out a toolbar, center a button, or stack items on mobile and place them side by side on desktop — without writing a single line of custom CSS. In this lesson we rebuild a TrailMap navbar toolbar using nothing but flex utility classes.
Turning On Flex: .d-flex and .d-inline-flex
Add .d-flex to any element to make it a flex container (display:flex). Use .d-inline-flex for display:inline-flex when the container should sit inline with surrounding text.
<!-- TrailMap toolbar: flex container, children in a row by default -->
<div class="d-flex bg-light p-2">
<div class="p-2">TrailMap</div>
<div class="p-2">Trails</div>
<div class="p-2">Submit a Trail</div>
</div>Direction: .flex-row and .flex-column
.flex-row (the default) lays children out left to right. .flex-column stacks them top to bottom. Combine with a responsive breakpoint infix, e.g. .flex-md-row, to change direction only from a given breakpoint up.
<!-- Stacked on mobile, side-by-side from md up -->
<div class="d-flex flex-column flex-md-row">
<div class="p-2">Difficulty: Moderate</div>
<div class="p-2">Distance: 8.2 km</div>
<div class="p-2">Elevation: 420 m</div>
</div>Alignment: .justify-content-* and .align-items-*
justify-content-* controls alignment along the main axis (start, end, center, between, around, evenly). align-items-* controls alignment along the cross axis (start, end, center, baseline, stretch).
<!-- Logo left, nav links pushed to the far right, vertically centered -->
<div class="d-flex justify-content-between align-items-center bg-light p-3">
<span class="fw-bold">TrailMap</span>
<div class="d-flex align-items-center">
<a href="#" class="me-3">Trails</a>
<a href="#" class="btn btn-primary">Submit a Trail</a>
</div>
</div>justify-content and align-items — Bootstrap just gives every value its own class so you never write <style> for it.Wrapping: .flex-wrap
By default flex items shrink to fit on one line. Add .flex-wrap to let items drop to a new line once the row runs out of space — useful for a row of trail filter tags that grows with the number of tags.
<div class="d-flex flex-wrap gap-2">
<span class="badge bg-secondary">Waterfall</span>
<span class="badge bg-secondary">Dog Friendly</span>
<span class="badge bg-secondary">Loop Trail</span>
<span class="badge bg-secondary">Kid Friendly</span>
<span class="badge bg-secondary">Summit View</span>
</div>Growing and Shrinking: .flex-grow-* and .flex-shrink-*
.flex-grow-1 lets an item expand to fill any leftover space along the main axis; .flex-grow-0 stops it from growing. .flex-shrink-1/.flex-shrink-0 control whether an item is allowed to shrink below its content size.
<!-- Search box grows to fill the space between the logo and the button -->
<div class="d-flex align-items-center bg-light p-2">
<span class="flex-shrink-0 me-2">TrailMap</span>
<input type="search" class="form-control flex-grow-1 me-2" placeholder="Search trails near...">
<button class="btn btn-primary flex-shrink-0">Search</button>
</div>Worked Example: A TrailMap Toolbar Built Entirely From Flex Utilities
Putting it together — a responsive toolbar with a brand, a growing search box, and action buttons, all with zero custom CSS:
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center bg-light p-3 gap-2">
<div class="d-flex align-items-center flex-shrink-0">
<strong>TrailMap</strong>
</div>
<div class="d-flex flex-grow-1">
<input type="search" class="form-control" placeholder="Search trails...">
</div>
<div class="d-flex flex-wrap gap-2 flex-shrink-0">
<a href="#" class="btn btn-outline-secondary">My Saved Trails</a>
<a href="#" class="btn btn-primary">Submit a Trail</a>
</div>
</div>