Bootstrap Flex Utilities — Flexbox Layout Helpers

In this tutorial, you will learn about Bootstrap Flex Utilities. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap flex utilities apply Flexbox properties to any element using utility classes for direction, alignment, wrapping, sizing, and ordering without writing CSS.

What You'll Learn

You will learn how to create flex containers, control flex direction and wrapping, align items along main and cross axes, and use grow, shrink, and order utilities.

Why It Matters

Flexbox simplifies complex layouts. DodaTech's toolbar uses flex utilities to align buttons left and right, with equal spacing and responsive wrapping.

Real-World Use

Doda Browser's extension toolbar uses d-flex justify-content-between align-items-center to spread buttons evenly across the toolbar with vertical centering.

flowchart LR
    A[Display & Position] --> B[Flex Utilities]
    B --> C[Container]
    B --> D[Direction]
    B --> E[Alignment]
    B --> F[Sizing]
    B --> G[Order]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Flex Container

Every flex layout starts with d-flex:

<div class="d-flex bg-light p-3 border mb-3">
  <div class="bg-primary text-white p-3 me-2">Item 1</div>
  <div class="bg-success text-white p-3 me-2">Item 2</div>
  <div class="bg-warning p-3">Item 3</div>
</div>

Expected output: Three boxes displayed in a horizontal row, spaced with me-2 classes.

Use d-inline-flex for an inline flex container:

<span class="d-inline-flex bg-light p-2 border">
  <span class="bg-primary text-white p-2 me-1">A</span>
  <span class="bg-success text-white p-2">B</span>
</span>
<span class="d-inline-flex bg-light p-2 border ms-2">
  <span class="bg-warning p-2">C</span>
  <span class="bg-info text-white p-2 ms-1">D</span>
</span>

Expected output: Two inline flex containers sitting side by side.

Flex Direction

<div class="d-flex flex-row bg-light p-3 border mb-3">
  <div class="bg-primary text-white p-2 me-2">Row item 1</div>
  <div class="bg-success text-white p-2">Row item 2</div>
</div>
<div class="d-flex flex-row-reverse bg-light p-3 border mb-3">
  <div class="bg-primary text-white p-2 me-2">Row-reverse item 1</div>
  <div class="bg-success text-white p-2">Row-reverse item 2</div>
</div>
<div class="d-flex flex-column bg-light p-3 border mb-3">
  <div class="bg-primary text-white p-2 mb-2">Column item 1</div>
  <div class="bg-success text-white p-2">Column item 2</div>
</div>

Expected output: Three flex containers showing row, row-reverse, and column direction.

Justify Content

Align items along the main axis:

<div class="d-flex justify-content-start bg-light p-3 border mb-2">
  <div class="bg-primary text-white p-2">Start</div>
</div>
<div class="d-flex justify-content-center bg-light p-3 border mb-2">
  <div class="bg-primary text-white p-2">Center</div>
</div>
<div class="d-flex justify-content-end bg-light p-3 border mb-2">
  <div class="bg-primary text-white p-2">End</div>
</div>
<div class="d-flex justify-content-between bg-light p-3 border mb-2">
  <div class="bg-primary text-white p-2">Left</div>
  <div class="bg-success text-white p-2">Right</div>
</div>
<div class="d-flex justify-content-around bg-light p-3 border mb-2">
  <div class="bg-primary text-white p-2">Item 1</div>
  <div class="bg-success text-white p-2">Item 2</div>
  <div class="bg-warning p-2">Item 3</div>
</div>

Expected output: Five rows demonstrating different justify-content distributions.

Align Items

Align items along the cross axis:

<div class="d-flex align-items-start bg-light p-3 border mb-2" style="height: 80px;">
  <div class="bg-primary text-white p-2">Start</div>
</div>
<div class="d-flex align-items-center bg-light p-3 border mb-2" style="height: 80px;">
  <div class="bg-primary text-white p-2">Center</div>
</div>
<div class="d-flex align-items-end bg-light p-3 border mb-2" style="height: 80px;">
  <div class="bg-primary text-white p-2">End</div>
</div>
<div class="d-flex align-items-stretch bg-light p-3 border mb-2" style="height: 80px;">
  <div class="bg-primary text-white p-2">Stretch (fills height)</div>
</div>

Expected output: Four rows with items aligned to start, center, end, and stretch.

Flex Wrap

Control whether flex items wrap:

<div class="d-flex flex-wrap bg-light p-3 border" style="width: 300px;">
  <div class="bg-primary text-white p-2 me-2 mb-2">Item 1</div>
  <div class="bg-success text-white p-2 me-2 mb-2">Item 2</div>
  <div class="bg-warning p-2 me-2 mb-2">Item 3</div>
  <div class="bg-info text-white p-2 me-2 mb-2">Item 4</div>
  <div class="bg-danger text-white p-2 me-2 mb-2">Item 5</div>
</div>

Expected output: Items wrap to new lines when they exceed the container width.

Grow and Shrink

<div class="d-flex bg-light p-3 border mb-3">
  <div class="bg-primary text-white p-2 flex-grow-1">Grow 1 (takes remaining space)</div>
  <div class="bg-success text-white p-2">Fixed width</div>
</div>
<div class="d-flex bg-light p-3 border">
  <div class="bg-primary text-white p-2">Fixed</div>
  <div class="bg-success text-white p-2 flex-shrink-0">Cannot shrink</div>
  <div class="bg-warning p-2 flex-shrink-1">Can shrink (default)</div>
</div>

Expected output: First row has a growing item that fills remaining space. Second row has a non-shrinkable item.

Align Self

Override alignment for individual items:

<div class="d-flex bg-light p-3 border" style="height: 100px;">
  <div class="bg-primary text-white p-2 align-self-start">Start</div>
  <div class="bg-success text-white p-2 align-self-center">Center</div>
  <div class="bg-warning p-2 align-self-end">End</div>
  <div class="bg-info text-white p-2 align-self-stretch">Stretch</div>
</div>

Expected output: Four items in the same flex container with different vertical alignments.

Common Mistakes

1. Using justify-content Without d-flex

Justify-content only works on flex containers. Always add d-flex first.

2. Confusing justify-content and align-items

justify-content works on the main axis (horizontal by default). align-items works on the cross axis (vertical by default).

3. Forgetting That flex-grow Distributes Remaining Space

flex-grow-1 does not make all items equal. It distributes extra space after items are laid out. For equal items, use equal widths or flex-basis.

4. Not Setting a Height for align-items-stretch

Stretch works without a set height, but if no height is specified, items stretch to the tallest item's natural height.

5. Using flex-wrap Without Container Width

Without a width constraint, items may never need to wrap. Set a max-width or container width for wrapping to be visible.

Practice Questions

1. What class makes an element a flex container? d-flex sets display: flex on an element.

2. How do you center items both horizontally and vertically? Use d-flex justify-content-center align-items-center on the container.

3. What is the difference between flex-row and flex-column? flex-row lays items horizontally (default). flex-column lays items vertically.

4. How do you push a flex item to the far right? Add ms-auto to the item to push it to the right using auto margin.

5. What does flex-grow-1 do? It allows the item to grow to fill available space in the flex container.

Challenge

Build a toolbar with a logo on the left, centered navigation links, and a login button on the right. Use flex utilities for the layout without writing custom CSS.

FAQ

Mini Project

Build a card grid using flex-wrap with justify-content-between. Each card should have flex-grow-0 so they maintain their width. Use responsive flex classes to show 2 cards per row on tablet and 4 on desktop.

What's Next

Explore Images and Figures for responsive media handling. Then learn Bootstrap Tables for data presentation.