Bootstrap 5 Tutorial

Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction
→

Flex Utilities in Bootstrap 5

Flex Utilities: Complete set of utilities for working with CSS Flexible Box Layout (Flexbox).

What are Flex Utilities?

Flex utilities provide a comprehensive set of classes for controlling flex containers and flex items, making it easy to create responsive layouts without writing custom CSS.

Enable Flexbox

Creating Flex Containers
Regular Flex
Item 1
Item 2
Item 3
.d-flex
Inline Flex
Item A
Item B
Inline text.d-inline-flex
Responsive Flex
Stacked
Horizontal
.d-flex .flex-column .flex-md-row
<!-- Regular flex container -->
<div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
</div>

<!-- Inline flex container -->
<div class="d-inline-flex">
  <div>Inline flex item</div>
</div>
Regular text flows after

<!-- Responsive flex direction -->
<div class="d-flex flex-column flex-md-row">
  <div>Stacked on mobile, row on desktop</div>
  <div>Second item</div>
</div>

<!-- All flex display options -->
<div class="d-flex">display: flex</div>
<div class="d-inline-flex">display: inline-flex</div>
<div class="d-sm-flex">flex on sm breakpoint</div>
<div class="d-md-inline-flex">inline-flex on md breakpoint</div>

Direction

Flex Direction Utilities
Row (Default)
1
2
3
.flex-row
Row Reverse
1
2
3
.flex-row-reverse
Column
1
2
3
.flex-column
Column Reverse
1
2
3
.flex-column-reverse
Responsive Direction
Responsive
Direction
.flex-column .flex-md-row .flex-lg-column .flex-xl-row
<!-- Direction utilities -->
<div class="d-flex flex-row">Horizontal (default)</div>
<div class="d-flex flex-row-reverse">Horizontal reversed</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-column-reverse">Vertical reversed</div>

<!-- Responsive direction -->
<div class="d-flex flex-column flex-md-row">
  <!-- Column on mobile, row on tablet+ -->
</div>

<div class="d-flex flex-column flex-md-row flex-lg-column">
  <!-- Column on mobile, row on tablet, column on desktop -->
</div>

<!-- All responsive variants -->
<div class="flex-row">Default row</div>
<div class="flex-sm-row">Row on sm+</div>
<div class="flex-md-row">Row on md+</div>
<div class="flex-lg-row">Row on lg+</div>
<div class="flex-xl-row">Row on xl+</div>
<div class="flex-xxl-row">Row on xxl+</div>

<!-- Same for column and reverse variants -->
<div class="flex-column flex-md-row-reverse">
  <!-- Column on mobile, row-reverse on tablet+ -->
</div>

Justify Content

Horizontal Alignment
Start
Item
.justify-content-start
Center
Item
.justify-content-center
End
Item
.justify-content-end
Between
Left
Right
.justify-content-between
Around
Item 1
Item 2
.justify-content-around
Evenly
Item A
Item B
.justify-content-evenly
Responsive
Responsive
.justify-content-start .justify-content-md-center .justify-content-lg-end
<!-- Justify content options -->
<div class="d-flex justify-content-start">
  <div>Aligned to start (default)</div>
</div>

<div class="d-flex justify-content-center">
  <div>Centered horizontally</div>
</div>

<div class="d-flex justify-content-end">
  <div>Aligned to end</div>
</div>

<div class="d-flex justify-content-between">
  <div>First item</div>
  <div>Last item</div>
</div>

<div class="d-flex justify-content-around">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="d-flex justify-content-evenly">
  <div>Item A</div>
  <div>Item B</div>
</div>

<!-- Responsive justify content -->
<div class="d-flex justify-content-start justify-content-md-center justify-content-lg-end">
  <!-- Start on mobile, center on tablet, end on desktop -->
</div>

<!-- All breakpoint variants -->
<div class="justify-content-start">Start always</div>
<div class="justify-content-sm-center">Center on sm+</div>
<div class="justify-content-md-end">End on md+</div>
<div class="justify-content-lg-between">Between on lg+</div>
<div class="justify-content-xl-around">Around on xl+</div>
<div class="justify-content-xxl-evenly">Evenly on xxl+</div>

Align Items

