How to center column in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Center a Column in Bootstrap: Simple Guide

To center a column in Bootstrap, wrap the column inside a row and add the class justify-content-center to the row. This uses Bootstrap's flexbox utilities to horizontally center the column within the container.

📐

Syntax

Use a row with the class justify-content-center to center columns horizontally. Inside this row, place your col element(s).

row: Creates a flex container for columns.
justify-content-center: Centers flex items horizontally.
col: Defines the column to be centered.

html

<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">
      <!-- Your content here -->
    </div>
  </div>
</div>

💻

Example

This example shows a centered column that takes half the container's width. The column is horizontally centered using justify-content-center on the row.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Center Column in Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-6 bg-primary text-white p-3 text-center">
        Centered Column
      </div>
    </div>
  </div>
</body>
</html>

Output

A blue box labeled 'Centered Column' horizontally centered in the page, occupying half the container width with white text.

⚠️

Common Pitfalls

Common mistakes when centering columns in Bootstrap include:

Not adding justify-content-center to the row, so the column stays left-aligned.
Using mx-auto on the column without a fixed width, which may not center as expected.
Forgetting to use a container or container-fluid to wrap the row, causing layout issues.

html

<!-- Wrong way: missing justify-content-center -->
<div class="container">
  <div class="row">
    <div class="col-6 bg-danger text-white p-3 text-center">
      Not Centered
    </div>
  </div>
</div>

<!-- Right way: add justify-content-center -->
<div class="container mt-3">
  <div class="row justify-content-center">
    <div class="col-6 bg-success text-white p-3 text-center">
      Centered Correctly
    </div>
  </div>
</div>

Output

First box is red and left aligned; second box is green and horizontally centered.

📊

Quick Reference

Tips for centering columns in Bootstrap:

Use justify-content-center on the row to center columns horizontally.
Ensure columns have a set width like col-6 or use mx-auto with fixed width.
Wrap rows inside a container or container-fluid for proper alignment.
Use Bootstrap 5 or later for best flexbox support.

✅

Key Takeaways

Add the class justify-content-center to the row to center columns horizontally.

Wrap your columns inside a container or container-fluid for proper layout.

Use fixed-width column classes like col-6 to control column size when centering.

Avoid relying solely on mx-auto without setting column width for centering.

Bootstrap 5 flexbox utilities make centering columns simple and responsive.