Flex Utilities
-
Use Bootstrap flex utilities for responsive layout control.
Introduction to Flex Utilities
Modern layouts require flexible, responsive alignment.
CSS Flexbox was introduced to solve problems like:Vertical centering
Equal spacing
Dynamic alignment
Responsive rearrangement
In Bootstrap 5, Flex utilities provide a simple way to use Flexbox without writing CSS.
Flex utilities allow developers to:
Turn any element into a flex container
Control direction, alignment, and spacing
Build responsive layouts quickly
What Are Flex Utilities
Flex utilities are Bootstrap classes that map directly to CSS Flexbox properties.
Flex Utilities
Bootstrap flex utilities provide simple classes to apply Flexbox layout and alignment without writing custom CSS.
<!-- Instead of writing CSS -->
display: flex;
justify-content: center;
align-items: center;
<!-- Use Bootstrap classes -->
<div class="d-flex justify-content-center align-items-center">
</div>This makes layouts:
Faster to build
Easier to read
Easier to maintain
Enabling Flexbox
Making a Flex Container
To use Flex utilities, you must first enable flex.
Enabling Flexbox
Use the d-flex class in Bootstrap to create a flex container, making layouts faster to build, easier to read, and easier to maintain.
<!-- Making a Flex Container -->
<div class="d-flex">
<div>Item 1</div>
<div>Item 2</div>
</div>What happens:
Parent becomes a flex container
Children become flex items
Items align horizontally by default
Inline Flex
Use the d-inline-flex class to create a flex container that behaves like an inline element.
<div class="d-inline-flex">
<span>One</span>
<span>Two</span>
</div>Difference:
d-flex → block-level flex container
d-inline-flex → inline-level flex container
Flex Direction
What Is Flex Direction ?
Flex direction controls the direction in which flex items are placed.
CSS equivalent:
flex-direction: row;
Bootstrap provides utility classes for this.
Flex Direction Classes
Class Direction flex-row Left → Right (default) flex-row-reverse Right → Left flex-column Top → Bottom flex-column-reverse Bottom → Top
Bootstrap Flex Direction
Use Bootstrap flex direction classes to arrange items horizontally, vertically, or change the layout based on screen size.
<!-- Horizontal Layout (Default) -->
<div class="d-flex flex-row">
<div>Home</div>
<div>About</div>
<div>Contact</div>
</div>
<!-- Vertical Layout -->
<div class="d-flex flex-column">
<div>Dashboard</div>
<div>Profile</div>
<div>Settings</div>
</div>
<!-- Responsive Flex Direction -->
<div class="d-flex flex-column flex-md-row">
<div>Item 1</div>
<div>Item 2</div>
</div>Behavior:
Mobile → vertical
Medium screens and above → horizontal
Flex Alignment
Justify Content (Horizontal Alignment)
justify-content controls alignment along the main axis.Utility Classes
Class Effect justify-content-start Align left justify-content-center Center justify-content-end Align right justify-content-between Space between justify-content-around Space around justify-content-evenly Equal spacing
Bootstrap Justify Content
Use justify-content classes in Bootstrap to control horizontal spacing and alignment of items inside a flex container.
<div class="d-flex justify-content-between">
<div>Logo</div>
<div>Menu</div>
</div>Flex Alignment (Cross Axis)
Align Items (Vertical Alignment)
align-items controls alignment perpendicular to the main axis.
Utility Classes
Class Effect align-items-start Top align-items-center Center align-items-end Bottom align-items-baseline Text baseline align-items-stretch Stretch (default)
Bootstrap Vertical Centering
Use the align-items-center class to vertically center content inside a flex container.
<div class="d-flex align-items-center" style="height: 150px;">
<div>Centered content</div>
</div>This is one of the most common Flexbox use cases.
Aligning Individual Items
Align Self
Sometimes only one item needs different alignment.
Bootstrap Align Self
Use align-self classes to control the vertical alignment of individual items inside a flex container.
<div class="d-flex">
<div class="align-self-start">Top</div>
<div class="align-self-center">Center</div>
<div class="align-self-end">Bottom</div>
</div>Used when:
One item needs special positioning
Other items remain unchanged
Combining Flex Direction and Alignment
Combine flex direction with alignment utilities to control both layout direction and item positioning in a flex container.
<div class="d-flex flex-column justify-content-center align-items-center" style="height: 200px;">
<h5>Title</h5>
<button class="btn btn-primary">Action</button>
</div>What this achieves:
Vertical layout
Content centered both horizontally and vertically
Clean, responsive UI
Responsive Flex Alignment
Use responsive flex alignment classes to change item alignment at different screen sizes.
<div class="d-flex justify-content-center justify-content-lg-between">
<div>Item A</div>
<div>Item B</div>
</div>Behavior:
Centered on mobile
Spread out on large screens
Common Mistakes
Forgetting to use d-flex
Confusing justify-content and align-items
Overusing flex for simple layouts
Ignoring responsive variants
Mixing grid and flex without planning
Best Practices for Flex Utilities
Enable flex only when needed
Think in terms of axes (main vs cross)
Start mobile-first
Use responsive flex utilities wisely
Keep class lists readable
Prefer grid for page layout, flex for alignment