Vertical Alignment
Stretch (Default)
Stretched
.align-items-stretch
Start
Top
.align-items-start
Center
Middle
.align-items-center
End
Bottom
.align-items-end
Baseline
Large
Text
.align-items-baseline
Responsive
Responsive
.align-items-start .align-items-md-center .align-items-lg-end
<!-- Align items options -->
<div class="d-flex align-items-stretch" style="height: 100px;">
  <div>Stretched to container height</div>
</div>

<div class="d-flex align-items-start" style="height: 100px;">
  <div>Aligned to top</div>
</div>

<div class="d-flex align-items-center" style="height: 100px;">
  <div>Vertically centered</div>
</div>

<div class="d-flex align-items-end" style="height: 100px;">
  <div>Aligned to bottom</div>
</div>

<div class="d-flex align-items-baseline" style="height: 100px;">
  <div style="font-size: 2rem;">Large text</div>
  <div>Aligned by baseline</div>
</div>

<!-- Complete centering -->
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
  <div>Perfectly centered</div>
</div>

<!-- Responsive alignment -->
<div class="d-flex align-items-start align-items-md-center align-items-lg-end">
  <!-- Top on mobile, center on tablet, bottom on desktop -->
</div>

<!-- All breakpoint variants -->
<div class="align-items-start">Start always</div>
<div class="align-items-sm-center">Center on sm+</div>
<div class="align-items-md-end">End on md+</div>
<div class="align-items-lg-baseline">Baseline on lg+</div>
<div class="align-items-xl-stretch">Stretch on xl+</div>

Align Self

Individual Item Alignment
Top
Middle
Bottom
Stretch
Auto
Baseline
Individual Control
Default
Start
Center
End
Responsive Align Self
Responsive
<!-- Align self on individual items -->
<div class="d-flex" style="height: 150px;">
  <div class="align-self-start">Top aligned</div>
  <div class="align-self-center">Center aligned</div>
  <div class="align-self-end">Bottom aligned</div>
  <div class="align-self-stretch">Stretched to height</div>
  <div class="align-self-baseline">Baseline aligned</div>
  <div>Auto (default)</div>
</div>

<!-- Override container alignment -->
<div class="d-flex align-items-center" style="height: 100px;">
  <div>Centered by container</div>
  <div class="align-self-start">Overridden to top</div>
  <div class="align-self-end">Overridden to bottom</div>
</div>

<!-- Responsive align self -->
<div class="d-flex" style="height: 100px;">
  <div class="align-self-start align-self-md-center align-self-lg-end">
    <!-- Top on mobile, center on tablet, bottom on desktop -->
  </div>
</div>

<!-- All options -->
<div class="align-self-auto">Default behavior</div>
<div class="align-self-start">Align to start</div>
<div class="align-self-end">Align to end</div>
<div class="align-self-center">Center align</div>
<div class="align-self-baseline">Baseline align</div>
<div class="align-self-stretch">Stretch to fill</div>

Fill, Grow, and Shrink

Flex Item Sizing
Flex Fill
Flex fill
Equal width
Three items
.flex-fill
Flex Grow
Fixed
Grows
Fixed
.flex-grow-1
Flex Shrink
Wide
Shrinks
Wide
.flex-shrink-1
Responsive Fill
Responsive
Always fill
.flex-fill .flex-md-grow-0
<!-- Flex fill - equal width items -->
<div class="d-flex">
  <div class="flex-fill">Equal width</div>
  <div class="flex-fill">Equal width</div>
  <div class="flex-fill">Equal width</div>
</div>

<!-- Flex grow -->
<div class="d-flex">
  <div style="width: 100px;">Fixed width</div>
  <div class="flex-grow-1">Takes remaining space</div>
  <div style="width: 100px;">Fixed width</div>
</div>

<!-- Flex shrink -->
<div class="d-flex">
  <div class="w-100">Wide content</div>
  <div class="flex-shrink-1">Can shrink</div>
  <div class="w-100">Wide content</div>
</div>

<!-- Grow and shrink levels -->
<div class="d-flex">
  <div class="flex-grow-0">Won't grow</div>
  <div class="flex-grow-1">Grows a little</div>
  <div class="flex-grow-2">Grows more (custom)</div>
</div>

<div class="d-flex">
  <div class="flex-shrink-0">Won't shrink</div>
  <div class="flex-shrink-1">Can shrink</div>
</div>

<!-- Responsive grow/shrink -->
<div class="d-flex">
  <div class="flex-grow-0 flex-md-grow-1">
    <!-- Fixed on mobile, grows on desktop -->
  </div>
