Bootstrap 5 Flex Tutorial

Complete flexbox utilities guide with responsive classes and practical examples.

What is Flexbox in Bootstrap?

Bootstrap 5 includes a comprehensive set of flexbox utility classes for quickly managing the layout, alignment, and sizing of grid columns, navigation, components, and more. These utilities are responsive and can be applied at different breakpoints.

Benefits of Bootstrap Flex Utilities:

No custom CSS needed for common flex layouts
Responsive breakpoints (sm, md, lg, xl, xxl)
Works with any Bootstrap component
Easy to learn and implement

1. Enabling Flex Display

Convert any element to a flex container.

<!-- Display flex -->
<div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

<!-- Display inline-flex -->
<div class="d-inline-flex">
  <div>Inline flex item 1</div>
  <div>Inline flex item 2</div>
</div>

<!-- Responsive flex classes -->
<div class="d-sm-flex">Flex on small screens and up</div>
<div class="d-md-flex">Flex on medium screens and up</div>
<div class="d-lg-flex">Flex on large screens and up</div>
<div class="d-xl-flex">Flex on extra large screens and up</div>
<div class="d-xxl-flex">Flex on XXL screens and up</div>

Class	Description
`.d-flex`	Display flex
`.d-inline-flex`	Display inline-flex
`.d-sm-flex`	Flex on ≥576px
`.d-md-flex`	Flex on ≥768px
`.d-lg-flex`	Flex on ≥992px
`.d-xl-flex`	Flex on ≥1200px
`.d-xxl-flex`	Flex on ≥1400px

2. Flex Direction

Control the direction of flex items.

<!-- Row direction (default) - horizontal -->
<div class="d-flex flex-row mb-3">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

<!-- Row reverse - horizontal reversed -->
<div class="d-flex flex-row-reverse mb-3">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

<!-- Column direction - vertical -->
<div class="d-flex flex-column mb-3">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

<!-- Column reverse - vertical reversed -->
<div class="d-flex flex-column-reverse">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

<!-- Responsive Flex Direction -->
<div class="d-flex flex-sm-column flex-md-row">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

Class	Description
`.flex-row`	Horizontal left to right
`.flex-row-reverse`	Horizontal right to left
`.flex-column`	Vertical top to bottom
`.flex-column-reverse`	Vertical bottom to top

3. Justify Content (Horizontal Alignment)

<!-- Justify start (default) -->
<div class="d-flex justify-content-start mb-3 bg-light p-2">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Justify end -->
<div class="d-flex justify-content-end mb-3 bg-light p-2">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Justify center -->
<div class="d-flex justify-content-center mb-3 bg-light p-2">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Justify between (space between items) -->
<div class="d-flex justify-content-between mb-3 bg-light p-2">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Justify around (space around items) -->
<div class="d-flex justify-content-around mb-3 bg-light p-2">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Justify evenly (equal space around items) -->
<div class="d-flex justify-content-evenly mb-3 bg-light p-2">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

Class	Description
`.justify-content-start`	Items at the start
`.justify-content-end`	Items at the end
`.justify-content-center`	Items in the center
`.justify-content-between`	Space between items
`.justify-content-around`	Space around items
`.justify-content-evenly`	Equal space around items

4. Align Items (Vertical Alignment)

<!-- Align start (default) -->
<div class="d-flex align-items-start bg-light p-2" style="height: 100px;">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Align end -->
<div class="d-flex align-items-end bg-light p-2 mt-3" style="height: 100px;">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Align center -->
<div class="d-flex align-items-center bg-light p-2 mt-3" style="height: 100px;">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Align baseline -->
<div class="d-flex align-items-baseline bg-light p-2 mt-3" style="height: 100px;">
  <div class="p-2 border" style="font-size: 1.5rem;">Big text</div>
  <div class="p-2 border">Normal text</div>
  <div class="p-2 border" style="font-size: 0.8rem;">Small text</div>
</div>

<!-- Align stretch (default, items fill height) -->
<div class="d-flex align-items-stretch bg-light p-2 mt-3" style="height: 100px;">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

