Search code examples
twitter-bootstrapcentercol

How can I center cols in Bootstrap?

I have 3 cols:

I want to center the cols in the middle of page for responsive design. So if I view them on my mobile phone they should among themselves. So how can center them?

Here is my code:

<div class="container">
<div class="row text-center">
    <div class="col-xs-4 glyphicon glyphicon-flash"><h3>Professional</h3></div>
    <div class="col-xs-4 glyphicon glyphicon-picture"><h3>Exactly</h3></div>
    <div class="col-xs-4 glyphicon glyphicon-screenshot"><h3>Custom</h3></div>
    <div class="col-xs-4"></div>
</div></div>
Solution

  • Grid layout centers itself automatically. I modified your code just a bit:

    <div class="container">
<div class="row text-center">
    <div class="col-xs-4 glyphicon glyphicon-flash">      
        <h3>Professional</h3>
    </div>
    <div class="col-xs-4 glyphicon glyphicon-picture">
        <h3>Exactly</h3>
    </div>
    <div class="col-xs-4 glyphicon glyphicon-screenshot">
        <h3>Custom</h3>
    </div>
</div>
</div>

    Here is jsfiddle preview. Remember that columns always have to sum to 12 (4+4+4) inside a row.