Center align a column in twitter bootstrap
Twitter BootstrapAlignmentTwitter Bootstrap Problem Overview
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)
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
The question is correctly answered here https://stackoverflow.com/questions/18153234/center-a-div-using-bootstrap-3-markup-or-css
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 - Twitter Bootstrap
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 - Twitter Bootstrap
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
Solution 4 - Twitter Bootstrap
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;
}