Skip to main content
Bootstrap
CHAPTER 15 Beginner

Bootstrap Flexbox and Layout Utilities

Updated: May 18, 2026
5 min read

# CHAPTER 15

Bootstrap Flexbox and Layout Utilities

1. Chapter Introduction

Bootstrap's flexbox utility classes expose the full power of CSS Flexbox through simple class names. Instead of writing display: flex; justify-content: center; align-items: center in CSS, you write d-flex justify-content-center align-items-center. These utilities are the foundation for all Bootstrap components and complex custom layouts.

2. Learning Objectives

  • Use d-flex and direction utilities.
  • Control justification and alignment.
  • Use flex-grow, shrink, and order utilities.
  • Apply display and position utilities.
  • Build a responsive dashboard layout.

3. Display Utilities

html
12345678910111213 
<!-- Show/hide elements -->
<div class="d-none">Hidden on all</div>
<div class="d-block">Block element</div>
<div class="d-inline">Inline element</div>
<div class="d-inline-block">Inline-block element</div>
<div class="d-flex">Flexbox container</div>
<div class="d-inline-flex">Inline flexbox</div>
<div class="d-grid">Grid container</div>

<!-- Responsive display -->
<div class="d-none d-md-block">Hidden on mobile, visible on tablet+</div>
<div class="d-block d-lg-none">Visible on mobile/tablet, hidden on desktop</div>
<div class="d-none d-md-flex">Flexbox only on tablet and above</div>

4. Flexbox Fundamentals

html
1234567891011121314151617 
<!-- Enable flexbox -->
<div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Flex direction -->
<div class="d-flex flex-row">Horizontal (default)</div>
<div class="d-flex flex-column">Vertical</div>
<div class="d-flex flex-row-reverse">Reverse horizontal</div>
<div class="d-flex flex-column-reverse">Reverse vertical</div>

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

5. Justification (Main Axis)

html
1234567 
<!-- justify-content controls horizontal distribution -->
<div class="d-flex justify-content-start">Items at start (default)</div>
<div class="d-flex justify-content-end">Items at end</div>
<div class="d-flex justify-content-center">Items centered</div>
<div class="d-flex justify-content-between">Space between items</div>
<div class="d-flex justify-content-around">Space around items</div>
<div class="d-flex justify-content-evenly">Equal spacing</div>

6. Alignment (Cross Axis)

html
123456789101112131415161718 
<!-- align-items controls vertical alignment -->
<div class="d-flex align-items-start" style="height: 100px;">Top</div>
<div class="d-flex align-items-end" style="height: 100px;">Bottom</div>
<div class="d-flex align-items-center" style="height: 100px;">Vertically centered</div>
<div class="d-flex align-items-stretch" style="height: 100px;">Stretched</div>
<div class="d-flex align-items-baseline" style="height: 100px;">Baseline</div>

<!-- align-self on individual items -->
<div class="d-flex" style="height: 100px;">
  <div class="align-self-start">Top</div>
  <div class="align-self-center">Middle</div>
  <div class="align-self-end">Bottom</div>
</div>

<!-- Center trick (most common pattern!) -->
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
  ✅ Perfectly centered content
</div>

7. Flex Wrap, Grow, and Shrink

html
1234567891011121314151617 
<!-- Flex wrap -->
<div class="d-flex flex-wrap">Items wrap to next line when needed</div>
<div class="d-flex flex-nowrap">Items never wrap (default)</div>

<!-- Flex grow (fill available space) -->
<div class="d-flex gap-2">
  <div class="p-2 bg-primary text-white">Fixed</div>
  <div class="p-2 bg-success text-white flex-grow-1">Grows to fill remaining space</div>
  <div class="p-2 bg-danger text-white">Fixed</div>
</div>

<!-- Order utilities -->
<div class="d-flex">
  <div class="order-3 p-2 bg-light">First in HTML, shows last</div>
  <div class="order-1 p-2 bg-primary text-white">Second in HTML, shows first</div>
  <div class="order-2 p-2 bg-success text-white">Third in HTML, shows second</div>
</div>

8. Gap Utilities

html
1234567891011 
<div class="d-flex gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-secondary">Button 2</button>
  <button class="btn btn-success">Button 3</button>
</div>

<!-- Column gap only -->
<div class="d-flex column-gap-4">...</div>

<!-- Row gap only -->
<div class="d-flex flex-column row-gap-3">...</div>

9. Position Utilities