Class	Description
`.align-items-start`	Items at the top
`.align-items-end`	Items at the bottom
`.align-items-center`	Items centered vertically
`.align-items-baseline`	Items aligned by baseline
`.align-items-stretch`	Items stretch to fill

5. Align Self

<div class="d-flex bg-light p-2" style="height: 150px;">
  <div class="p-2 border align-self-start">Start</div>
  <div class="p-2 border align-self-center">Center</div>
  <div class="p-2 border align-self-end">End</div>
  <div class="p-2 border align-self-stretch">Stretch</div>
  <div class="p-2 border align-self-baseline">Baseline</div>
</div>

Class	Description
`.align-self-start`	Align to top
`.align-self-end`	Align to bottom
`.align-self-center`	Align to center
`.align-self-baseline`	Align by baseline
`.align-self-stretch`	Stretch to fill

6. Flex Wrap

<!-- No wrap (default) - items stay on one line -->
<div class="d-flex flex-nowrap bg-light p-2 mb-3" style="width: 300px;">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
  <div class="p-2 border">Item 4</div>
  <div class="p-2 border">Item 5</div>
</div>

<!-- Wrap - items wrap to next line -->
<div class="d-flex flex-wrap bg-light p-2 mb-3" style="width: 300px;">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
  <div class="p-2 border">Item 4</div>
  <div class="p-2 border">Item 5</div>
</div>

<!-- Wrap reverse - items wrap in reverse order -->
<div class="d-flex flex-wrap-reverse bg-light p-2" style="width: 300px;">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
  <div class="p-2 border">Item 4</div>
  <div class="p-2 border">Item 5</div>
</div>

Class	Description
`.flex-nowrap`	No wrapping (default)
`.flex-wrap`	Wrap to multiple lines
`.flex-wrap-reverse`	Wrap in reverse order

7. Align Content

Control alignment of wrapped lines when using flex-wrap.

<!-- Align content start -->
<div class="d-flex flex-wrap align-content-start bg-light p-2 mb-3" style="height: 200px; width: 300px;">
  <div class="p-2 border" style="width: 80px;">Item 1</div>
  <div class="p-2 border" style="width: 80px;">Item 2</div>
  <div class="p-2 border" style="width: 80px;">Item 3</div>
  <div class="p-2 border" style="width: 80px;">Item 4</div>
  <div class="p-2 border" style="width: 80px;">Item 5</div>
</div>

<!-- Align content center -->
<div class="d-flex flex-wrap align-content-center bg-light p-2 mb-3" style="height: 200px; width: 300px;">
  <div class="p-2 border" style="width: 80px;">Item 1</div>
  <div class="p-2 border" style="width: 80px;">Item 2</div>
  <div class="p-2 border" style="width: 80px;">Item 3</div>
  <div class="p-2 border" style="width: 80px;">Item 4</div>
  <div class="p-2 border" style="width: 80px;">Item 5</div>
</div>

<!-- Align content end -->
<div class="d-flex flex-wrap align-content-end bg-light p-2 mb-3" style="height: 200px; width: 300px;">
  <div class="p-2 border" style="width: 80px;">Item 1</div>
  <div class="p-2 border" style="width: 80px;">Item 2</div>
  <div class="p-2 border" style="width: 80px;">Item 3</div>
  <div class="p-2 border" style="width: 80px;">Item 4</div>
  <div class="p-2 border" style="width: 80px;">Item 5</div>
</div>

<!-- Align content between -->
<div class="d-flex flex-wrap align-content-between bg-light p-2 mb-3" style="height: 200px; width: 300px;">
  <div class="p-2 border" style="width: 80px;">Item 1</div>
  <div class="p-2 border" style="width: 80px;">Item 2</div>
  <div class="p-2 border" style="width: 80px;">Item 3</div>
  <div class="p-2 border" style="width: 80px;">Item 4</div>
  <div class="p-2 border" style="width: 80px;">Item 5</div>
</div>

<!-- Align content around -->
<div class="d-flex flex-wrap align-content-around bg-light p-2 mb-3" style="height: 200px; width: 300px;">
  <div class="p-2 border" style="width: 80px;">Item 1</div>
  <div class="p-2 border" style="width: 80px;">Item 2</div>
  <div class="p-2 border" style="width: 80px;">Item 3</div>
  <div class="p-2 border" style="width: 80px;">Item 4</div>
  <div class="p-2 border" style="width: 80px;">Item 5</div>
</div>

Class	Description
`.align-content-start`	Lines at the top
`.align-content-end`	Lines at the bottom
`.align-content-center`	Lines in the center
`.align-content-between`	Space between lines
`.align-content-around`	Space around lines
`.align-content-stretch`	Lines stretch to fill

8. Flex Item Properties

Flex Grow (Fill available space)

<div class="d-flex bg-light p-2 mb-3">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border flex-grow-1">This item grows</div>
  <div class="p-2 border">Item 3</div>
</div>

Flex Shrink

<div class="d-flex bg-light p-2 mb-3" style="width: 300px;">
  <div class="p-2 border flex-shrink-0" style="width: 150px;">No shrink</div>
  <div class="p-2 border" style="width: 150px;">Normal</div>
</div>

<div class="d-flex bg-light p-2" style="width: 300px;">
  <div class="p-2 border flex-shrink-1" style="width: 200px;">Shrinks</div>
  <div class="p-2 border flex-shrink-0" style="width: 200px;">No shrink</div>
</div>

Class	Description
`.flex-grow-0`	No growth
`.flex-grow-1`	Grows to fill space
`.flex-shrink-0`	No shrinking
`.flex-shrink-1`	Allows shrinking (default)

9. Order and Sorting

<div class="d-flex bg-light p-2 mb-3">
  <div class="p-2 border order-3">Item 1 (order 3)</div>
  <div class="p-2 border order-1">Item 2 (order 1)</div>
  <div class="p-2 border order-2">Item 3 (order 2)</div>
  <div class="p-2 border">Item 4 (default order 0)</div>
</div>

<div class="d-flex flex-column flex-md-row">
  <div class="p-2 border order-sm-2 order-md-1">Responsive order</div>
  <div class="p-2 border order-sm-1 order-md-2">Changes by screen size</div>
</div>

Class	Description
`.order-0`	First (default)
`.order-1` to `.order-5`	Set visual order
`.order-last`	Last item

10. Margin and Gap Utilities

Auto Margins for Spacing

<div class="d-flex bg-light p-2 mb-3">
  <div class="p-2 border">Left</div>
  <div class="p-2 border ms-auto">Pushed to right</div>
</div>

<div class="d-flex bg-light p-2" style="height: 100px;">
  <div class="p-2 border m-auto">Centered with auto margins</div>
</div>

Gap Utilities

<!-- Gap between items -->
<div class="d-flex gap-2 mb-3">
  <div class="p-2 border">Item 1</div>
  <div class="p-2 border">Item 2</div>
  <div class="p-2 border">Item 3</div>
</div>

<!-- Different gap sizes -->
<div class="d-flex gap-1 mb-2"><div class="p-2 border">Gap 1</div><div class="p-2 border">Gap 1</div></div>
<div class="d-flex gap-2 mb-2"><div class="p-2 border">Gap 2</div><div class="p-2 border">Gap 2</div></div>
<div class="d-flex gap-3 mb-2"><div class="p-2 border">Gap 3</div><div class="p-2 border">Gap 3</div></div>
<div class="d-flex gap-4 mb-2"><div class="p-2 border">Gap 4</div><div class="p-2 border">Gap 4</div></div>
<div class="d-flex gap-5"><div class="p-2 border">Gap 5</div><div class="p-2 border">Gap 5</div></div>

Class	Size
`.gap-0`	0rem
`.gap-1`	0.25rem
`.gap-2`	0.5rem
`.gap-3`	1rem
`.gap-4`	1.5rem
`.gap-5`	3rem

11. Real-World Flex Examples

<!-- Navigation Bar with Flex -->
<nav class="d-flex justify-content-between align-items-center p-3 bg-dark text-white">
  <div class="fs-4">Logo</div>
  <ul class="d-flex gap-3 list-unstyled mb-0">
    <li><a href="#" class="text-white text-decoration-none">Home</a></li>
    <li><a href="#" class="text-white text-decoration-none">About</a></li>
    <li><a href="#" class="text-white text-decoration-none">Services</a></li>
    <li><a href="#" class="text-white text-decoration-none">Contact</a></li>
  </ul>
  <button class="btn btn-outline-light">Login</button>
</nav>

<!-- Card Footer with Action Buttons -->
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
  <div class="card-footer d-flex justify-content-between">
    <button class="btn btn-primary">View Details</button>
    <button class="btn btn-outline-secondary">Share</button>
  </div>
</div>

<!-- Responsive Dashboard Layout -->
<div class="d-flex flex-column flex-md-row min-vh-100">
  <div class="bg-dark text-white p-3" style="width: 250px;">
    <h4>Sidebar</h4>
    <ul class="nav flex-column">
      <li class="nav-item"><a href="#" class="nav-link text-white">Dashboard</a></li>
      <li class="nav-item"><a href="#" class="nav-link text-white">Analytics</a></li>
      <li class="nav-item"><a href="#" class="nav-link text-white">Settings</a></li>
    </ul>
  </div>
  <div class="flex-grow-1 p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h1>Dashboard</h1>
      <div class="d-flex gap-2">
        <button class="btn btn-primary">Add New</button>
        <button class="btn btn-outline-secondary">Filter</button>
      </div>
    </div>
  </div>
</div>

<!-- Centered Content on Page -->
<div class="d-flex justify-content-center align-items-center" style="height: 300px;">
  <div class="text-center">
    <h1>Centered Content</h1>
    <p>This content is perfectly centered both horizontally and vertically</p>
    <button class="btn btn-primary">Click Me</button>
  </div>
</div>

<!-- Comment Section with Flex -->
<div class="d-flex gap-3 mb-4">
  <img src="https://via.placeholder.com/50" class="rounded-circle" alt="Avatar">
  <div class="flex-grow-1">
    <div class="d-flex justify-content-between align-items-center">
      <h6 class="mb-0">John Doe</h6>
      <small class="text-muted">2 hours ago</small>
    </div>
    <p class="mt-2 mb-2">This is a great post! Thanks for sharing.</p>
    <div class="d-flex gap-3">
      <a href="#" class="text-decoration-none small">Like</a>
      <a href="#" class="text-decoration-none small">Reply</a>
      <a href="#" class="text-decoration-none small">Share</a>
    </div>
    <div class="d-flex gap-3 mt-3 ms-4">
      <img src="https://via.placeholder.com/40" class="rounded-circle" alt="Avatar">
      <div class="flex-grow-1">
        <div class="d-flex justify-content-between">
          <h6 class="mb-0">Jane Smith</h6>
          <small class="text-muted">1 hour ago</small>
        </div>
        <p class="mt-2 mb-0">I completely agree!</p>
      </div>
    </div>
  </div>
</div>

<!-- Product Card with Flex Layout -->
<div class="card mb-3">
  <div class="row g-0">
    <div class="col-md-4"><img src="https://via.placeholder.com/300x200" class="img-fluid rounded-start" alt="Product"></div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Product Name</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <span class="h4 text-primary">$99.99</span>
            <span class="text-muted text-decoration-line-through ms-2">$149.99</span>
          </div>
          <button class="btn btn-primary">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Form with Flex Alignment -->
<form>
  <div class="d-flex gap-3 mb-3">
    <div class="flex-grow-1">
      <label class="form-label">First Name</label>
      <input type="text" class="form-control" placeholder="John">
    </div>
    <div class="flex-grow-1">
      <label class="form-label">Last Name</label>
      <input type="text" class="form-control" placeholder="Doe">
    </div>
  </div>
  <div class="d-flex gap-3 mb-3">
    <div class="flex-grow-1">
      <label class="form-label">Email</label>
      <input type="email" class="form-control" placeholder="john@example.com">
    </div>
    <div class="flex-grow-1">
      <label class="form-label">Phone</label>
      <input type="tel" class="form-control" placeholder="(555) 555-5555">
    </div>
  </div>
  <div class="d-flex justify-content-end gap-2">
    <button type="reset" class="btn btn-secondary">Reset</button>
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

<!-- Social Media Icons Row -->
<div class="d-flex justify-content-center gap-4">
  <a href="#" class="text-decoration-none">
    <div class="d-flex flex-column align-items-center">
      <i class="bi bi-facebook fs-1 text-primary"></i>
      <small>Facebook</small>
    </div>
  </a>
  <a href="#" class="text-decoration-none">
    <div class="d-flex flex-column align-items-center">
      <i class="bi bi-twitter fs-1 text-info"></i>
      <small>Twitter</small>
    </div>
  </a>
  <a href="#" class="text-decoration-none">
    <div class="d-flex flex-column align-items-center">
      <i class="bi bi-instagram fs-1 text-danger"></i>
      <small>Instagram</small>
    </div>
  </a>
  <a href="#" class="text-decoration-none">
    <div class="d-flex flex-column align-items-center">
      <i class="bi bi-linkedin fs-1 text-primary"></i>
      <small>LinkedIn</small>
    </div>
  </a>
</div>

12. Complete Demo HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Flex - Complete Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
  <div class="container">
    <h1 class="text-center mb-5 display-4 text-white">
      <i class="bi bi-layout-three-columns"></i> Bootstrap 5 Flex Utilities
    </h1>
    <div class="demo-section">
      <h2 class="demo-title">1. Justify Content</h2>
      <div class="d-flex justify-content-start demo-box p-2 mb-3"><div class="p-2 border">Start</div><div class="p-2 border">Start</div></div>
      <div class="d-flex justify-content-center demo-box p-2 mb-3"><div class="p-2 border">Center</div><div class="p-2 border">Center</div></div>
      <div class="d-flex justify-content-end demo-box p-2 mb-3"><div class="p-2 border">End</div><div class="p-2 border">End</div></div>
      <div class="d-flex justify-content-between demo-box p-2 mb-3"><div class="p-2 border">Between</div><div class="p-2 border">Between</div></div>
      <div class="d-flex justify-content-around demo-box p-2"><div class="p-2 border">Around</div><div class="p-2 border">Around</div></div>
    </div>
    <div class="demo-section">
      <h2 class="demo-title">2. Align Items</h2>
      <div class="d-flex align-items-start demo-box p-2 mb-3" style="height: 100px;"><div class="p-2 border">Start</div><div class="p-2 border">Start</div></div>
      <div class="d-flex align-items-center demo-box p-2 mb-3" style="height: 100px;"><div class="p-2 border">Center</div><div class="p-2 border">Center</div></div>
      <div class="d-flex align-items-end demo-box p-2" style="height: 100px;"><div class="p-2 border">End</div><div class="p-2 border">End</div></div>
    </div>
  </div>
</body>
</html>

Quick Reference Table

Category	Classes
Display	`.d-flex`, `.d-inline-flex`
Direction	`.flex-row`, `.flex-row-reverse`, `.flex-column`, `.flex-column-reverse`
Justify	`.justify-content-start`, `.justify-content-end`, `.justify-content-center`, `.justify-content-between`, `.justify-content-around`, `.justify-content-evenly`
Align Items	`.align-items-start`, `.align-items-end`, `.align-items-center`, `.align-items-baseline`, `.align-items-stretch`
Align Self	`.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, `.align-self-stretch`
Wrap	`.flex-nowrap`, `.flex-wrap`, `.flex-wrap-reverse`
Align Content	`.align-content-start`, `.align-content-end`, `.align-content-center`, `.align-content-between`, `.align-content-around`, `.align-content-stretch`
Grow/Shrink	`.flex-grow-0`, `.flex-grow-1`, `.flex-shrink-0`, `.flex-shrink-1`
Order	`.order-0` to `.order-5`, `.order-last`
Gap	`.gap-0` to `.gap-5`