</div>

Wrap

Flex Wrapping
No Wrap
Item 1
Item 2
Item 3
Item 4
Item 5
.flex-nowrap
Wrap
Wrap Item 1
Wrap Item 2
Wrap Item 3
Wrap Item 4
Wrap Item 5
.flex-wrap
Wrap Reverse
Reverse 1
Reverse 2
Reverse 3
Reverse 4
Reverse 5
.flex-wrap-reverse
Responsive Wrapping
Responsive
Wrap
Behavior
Changes
Breakpoints
.flex-nowrap .flex-md-wrap .flex-lg-nowrap
<!-- Flex wrap options -->
<div class="d-flex flex-nowrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- No wrapping, may overflow -->
</div>

<div class="d-flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- Wraps to next line when needed -->
</div>

<div class="d-flex flex-wrap-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- Wraps in reverse order -->
</div>

<!-- Responsive wrapping -->
<div class="d-flex flex-wrap flex-md-nowrap">
  <!-- Wrap on mobile, nowrap on tablet+ -->
</div>

<!-- All breakpoint variants -->
<div class="flex-nowrap">Never wrap</div>
<div class="flex-wrap">Wrap when needed</div>
<div class="flex-wrap-reverse">Wrap reverse</div>
<div class="flex-sm-nowrap">No wrap on sm+</div>
<div class="flex-md-wrap">Wrap on md+</div>
<div class="flex-lg-wrap-reverse">Wrap reverse on lg+</div>

Order

Visual Reordering
Order 3 (Last)
Order 1 (First)
Order 2 (Middle)
Order 4
Order 5
Last
Default (0)
First
Order 2
Responsive Order
Mobile 1st, Desktop 3rd
Mobile 3rd, Desktop 1st
Always 2nd
<!-- Order utilities -->
<div class="d-flex">
  <div class="order-3">Appears third</div>
  <div class="order-1">Appears first</div>
  <div class="order-2">Appears second</div>
</div>

<!-- First and last helpers -->
<div class="d-flex">
  <div class="order-last">Appears last</div>
  <div>Default order (0)</div>
  <div class="order-first">Appears first</div>
</div>

<!-- Order range 0-5 -->
<div class="d-flex">
  <div class="order-0">Order 0</div>
  <div class="order-1">Order 1</div>
  <div class="order-2">Order 2</div>
  <div class="order-3">Order 3</div>
  <div class="order-4">Order 4</div>
  <div class="order-5">Order 5</div>
</div>

<!-- Responsive ordering -->
<div class="d-flex">
  <div class="order-1 order-md-3">
    <!-- First on mobile, third on desktop -->
  </div>
  <div class="order-3 order-md-1">
    <!-- Third on mobile, first on desktop -->
  </div>
  <div class="order-2">
    <!-- Always second -->
  </div>
</div>

<!-- All breakpoint variants -->
<div class="order-0">Order 0 always</div>
<div class="order-sm-1">Order 1 on sm+</div>
<div class="order-md-2">Order 2 on md+</div>
<div class="order-lg-3">Order 3 on lg+</div>
<div class="order-xl-4">Order 4 on xl+</div>
<div class="order-xxl-5">Order 5 on xxl+</div>
<div class="order-first order-md-last">
  <!-- First on mobile, last on desktop -->
</div>

Align Content

Multi-line Alignment
Start
1
2
3
4
5
6
7
8
.align-content-start
Center
1
2
3
4
5
6
7
8
.align-content-center
End
1
2
3
4
5
6
7
8
.align-content-end
Between
1
2
3
4
5
6
.align-content-between
Around
1
2
3
4
5
6
.align-content-around
Stretch
Stretch 1
Stretch 2
Stretch 3
Stretch 4
Stretch 5
Stretch 6
.align-content-stretch
<!-- Align content (multi-line alignment) -->
<div class="d-flex flex-wrap align-content-start" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Lines packed to start -->
</div>

<div class="d-flex flex-wrap align-content-center" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Lines centered -->
</div>

<div class="d-flex flex-wrap align-content-end" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Lines packed to end -->
</div>

<div class="d-flex flex-wrap align-content-between" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Even space between lines -->
</div>

<div class="d-flex flex-wrap align-content-around" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Even space around lines -->
</div>

