Search code examples
twitter-bootstrapalignment

Center align a column in twitter bootstrap

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)

Solution

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