Bootstrap Flexbox Utilities

Introduction to Flexbox in Bootstrap

Bootstrap provides a comprehensive set of utility classes for working with Flexbox, making it easy to create flexible layouts without writing custom CSS.

Why use Flexbox?
  • Create flexible, responsive layouts
  • Easily align and distribute content
  • Control the direction of elements
  • Adjust spacing between elements
  • Reorder elements without changing the HTML structure

Enabling Flex Containers

To create a flex container, use the .d-flex or .d-inline-flex utility classes:


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

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

Example:

Flex item 1
Flex item 2
Flex item 3
Inline Flex item 1
Inline Flex item 2
Inline Flex item 3

Responsive Flex Containers

Bootstrap's flex utilities can be applied responsively using breakpoint-specific classes:


<div class="d-flex d-sm-block d-md-flex">
  <!-- Flex on xs and md+, block on sm -->
</div>

<div class="d-block d-lg-flex">
  <!-- Block until lg breakpoint, then flex -->
</div>

Flex Direction

Control the direction of flex items with .flex-row, .flex-row-reverse, .flex-column, and .flex-column-reverse:


<div class="d-flex flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-flex flex-row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-flex flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Examples:

Row Item 1
Row Item 2
Row Item 3
Row-Reverse Item 1
Row-Reverse Item 2
Row-Reverse Item 3
Column Item 1
Column Item 2
Column Item 3

Responsive Direction


<div class="d-flex flex-column flex-sm-row">
  <!-- Column on xs, row on sm and up -->
</div>

Justify Content

Control how flex items are positioned along the main axis with .justify-content-* utilities:


<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

Examples:

Start
Start
Start
End
End
End
Center
Center
Center
Between
Between
Between
Around
Around
Around
Evenly
Evenly
Evenly

Align Items

Control how flex items are aligned along the cross axis with .align-items-* utilities:


<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Examples:

Start
Start
Start
End
End
End
Center
Center
Center

Align Self

Override the alignment for individual flex items with .align-self-* utilities:


<div class="d-flex" style="height: 100px;">
  <div class="align-self-start">Start</div>
  <div class="align-self-end">End</div>
  <div class="align-self-center">Center</div>
  <div class="align-self-baseline">Baseline</div>
  <div class="align-self-stretch">Stretch</div>
</div>

Example:

Start
End
Center
Baseline
Stretch

Fill and Grow/Shrink

Flex Fill

Use .flex-fill to force items to take up equal width:


<div class="d-flex">
  <div class="flex-fill">Flex fill item</div>
  <div class="flex-fill">Flex fill item</div>
  <div class="flex-fill">Flex fill item</div>
</div>

Example:

Flex fill item
Flex fill item
Flex fill item

Grow and Shrink

Use .flex-grow-* and .flex-shrink-* utilities to control how flex items grow and shrink:


<div class="d-flex">
  <div class="flex-grow-1">Grow</div>
  <div>Fixed</div>
  <div>Fixed</div>
</div>

<div class="d-flex">
  <div class="w-100">Large content</div>
  <div class="flex-shrink-1">Shrink</div>
  <div class="flex-shrink-0">Don't shrink</div>
</div>

Example:

Grow
Fixed
Fixed

Order

Change the visual order of flex items with .order-* utilities:


<div class="d-flex">
  <div class="order-3">First in DOM, displayed third</div>
  <div class="order-2">Second in DOM, displayed second</div>
  <div class="order-1">Third in DOM, displayed first</div>
</div>

Example:

First in DOM, displayed third
Second in DOM, displayed second
Third in DOM, displayed first

Responsive Order


<div class="d-flex">
  <div class="order-1 order-md-2">First on xs, second on md</div>
  <div class="order-2 order-md-1">Second on xs, first on md</div>
</div>

Flex Wrap

Control how flex items wrap with .flex-wrap, .flex-nowrap, and .flex-wrap-reverse:


<div class="d-flex flex-wrap">
  <!-- Items will wrap to the next line when needed -->
</div>

<div class="d-flex flex-nowrap">
  <!-- Items will not wrap (default) -->
</div>

<div class="d-flex flex-wrap-reverse">
  <!-- Items will wrap in reverse order -->
</div>

Example:

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Common Flexbox Patterns

1. Centered Content


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

2. Sticky Footer


<div class="d-flex flex-column min-vh-100">
  <header>Header</header>
  <main class="flex-grow-1">Content that will push the footer down</main>
  <footer>Footer</footer>
</div>

3. Equal-Height Cards


<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some content.</p>
        <a href="#" class="btn btn-primary mt-auto">Button at bottom</a>
      </div>
    </div>
  </div>
  <!-- More cards... -->
</div>

Best Practices

  • Use .d-flex on the parent container to create a flex container
  • Use responsive flex utilities to create layouts that adapt to different screen sizes
  • Combine flex utilities with other Bootstrap utilities like spacing and sizing for more control
  • Use .flex-grow-1 to make an element take up remaining space
  • Use .align-self-* utilities to override alignment for specific items
  • Remember that flex utilities work with both rows and columns

More Topics in Layout & Components

Layout Components

Master Bootstrap's container types, grid system, and flexbox utilities

Grid System

Deep dive into Bootstrap's powerful 12-column grid system

Content Styling

Style typography, images, tables, and code with Bootstrap

Spacing & Sizing

Learn how to use Bootstrap's spacing and sizing utilities effectively