<div class="d-flex flex-wrap align-content-stretch" style="height: 200px;">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- Lines stretch to fill -->
</div>

<!-- Responsive align content -->
<div class="d-flex flex-wrap align-content-start align-content-md-center">
  <!-- Start on mobile, center on desktop -->
</div>

Practical Examples

Card with Flex Layout
Avatar
User Name

Posted 2 hours ago

This is a great example of using flex utilities for content layout.

24 likes • 8 comments
<!-- Card with flex layout -->
<div class="card">
  <div class="card-body">
    <!-- Avatar + content + button -->
    <div class="d-flex align-items-start mb-3">
      <!-- Avatar (fixed width) -->
      <div class="flex-shrink-0">
        <img src="avatar.jpg" class="rounded" alt="">
      </div>
      
      <!-- Content (flexible) -->
      <div class="flex-grow-1 ms-3">
        <h5 class="card-title">Title</h5>
        <p class="card-text text-muted">Subtitle</p>
        <p class="card-text">Main content</p>
      </div>
      
      <!-- Button (fixed width) -->
      <div class="flex-shrink-0">
        <button class="btn btn-sm btn-outline-primary">Action</button>
      </div>
    </div>
    
    <!-- Actions + stats -->
    <div class="d-flex justify-content-between align-items-center">
      <!-- Action buttons -->
      <div class="d-flex gap-2">
        <button class="btn btn-sm btn-outline-success">
          <i class="bi bi-heart"></i> Like
        </button>
        <button class="btn btn-sm btn-outline-primary">
          <i class="bi bi-chat"></i> Comment
        </button>
      </div>
      
      <!-- Stats -->
      <div class="text-muted small">
        24 likes • 8 comments
      </div>
    </div>
  </div>
</div>
Responsive Navigation
Feature 1

Flex item that grows to fill space.

Feature 2

Another flex item with equal width.

Feature 3

Third item completes the row.

<!-- Responsive navigation -->
<nav class="navbar">
  <div class="container-fluid">
    <!-- Brand with flex -->
    <a class="navbar-brand d-flex align-items-center">
      <span class="logo-circle">B</span>
      <span class="ms-2 d-none d-sm-block">Brand</span>
    </a>
    
    <!-- Right section -->
    <div class="d-flex flex-grow-1 justify-content-end">
      <!-- Desktop nav (hidden on mobile) -->
      <div class="d-none d-md-flex align-items-center">
        <a href="#" class="me-3">Home</a>
        <a href="#" class="me-3">Features</a>
      </div>
      
      <!-- Buttons -->
      <div class="d-flex align-items-center gap-2">
        <button class="btn btn-sm btn-outline-primary">Login</button>
        <button class="btn btn-sm btn-primary d-none d-md-inline-flex">
          Sign Up
        </button>
        <button class="navbar-toggler d-md-none">Menu</button>
      </div>
    </div>
  </div>
</nav>

<!-- Equal width cards -->
<div class="d-flex flex-column flex-md-row gap-3">
  <div class="flex-fill card">Card 1</div>
  <div class="flex-fill card">Card 2</div>
  <div class="flex-fill card">Card 3</div>
</div>

Best Practices

Flex Utility Guidelines
  • ✅ Start with mobile-first responsive design
  • ✅ Use .flex-column for mobile, .flex-row for desktop
  • ✅ Combine justify-content and align-items for perfect centering
  • ✅ Use .flex-fill for equal width items
  • ✅ Leverage order utilities for visual reordering
  • ✅ Use .flex-wrap for responsive item wrapping
  • ✅ Test flex layouts at all breakpoints
  • ✅ Document complex flex behaviors for team reference

Common Flex Patterns

PatternClassesResultUse Case
Perfect Center.d-flex .justify-content-center .align-items-centerHorizontally and vertically centeredLoading spinners, hero content
Equal Width.d-flex > .flex-fillEqual width itemsNavigation tabs, button groups
Space Between.d-flex .justify-content-betweenItems at opposite endsHeaders, footers
Mobile Stack.d-flex .flex-column .flex-md-rowStacked on mobile, row on desktopCard layouts, forms
Sticky Footer.d-flex .flex-column .min-vh-100Footer at bottom of viewportPage layouts
Responsive Order.order-1 .order-md-2Different visual order per breakpointContent prioritization
NextIntroduction
→
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy