BootstrapHow-ToBeginner · 4 min read

How to Use Flex Utilities in Bootstrap for Responsive Layouts

Bootstrap flex utilities use d-flex to enable flexbox on an element and classes like justify-content-* and align-items-* to control alignment and spacing. You add these classes directly to your HTML elements to create flexible, responsive layouts without writing custom CSS.

📐

Syntax

Bootstrap flex utilities use simple class names to apply flexbox styles. The main classes are:

d-flex: Enables flexbox on an element.
flex-row or flex-column: Sets the direction of flex items.
justify-content-*: Controls horizontal alignment (start, center, end, between, around).
align-items-*: Controls vertical alignment (start, center, end, stretch).
flex-wrap: Allows items to wrap to the next line.

These classes are added directly to HTML elements to control layout.

html

<div class="d-flex justify-content-center align-items-center flex-column flex-wrap">
  <!-- flex items here -->
</div>

💻

Example

This example shows a flex container with three boxes aligned horizontally, centered both vertically and horizontally, with space between them.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Flex Utilities Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #0d6efd;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="d-flex justify-content-between align-items-center p-3 border" style="height: 150px;">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Output

A horizontal row with three blue boxes labeled 'Box 1', 'Box 2', and 'Box 3' spaced evenly with vertical center alignment inside a bordered container.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap flex utilities include:

Forgetting to add d-flex to enable flexbox, so alignment classes have no effect.
Using conflicting direction classes like flex-row and flex-column together.
Not setting width or height on flex items, which can cause unexpected sizing.
Ignoring responsive needs by not using responsive flex classes like d-md-flex.

html

<!-- Wrong: missing d-flex, justify-content-center does nothing -->
<div class="justify-content-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Right: add d-flex to enable flexbox -->
<div class="d-flex justify-content-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

📊

Quick Reference

Class	Description
d-flex	Enables flexbox on the element
flex-row	Arranges flex items in a horizontal row
flex-column	Arranges flex items in a vertical column
justify-content-start	Aligns items to the left (start)
justify-content-center	Centers items horizontally
justify-content-end	Aligns items to the right (end)
justify-content-between	Spaces items evenly with first and last at edges
justify-content-around	Spaces items evenly with equal space around
align-items-start	Aligns items to the top (start)
align-items-center	Centers items vertically
align-items-end	Aligns items to the bottom (end)
flex-wrap	Allows flex items to wrap onto multiple lines

✅

Key Takeaways

Always add d-flex to enable flexbox before using alignment classes.

Use justify-content-* and align-items-* classes to control horizontal and vertical alignment.

Combine direction classes like flex-row or flex-column to set item layout direction.

Use responsive flex classes like d-md-flex for better control on different screen sizes.

Set sizes on flex items if needed to avoid unexpected shrinking or stretching.