html
123456789101112131415161718192021 
<!-- Position classes -->
<div class="position-static">Static (default)</div>
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="position-sticky">Sticky</div>

<!-- Positioning edges -->
<div class="position-relative" style="height: 100px;">
  <span class="position-absolute top-0 start-0">Top Left</span>
  <span class="position-absolute top-0 end-0">Top Right</span>
  <span class="position-absolute bottom-0 start-0">Bottom Left</span>
  <span class="position-absolute bottom-0 end-0">Bottom Right</span>
  <span class="position-absolute top-50 start-50 translate-middle">Centered</span>
</div>

<!-- Notification dot on avatar -->
<div class="position-relative d-inline-block">
  <img src="https://picsum.photos/seed/u/48/48" class="rounded-circle" />
  <span class="position-absolute bottom-0 end-0 badge rounded-pill bg-success" style="font-size:10px">●</span>
</div>

10. Mini Project: Dashboard Layout

html
12345678910111213141516171819202122232425262728293031323334353637383940414243 
<div class="d-flex min-vh-100">
  <!-- Sidebar -->
  <nav class="bg-dark text-white d-flex flex-column p-3" style="width: 240px; min-width: 240px;">
    <h5 class="text-primary mb-4">⚡ AdminPro</h5>
    <a class="nav-link text-white-50 mb-2" href="#">🏠 Dashboard</a>
    <a class="nav-link text-white mb-2" href="#">📊 Analytics</a>
    <a class="nav-link text-white-50 mb-2" href="#">👥 Users</a>
    <a class="nav-link text-white-50 mb-2" href="#">⚙️ Settings</a>
    <div class="mt-auto">
      <a class="nav-link text-danger" href="#">🚪 Logout</a>
    </div>
  </nav>

  <!-- Main content -->
  <div class="flex-grow-1 bg-light">
    <!-- Top bar -->
    <header class="bg-white border-bottom d-flex justify-content-between align-items-center px-4 py-3">
      <h6 class="mb-0">Dashboard</h6>
      <div class="d-flex align-items-center gap-3">
        <span class="badge bg-danger rounded-pill">3</span>
        <img src="https://picsum.photos/seed/u2/32/32" class="rounded-circle" />
      </div>
    </header>

    <!-- Stats row -->
    <div class="container-fluid p-4">
      <div class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3">
          <div class="card border-0 shadow-sm"><div class="card-body d-flex align-items-center gap-3">
            <div class="fs-1">💰</div>
            <div><div class="fw-bold fs-4">$24,500</div><div class="text-muted small">Revenue</div></div>
          </div></div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
          <div class="card border-0 shadow-sm"><div class="card-body d-flex align-items-center gap-3">
            <div class="fs-1">👥</div>
            <div><div class="fw-bold fs-4">1,420</div><div class="text-muted small">Users</div></div>
          </div></div>
        </div>
      </div>
    </div>
  </div>
</div>

11. Common Mistakes

  • d-flex without align-items-center for vertical centering: Adding only d-flex justify-content-center centers horizontally but not vertically. You need both.
  • flex-grow-1 on the wrong element: Apply flex-grow-1 to the content area, not the sidebar, so the content fills all remaining space.

12. MCQs

Question 1

What class enables flexbox on a div?

Question 2

Center content both horizontally and vertically?

Question 3

What class makes an item fill remaining space?

Question 4

Hidden on mobile, shown on desktop?

Question 5

Stack vertically on mobile, horizontal on tablet?

Question 6

Position content at bottom-right of parent?

Question 7

Equal spacing between flex items?

Question 8

translate-middle is used for?

Question 9

gap-3 on a flex container?

Question 10

Reverse order of flex items?

13. Interview Questions

  • Q: How do you create a sticky sidebar with scrollable main content using Bootstrap flexbox?
  • Q: What is the difference between justify-content-between and justify-content-evenly?

14. Summary

Bootstrap's flexbox utilities are the most powerful tools in the framework. They replace dozens of custom CSS properties with readable class names. The d-flex + justify-content- + align-items- pattern appears in virtually every Bootstrap UI. The flex-grow-1 class is essential for the sidebar/content dashboard pattern.

15. Next Chapter Recommendation

In Chapter 16: Bootstrap Icons and Helper Classes, we integrate Bootstrap's 1,800+ icon library and master visibility, overflow, and advanced utility helper classes.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Bootstrap Carousel and Media Components
Next Chapter Bootstrap Icons and Helper Classes

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1