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 col-md-offset-4

But col-md-1 cannot be perfectly centered using only grid offsets.

This matters in real programming because layout systems often have rules and constraints. If you understand the grid, you can choose the right tool:

• use offsets for grid-based alignment
• use text-center for inline or inline-block content
• use custom CSS when the grid cannot express the exact layout you want

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
• 6 columns remain
• col-md-offset-3 adds 3 empty columns on the left
• 3 columns remain on the right
• the element is centered

Why your original class does not work

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

Problems:

• col-offset-6 is not a valid Bootstrap 3 class
• it should be something like col-lg-offset-5 or col-md-offset-...
• columns should be inside a .row
• a col-lg-1 cannot be perfectly centered with offsets alone because 11 remaining columns cannot be split evenly

Better approach for a single small item

If your goal is to center a small element visually, center the content instead of forcing the grid column:

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

Explanation:

• the parent spans the full row
• text-center centers inline and inline-block children
• display:inline-block allows the red box to stay only as wide as needed
• this produces true visual centering

If you want an approximate grid-centered col-lg-1

<div class="container">
  <div class="row">
    <div class="col-lg-1 col-lg-offset-5 centered">
      X
    </div>
  </div>
</div>

This is close, but not mathematically perfect in grid terms. It places 5 columns on the left and 6 on the right.

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.

3. col-xs-12

   • Takes up the full width of the row.
   • This gives the child all available horizontal space.

4. Inner .centered box

   • Because it uses display:inline-block, it behaves like inline content for alignment.
   • Since the parent has text-align:center, the box is positioned in the middle.

5. Result

   • The red box stays only as wide as its own content or width.
   • Empty space is distributed evenly on both sides.

This matches your stated goal better than using a col-lg-1 offset.

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:

• buttons
• icons
• loaders
• images

3. Use custom CSS for exact control

Sometimes the grid is not the best tool.

<div class="container">
  <div class="exact-center"></div>
</div>

.exact-center {
  width: 100px;
  margin: 0 auto;
  background: red;
}

This is common for:

• fixed-width widgets
• standalone visual elements
• legacy Bootstrap 3 layouts

Useful pattern: choose the simplest valid layout

A common real-world rule is:

• if it is a grid problem, use columns and offsets
• if it is a content alignment problem, use text-center or margin: 0 auto

That keeps layouts easier to maintain.

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
• skipping the row can cause spacing and alignment issues

Correct code:

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

3. Trying to perfectly center impossible grid math

Broken expectation:

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

Why it is misleading:

• 11 remaining columns cannot be split equally
• this is only approximately centered in grid terms

How to avoid it:

• use a full-width parent and center the child visually
• or use custom CSS instead of forcing the grid

4. Centering block elements with text-center only

Broken code:

<div class="text-center">
  <div class="centered">Box</div>
</div>

Why it may fail:

• text-center centers inline content, not normal block elements that already take full width

Fix:

<div class="text-center">
  <div class="centered" style="display:inline-block;">Box</div>
</div>

5. Using grid columns when a fixed-width box is enough

Sometimes this is overcomplicated:

<div class="row">
  <div class="col-md-1 col-md-offset-5">...</div>
</div>

A simpler solution may be:

<div style="width:100px; margin:0 auto; background:red;"></div>

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 ✅
• col-md-4 -> (12 - 4) / 2 = 4 ✅
• col-md-1 -> (12 - 1) / 2 = 5.5 ❌

To visually center a small element

<div class="row text-center">
  <div class="col-xs-12">
    <div style="display:inline-block;">Centered</div>
  </div>
</div>

To center a fixed-width block

.box {
  width: 120px;
  margin: 0 auto;
}

Common mistakes

• col-offset-6 ❌
• missing .row ❌
• expecting text-center to center full-width block elements ❌

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 div usually still takes the full width.

What is the best solution for the original problem?

If the goal is true visual centering of a small element, use a full-width parent and center the child with text-center or margin: 0 auto rather than a col-lg-1 offset.

• 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.