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

User · Accepted Answer

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">

User · Answer

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

User · Answer

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     lt div class  container  gt   lt div class  col-sm-6 col-sm-offset-3  gt  your centered  floating column  lt  div gt  lt  div gt

User · Answer

If you cannot put 1 column  you can simply put 2 column in the middle     I am just combining answers  For Bootstrap 3   lt div class  row  gt      lt div class  col-lg-5   gt 5 columns left lt  div gt      lt div class  col-lg-2 col-centered  gt 2 column middle lt  div gt      lt div class  col-lg-5  gt 5 columns right lt  div gt   lt  div gt    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

[twitter-bootstrap] Center align a column in twitter bootstrap

Examples related to twitter-bootstrap

Examples related to alignment