Flexbox Utility Classes
1. Introduction to This Lesson
(1) Prerequisites
- Master the spacing scale system (0~5) and directional abbreviations
- Be familiar with responsive spacing usage (e.g.,
p-md-5)
(2) 🎯 What You Will Learn
- Learn to use
d-flexto enable a Flex container - Master main axis alignment (justify-content) and cross axis alignment (align-items)
- Learn to use
flex-wrapto create wrapping layouts - Master
order-*for ordering andflex-fillfor flexing - Be able to independently build complete Flexbox layouts
(3) Pain Point
Bob wants to create a navigation bar: logo on the left, navigation links centered, and a login button on the right—using traditional layouts requires float or position, which is cumbersome and error-prone to implement.
(4) Solution
Bootstrap encapsulates common Flexbox properties into utility classes, allowing you to implement flexible layouts without writing a single line of CSS. Using Bootstrap's Flexbox utility classes only requires d-flex justify-content-between align-items-center.
Understanding: Flexbox is like workers arranging boxes—the main axis determines the direction (horizontal or vertical), the cross axis determines alignment (center/top/bottom),
justify-contentmanages horizontal distribution, andalign-itemsmanages vertical alignment.
(5) Benefit
After using Flexbox utility classes, Bob completed the navigation bar layout with just a few concise classes—logo left, links centered, button right—the code is clear and easy to maintain.
2. Enabling the Flex Container
All Flex utility classes are based on d-flex or d-inline-flex:
▶ Example: Flex Container Basics
<div class="d-flex bg-light p-2">d-flex - block level flex container</div>
<span class="d-inline-flex bg-info p-2 text-white">d-inline-flex - inline flex</span>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
| Class | Effect | CSS Equivalent |
|---|---|---|
d-flex |
Block-level flex container | display: flex |
d-inline-flex |
Inline flex container | display: inline-flex |
These two classes also support responsive breakpoints: d-sm-flex, d-md-flex, etc.
3. Main Axis Direction
flex-row (default) goes from left to right, flex-row-reverse goes from right to left, flex-column goes from top to bottom.
<div class="d-flex flex-row bg-light p-2 mb-2">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-success text-white">Item 2</div>
<div class="p-2 bg-danger text-white">Item 3</div>
</div>
<div class="d-flex flex-column bg-light p-2">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-success text-white">Item 2</div>
<div class="p-2 bg-danger text-white">Item 3</div>
</div>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
| Class | Direction | Scenario |
|---|---|---|
flex-row |
Horizontal (default) | Navigation links, button groups |
flex-row-reverse |
Reverse horizontal | Right-side menus |
flex-column |
Vertical | Mobile vertical menus |
flex-column-reverse |
Reverse vertical | Comment sections (newest on top) |
4. Main Axis Alignment: justify-content
<div class="d-flex justify-content-start bg-light p-2 mb-2">
<div class="p-2 bg-primary text-white">Start</div>
<div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex justify-content-center bg-light p-2 mb-2">
<div class="p-2 bg-success text-white">Center</div>
<div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex justify-content-end bg-light p-2 mb-2">
<div class="p-2 bg-danger text-white">End</div>
<div class="p-2 bg-danger text-white">End</div>
</div>
<div class="d-flex justify-content-between bg-light p-2 mb-2">
<div class="p-2 bg-info text-white">Between</div>
<div class="p-2 bg-info text-white">Between</div>
</div>
<div class="d-flex justify-content-around bg-light p-2">
<div class="p-2 bg-warning">Around</div>
<div class="p-2 bg-warning">Around</div>
</div>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
graph LR
subgraph justify-content options
A1[start] --> A2[center]
A2 --> A3[end]
A3 --> A4[between]
A4 --> A5[around]
end
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
| Class | Effect |
|---|---|
justify-content-start |
Left-aligned (default) |
justify-content-center |
Centered |
justify-content-end |
Right-aligned |
justify-content-between |
Justified, equal space between items |
justify-content-around |
Equal space around items |
justify-content-evenly |
All spacing completely equal |
5. Cross Axis Alignment: align-items
<div class="d-flex align-items-start bg-light p-2 mb-2" style="height: 80px;">
<div class="p-2 bg-primary text-white">Start</div>
<div class="p-2 bg-primary text-white">Start</div>
</div>
<div class="d-flex align-items-center bg-light p-2 mb-2" style="height: 80px;">
<div class="p-2 bg-success text-white">Center</div>
<div class="p-2 bg-success text-white">Center</div>
</div>
<div class="d-flex align-items-end bg-light p-2" style="height: 80px;">
<div class="p-2 bg-danger text-white">End</div>
<div class="p-2 bg-danger text-white">End</div>
</div>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
| Class | Effect | CSS Equivalent |
|---|---|---|
align-items-start |
Top-aligned | align-items: flex-start |
align-items-center |
Vertically centered | align-items: center |
align-items-end |
Bottom-aligned | align-items: flex-end |
align-items-stretch |
Stretch to fill (default) | align-items: stretch |
Typical Scenario:
align-items-centeris the most common solution for vertical centering—setd-flex+align-items-centeron the parent container, and the content will be vertically centered automatically.
6. Single Item Alignment: align-self
<div class="d-flex bg-light p-2" style="height: 100px;">
<div class="p-2 bg-primary text-white align-self-start">Start</div>
<div class="p-2 bg-success text-white align-self-center">Center</div>
<div class="p-2 bg-danger text-white align-self-end">End</div>
</div>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
7. Wrapping: flex-wrap
<div class="d-flex flex-wrap bg-light p-2">
<div class="p-3 m-1 bg-primary text-white">Item 1</div>
<div class="p-3 m-1 bg-primary text-white">Item 2</div>
<div class="p-3 m-1 bg-primary text-white">Item 3</div>
<div class="p-3 m-1 bg-primary text-white">Item 4</div>
<div class="p-3 m-1 bg-primary text-white">Item 5</div>
<div class="p-3 m-1 bg-primary text-white">Item 6</div>
</div>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
| Class | Behavior |
|---|---|
flex-nowrap |
No wrapping, items are compressed (default) |
flex-wrap |
Automatic wrapping |
flex-wrap-reverse |
Reverse wrapping |
8. Ordering: order
<div class="d-flex bg-light p-2">
<div class="p-3 bg-danger text-white order-3">First in HTML (order-3)</div>
<div class="p-3 bg-success text-white order-1">Second in HTML (order-1)</div>
<div class="p-3 bg-primary text-white order-2">Third in HTML (order-2)</div>
</div>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
order-0~order-5, smaller numbers come first. All items default toorder-0.
9. Flexing: flex-grow and flex-fill
<div class="d-flex bg-light p-2">
<div class="p-3 bg-danger text-white">Fixed</div>
<div class="p-3 bg-success text-white flex-fill">flex-fill</div>
<div class="p-3 bg-primary text-white flex-fill">flex-fill</div>
</div>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
| Class | Effect | CSS |
|---|---|---|
flex-fill |
Equal share of remaining space | flex: 1 1 auto |
flex-grow-0 |
Don't grow (default) | flex-grow: 0 |
flex-grow-1 |
Grow to fill | flex-grow: 1 |
flex-shrink-0 |
Don't shrink | flex-shrink: 0 |
10. Flex Utility Classes Cheat Sheet
(1) Flex Properties Quick Reference
| Category | Class | CSS Equivalent | Description |
|---|---|---|---|
| Container | d-flex |
display: flex |
Block-level flex container |
| Container | d-inline-flex |
display: inline-flex |
Inline flex container |
| Direction | flex-row |
flex-direction: row |
Horizontal layout (default) |
| Direction | flex-column |
flex-direction: column |
Vertical layout |
| Direction | flex-row-reverse |
flex-direction: row-reverse |
Reverse horizontal |
| Direction | flex-column-reverse |
flex-direction: column-reverse |
Reverse vertical |
| Main Axis | justify-content-* |
justify-content: * |
Main axis alignment |
| Cross Axis | align-items-* |
align-items: * |
Cross axis alignment |
| Single Item | align-self-* |
align-self: * |
Single item alignment |
| Wrapping | flex-wrap |
flex-wrap: wrap |
Automatic wrapping |
| Wrapping | flex-nowrap |
flex-wrap: nowrap |
No wrapping (default) |
| Ordering | order-{0-5} |
order: {0-5} |
Adjust display order |
| Flexing | flex-fill |
flex: 1 1 auto |
Equal share of remaining space |
| Flexing | flex-grow-1 |
flex-grow: 1 |
Grow to fill |
| Flexing | flex-shrink-0 |
flex-shrink: 0 |
Prohibit shrinking |
(2) justify-content Values Explained
| Class | Effect | Diagram | Use Case |
|---|---|---|---|
justify-content-start |
Left-aligned (default) | ████░░░░ | Standard left alignment |
justify-content-center |
Centered | ░░████░░ | Centered layout |
justify-content-end |
Right-aligned | ░░░░████ | Right-side action bar |
justify-content-between |
Justified | █░░█░░██ | Navigation bar |
justify-content-around |
Equal space around | ░█░█░█░█░ | Icon toolbar |
justify-content-evenly |
All spacing equal | ░█░░█░░█░ | Evenly distributed menu |
(3) align-items Values Explained
| Class | Effect | Diagram | Use Case |
|---|---|---|---|
align-items-start |
Top-aligned | Top aligned | Top baseline alignment |
align-items-center |
Vertically centered | Centered | Most common for vertical centering |
align-items-end |
Bottom-aligned | Bottom aligned | Bottom action bar |
align-items-stretch |
Stretch to fill | Equal height | Equal height card columns |
align-items-baseline |
Text baseline aligned | Baseline | Text with different font sizes |
▶ Example: Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Navbar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="d-flex justify-content-between align-items-center bg-dark text-white p-3">
<div class="fw-bold fs-5">MyLogo</div>
<ul class="d-flex list-unstyled gap-4 mb-0">
<li><a href="#" class="text-white text-decoration-none">Home</a></li>
<li><a href="#" class="text-white text-decoration-none">Products</a></li>
<li><a href="#" class="text-white text-decoration-none">About</a></li>
<li><a href="#" class="text-white text-decoration-none">Contact</a></li>
</ul>
<button class="btn btn-light btn-sm">Login</button>
</nav>
<div class="container mt-4">
<p>Use <code>justify-content-between</code> to achieve logo on the left, navigation centered, and button on the right.</p>
</div>
</body>
</html>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
▶ Example: Card Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Grid</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="mb-4">Flex Card Grid</h3>
<div class="d-flex flex-column flex-md-row gap-3">
<div class="card flex-fill">
<div class="card-body">
<h5 class="card-title">Card One</h5>
<p class="card-text">flex-fill makes all cards equal width.</p>
<a href="#" class="btn btn-primary">View</a>
</div>
</div>
<div class="card flex-fill">
<div class="card-body">
<h5 class="card-title">Card Two</h5>
<p class="card-text">Use gap-3 to control card spacing.</p>
<a href="#" class="btn btn-success">View</a>
</div>
</div>
<div class="card flex-fill">
<div class="card-body">
<h5 class="card-title">Card Three</h5>
<p class="card-text">flex-column for mobile vertical, flex-md-row for desktop horizontal.</p>
<a href="#" class="btn btn-outline-primary">View</a>
</div>
</div>
</div>
</div>
</body>
</html>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
▶ Example: Centered Login Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex justify-content-center align-items-center bg-light" style="min-height: 100vh;">
<div class="bg-white p-4 rounded shadow" style="width: 100%; max-width: 400px;">
<h3 class="text-center mb-4">User Login</h3>
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="name@example.com">
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
</form>
<p class="text-center text-muted small mt-3 mb-0">
Don't have an account? <a href="#">Sign up now</a>
</p>
</div>
</div>
</body>
</html>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
▶ Example: Media Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Object</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h3 class="mb-4">Flex Media Object</h3>
<div class="d-flex gap-3 mb-4">
<div class="bg-primary text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
A
</div>
<div>
<h5 class="mb-1">Alice Wang</h5>
<p class="mb-0 text-muted small">flex-shrink-0 ensures the avatar is not compressed. Use d-flex + gap-3 for text-image layout, which is the recommended implementation for Bootstrap media objects.</p>
</div>
</div>
<div class="d-flex gap-3">
<div class="bg-success text-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;">
B
</div>
<div>
<h5 class="mb-1">Bob Chen</h5>
<p class="mb-0 text-muted small">align-self-center can vertically center the avatar relative to the text, useful when avatar heights vary.</p>
</div>
</div>
</div>
</body>
</html>
Output: Component effects with Bootstrap 5.3 styles applied (such as buttons, cards, carousels, collapses, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.
❓ Frequently Asked Questions
d-flex?flex-direction: row (horizontal layout). Check if other CSS is overriding the display value, or if the child elements are block-level elements with width: 100%.justify-content-between and justify-content-around?between places the first and last items against the container edges, with equal space distributed between them. around allocates equal space on the left and right of each item, causing the end gaps to be half the middle gaps. You can modify classes in the browser DevTools to compare in real-time.line-height or position + transform. However, Flexbox's d-flex align-items-center is the most concise and universal method—it doesn't depend on container height and has the best responsive breakpoint compatibility.align-content and align-items?align-items controls the alignment of items within a single line, while align-content controls the distribution of multiple lines along the cross axis. align-content only takes effect when flex-wrap: wrap is set and there are multiple lines. Bootstrap provides the align-content-* series of utility classes (e.g., align-content-center, align-content-between).📖 Summary
d-flexenables a flex container,flex-row/columncontrols directionjustify-content-*controls main axis alignment,align-items-*controls cross axis alignmentalign-self-*controls individual itemsflex-wrapcontrols wrapping,order-*controls ordering,flex-fillcontrols stretching
📝 Assignment
- ⭐ Create a navigation bar: logo on the left, 4 links in the middle, login button on the right, using
justify-content-betweenandalign-items-center. - ⭐⭐ Create a three-column card grid: vertical on mobile (
flex-column), horizontal on tablets and above (flex-md-row), withgap-3between cards. - ⭐⭐⭐ Create a Flexbox interactive animation page: demonstrate the effects of all 6
justify-contentvalues, each with text explanation and 3 colored blocks.
Previous Lesson: Spacing · Next Lesson: Responsive Design
