How to Center a Bootstrap 3 Column in the Grid System

By the end of this page, you will understand how centering works in Bootstrap 3's grid system, why columns must live inside rows, when to use offsets, and when to use text alignment or custom CSS instead. You will also see practical examples for centering a single column and centering its contents correctly.

Bootstrap 3 uses a 12-column grid system. Each .col-* element takes up a certain number of those 12 columns.

For example:

• .col-lg-1 uses 1 out of 12 columns
• .col-lg-6 uses 6 out of 12 columns
• .col-lg-12 uses the full width

To center a column, you need to think about how much remaining space is left in the row and how to distribute it.

If a column uses 1 out of 12, then 11 columns remain. Since 11 cannot be split evenly into two whole grid columns, Bootstrap's offset classes alone cannot perfectly center a col-lg-1 column within the grid.

That is why there are really two different meanings of centering here:

1. Centering the grid column itself inside the 12-column layout
2. Centering the content inside a full-width parent

In Bootstrap 3, offsets work well when the remaining columns can be split evenly. For example:

• col-md-6 can be centered with col-md-offset-3
• col-md-4 can be centered with

Think of the Bootstrap grid like a shelf divided into 12 equal slots.

If your box takes up 1 slot, there are 11 empty slots left.

To center the box perfectly, you would want to put half the empty slots on the left and half on the right. But half of 11 is 5.5, and the Bootstrap grid does not support half-slots.

So you have three options:

• put it slightly off-center using whole-slot offsets
• make the parent full width and center the content inside it
• use custom CSS for exact visual centering

The key idea is: Bootstrap columns work in fixed grid units, but visual centering sometimes needs more flexibility than the grid allows.

Bootstrap 3 columns should be placed inside a .row.

Basic grid syntax

<div class="container">
  <div class="row">
    <div class="col-md-6">Content</div>
  </div>
</div>

Centering a column with an offset

This works well when the column width leaves an even number of columns remaining.

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3 centered">
      Centered 6-column block
    </div>
  </div>
</div>

Explanation:

• col-md-6 uses 6 columns

Consider this example:

<div class="container">
  <div class="row text-center">
    <div class="col-xs-12">
      <div class="centered" style="display:inline-block; width:80px; height:80px; background:red;"></div>
    </div>
  </div>
</div>

Here is what happens step by step:

1. container

   • Creates a centered Bootstrap layout area with fixed widths at different screen sizes.

2. row text-center

   • row prepares the grid layout correctly.
   • text-center applies text-align: center to its contents.

Centering small elements is common in real projects.

Common examples

• Profile avatars centered in a card header
• Icons centered inside a banner or feature section
• Buttons centered below a form or message
• Loading indicators centered in a page section
• Single-image thumbnails centered in a content area

In dashboards and admin panels

Developers often center:

• empty-state illustrations
• status badges
• call-to-action buttons
• summary widgets

In responsive pages

You may want:

• a full-width parent container
• a child element that keeps its natural width
• equal space on both sides as the screen resizes

That is usually a sign that content centering is more appropriate than grid-column centering.

In real Bootstrap 3 codebases, developers usually choose among a few common patterns.

1. Use offsets for true grid layouts

When the layout is based on columns and the math works evenly:

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">Centered block</div>
</div>

This is common for:

• login forms
• modal-like page sections
• narrow content panels

2. Use full-width columns plus centered content

When the child should be visually centered but not forced into grid math:

<div class="row text-center">
  <div class="col-xs-12">
    <button class="btn btn-primary">Save</button>
  </div>
</div>

This is common for:

1. Using the wrong offset class name

Broken code:

<div class="col-lg-1 col-offset-6"></div>

Why it is wrong:

• Bootstrap 3 offset classes include the breakpoint name
• col-offset-6 does not exist

Correct pattern:

<div class="col-lg-1 col-lg-offset-5"></div>

2. Forgetting the .row

Broken code:

<div class="container">
  <div class="col-md-6">Content</div>
</div>

Why it is wrong:

• Bootstrap columns are designed to live inside .row

Offset vs visual centering

Bootstrap 3 centering quick reference

Correct grid structure

<div class="container">
  <div class="row">
    <div class="col-md-6">...</div>
  </div>
</div>

Offset syntax

col-md-offset-3
col-lg-offset-4

Example: centered 6-column block

<div class="col-md-6 col-md-offset-3"></div>

Important rule

A column can be perfectly centered with offsets only when:

(12 - columnWidth) / 2

is a whole number.

Examples

• col-md-6 -> (12 - 6) / 2 = 3 ✅

Can I center a col-lg-1 perfectly in Bootstrap 3 using only offsets?

No. A col-lg-1 leaves 11 columns of free space, and that cannot be divided evenly into two whole-column offsets.

What is the correct Bootstrap 3 offset class format?

Use col-{breakpoint}-offset-{number}, such as col-md-offset-3 or col-lg-offset-5.

Do Bootstrap columns need to be inside a .row?

Yes. In Bootstrap 3, columns should be placed inside .row elements for the grid spacing to work correctly.

How do I center a small image or icon in Bootstrap 3?

A common approach is to use a full-width column and apply text-center to the parent, then make the child inline-block if needed.

When should I use margin: 0 auto instead of grid offsets?

Use margin: 0 auto when the element has a defined width and you want simple visual centering without relying on grid math.

Is text-center enough to center a div?

Not always. It centers inline and inline-block content. A normal block usually still takes the full width.

• Bootstrap 3 grid system — The core concept behind rows, columns, and responsive widths.
• Bootstrap offsets — Directly related to shifting columns horizontally inside the grid.
• Responsive breakpoints — Important because classes like col-xs-*, col-sm-*, and col-lg-* behave differently by screen size.
• CSS margin: 0 auto — A standard way to center fixed-width block elements.
• text-align: center — Useful for centering inline or inline-block content inside a parent.
• Block vs inline elements — Helps explain why some centering techniques work and others do not.
• Display properties — Important for understanding block, inline, and inline-block behavior.
• Bootstrap utility classes — Includes helper classes like text-center used for alignment.