Center align a column in twitter bootstrap [duplicate]
Solution 1:
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">
Solution 2:
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>
Solution 3:
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