BootstrapHow-ToBeginner · 3 min read

How to Use justify-content in Bootstrap for Flexbox Alignment

In Bootstrap, use justify-content-* utility classes on a flex container to align its items horizontally. For example, justify-content-center centers items, while justify-content-between spreads them out evenly.

📐

Syntax

Bootstrap provides several justify-content-* classes to control horizontal alignment of flex items inside a flex container. You apply these classes to an element with d-flex to enable flexbox.

d-flex: Makes the container a flexbox.
justify-content-start: Aligns items to the left.
justify-content-center: Centers items horizontally.
justify-content-end: Aligns items to the right.
justify-content-between: Places items with space between them.
justify-content-around: Places items with space around them.
justify-content-evenly: Evenly distributes items with equal space around.

html

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

💻

Example

This example shows three boxes inside a flex container centered horizontally using justify-content-center. Resize the browser to see the alignment stay centered.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap justify-content 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;
      align-items: center;
      justify-content: center;
      margin: 5px;
      border-radius: 5px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="d-flex justify-content-center">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Output

Three blue boxes labeled 'Box 1', 'Box 2', and 'Box 3' aligned horizontally in the center of the page with equal spacing between them.

⚠️

Common Pitfalls

Common mistakes when using justify-content in Bootstrap include:

Not adding d-flex to the container, so flexbox is not enabled and justify-content classes have no effect.
Using justify-content-* on non-flex containers.
Expecting vertical alignment; justify-content only controls horizontal alignment in a row flex container.
Confusing justify-content with align-items, which controls vertical alignment.

Example of wrong and right usage:

html

<!-- Wrong: Missing d-flex -->
<div class="justify-content-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Right: With d-flex -->
<div class="d-flex justify-content-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

📊

Quick Reference

Class	Effect
d-flex	Enables flexbox on the container
justify-content-start	Align items to the left
justify-content-center	Center items horizontally
justify-content-end	Align items to the right
justify-content-between	Distribute items with space between
justify-content-around	Distribute items with space around
justify-content-evenly	Distribute items evenly with equal space around

✅

Key Takeaways

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

justify-content-* classes control horizontal alignment of flex items in Bootstrap.

Use justify-content-center to center items, and justify-content-between to spread them out.

justify-content affects horizontal layout; use align-items for vertical alignment.

Bootstrap offers multiple justify-content classes for different spacing needs.