How to center div in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Center a Div in Bootstrap: Simple Methods Explained

To center a div horizontally in Bootstrap, use the class mx-auto on the div inside a container with a set width. For both horizontal and vertical centering, use Bootstrap's flexbox utility classes like d-flex justify-content-center align-items-center on the parent container.

📐

Syntax

Bootstrap provides utility classes to center elements easily:

mx-auto: Adds automatic horizontal margins to center block elements.
d-flex: Makes the container a flexbox.
justify-content-center: Centers flex items horizontally.
align-items-center: Centers flex items vertically.

Use these classes on the parent or the element itself depending on the layout.

html

<div class="container">
  <div class="mx-auto" style="width: 200px;">Centered horizontally</div>
</div>

<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
  <div>Centered both horizontally and vertically</div>
</div>

Output

Two boxes: one horizontally centered in a container, another centered horizontally and vertically in a 200px tall area

💻

Example

This example shows how to center a div horizontally using mx-auto and how to center it both horizontally and vertically using flexbox classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Center Div in Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      background-color: #007bff;
      color: white;
      padding: 1rem;
      border-radius: 0.25rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <div class="box mx-auto" style="width: 300px;">
      Horizontally Centered Div
    </div>
  </div>

  <div class="d-flex justify-content-center align-items-center" style="height: 200px; margin-top: 2rem; background-color: #e9ecef;">
    <div class="box">
      Centered Horizontally and Vertically
    </div>
  </div>
</body>
</html>

Output

A blue box horizontally centered in a container and below it a blue box centered both horizontally and vertically inside a gray 200px tall area

⚠️

Common Pitfalls

Common mistakes when centering a div in Bootstrap include:

Not setting a width on the div when using mx-auto, so it doesn't appear centered because it takes full width.
For vertical centering, forgetting to make the parent a flex container with d-flex.
Using text-center which only centers inline text, not block elements.

html

<!-- Wrong: mx-auto without width -->
<div class="mx-auto bg-primary text-white">Not centered visibly because width is 100%</div>

<!-- Right: mx-auto with width -->
<div class="mx-auto bg-primary text-white" style="width: 200px;">Properly centered</div>

Output

First div fills full width so no visible centering, second div is narrower and centered horizontally

📊

Quick Reference

Use these Bootstrap classes to center a div:

Horizontal only: mx-auto + fixed width
Horizontal + Vertical: Parent with d-flex justify-content-center align-items-center
Text center: text-center for inline text centering only

✅

Key Takeaways

Use mx-auto with a fixed width to center a div horizontally in Bootstrap.

For vertical centering, make the parent a flex container with d-flex and use align-items-center.

text-center only centers inline text, not block elements.

Always check the width of the element when centering horizontally with margins.

Bootstrap flex utilities make centering both easy and responsive.