Center align a column in twitter bootstrap

Question

I've started learning Bootstrap. My question is how to center align a column horizontally, bootstrap contains 12 column layout, there is no middle number. To be more clear if it was 11 column layout, the middle number would have been 6 (5 columns left, 1 column middle, 5 columns right)

[Quick Answer](http://stackoverflow.com/a/22471911/1074944) – Sender Jul 21 '15 at 06:11 — Sender, Jul 21 '15 at 06:11

score 117 · Accepted Answer · edited May 23 '17 at 12:10

117

The question is correctly answered here Center a column using Twitter Bootstrap 3

For odd rows: i.e., col-md-7 or col-large-9 use this

Add col-centered to the column you want centered.

<div class="col-lg-11 col-centered">

And add this to your stylesheet:

.col-centered{
float: none;
margin: 0 auto;
}

For even rows: i.e., col-md-6 or col-large-10 use this

Simply use bootstrap 3's offset col class. i.e.,

<div class="col-lg-10 col-lg-offset-1">

edited May 23 '17 at 12:10

Community

1
1

answered Dec 20 '13 at 13:09

Lawrence Black

515
1
7
18

3

just fyi, with latest bootstrap that leads to overlapping – Toby Jul 05 '15 at 20:33
1

The offset takes up space, this won't work if you want your content centered and taking up more than col-lg-10 – gdvalderrama Sep 13 '16 at 07:35

score 24 · Answer 2 · answered Dec 15 '13 at 17:58

With bootstrap 3 the best way to go about achieving what you want is ...with offsetting columns. Please see these examples for more detail:
http://getbootstrap.com/css/#grid-offsetting

In short, and without seeing your divs here's an example what might help, without using any custom classes. Just note how the "col-6" is used and how half of that is 3 ...so the "offset-3" is used. Splitting equally will allow the centered spacing you're going for:

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>

I have tried this method earlier,it doesn't work will with odd number of columns. — majorhavoc, Dec 16 '13 at 05:48

score 10 · Answer 3 · answered Jul 11 '14 at 14:55

If you cannot put 1 column, you can simply put 2 column in the middle... (I am just combining answers) For Bootstrap 3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

Even, you can text centered column by adding this to style:

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

Additionally, there is another solution here

score 0 · Answer 4 · answered Dec 12 '14 at 13:12

I tried the approaches given above, but these methods fail when dynamically the height of the content in one of the cols increases, it basically pushes the other cols down.

for me the basic table layout solution worked.

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}

Center align a column in twitter bootstrap

4 Answers4

Linked