Bootstrap 5 flexbox utilities control layout, alignment and spacing without writing custom CSS. This page covers 4 flexbox patterns — direction, justify, align and practical examples — each ready to use.
Quick Setup
Flexbox utilities need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.d-flex | Creates a flex container |
.d-inline-flex | Inline flex container |
.flex-row | Horizontal direction (default) |
.flex-column | Vertical direction |
.justify-content-center | Centers items horizontally |
.justify-content-between | Spreads items with space between |
.align-items-center | Centers items vertically |
.flex-grow-1 | Item grows to fill space |
.flex-shrink-0 | Item never shrinks |
.flex-wrap | Items wrap to next line |
.ms-auto | Pushes item to the right |
.gap-2 | Gap between flex items |
1. Bootstrap 5 Flex Direction
Control flex direction with flex-row and flex-column. Add -reverse variants to reverse the order.
2. Bootstrap 5 Justify Content
Distribute items along the main axis using justify-content utilities.
3. Bootstrap 5 Align Items
Align items along the cross axis using align-items utilities. Set height to see the difference.
4. Bootstrap 5 Practical Flexbox Patterns
Real-world flexbox patterns — navbar layout, card footer and media object.
Frequently Asked Questions
d-flex creates a block-level flex container that takes full width. d-inline-flex creates an inline flex container that only takes as much width as its content. Use d-flex for layout containers and d-inline-flex for small inline components like button groups or badges.
Add d-flex justify-content-center align-items-center to the container: <div class='d-flex justify-content-center align-items-center' style='min-height:200px'>. This is the Bootstrap 5 replacement for the older vertical centering hacks.
Use ms-auto on the item you want to push right: <div class='d-flex'><span>Left</span><span class='ms-auto'>Right</span></div>. ms-auto sets margin-start (left) to auto, consuming all available space and pushing the element to the far right.
Add flex-wrap to the flex container: <div class='d-flex flex-wrap gap-2'>. Items automatically wrap to the next line when they don't fit. Use flex-nowrap to prevent wrapping. Use flex-wrap-reverse to wrap items upward.
Use flex-grow-1 to make an item grow to fill available space. Use flex-shrink-0 to prevent an item from shrinking (useful for fixed-width sidebars and icons). Use flex-fill to make multiple items share space equally.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.