Thumbnails Not Centered

Question

So I am working with col-sm-3 sized thumbnails and they are currently not centered aligned (They are left aligned). I want them evenly space and center aligned. I have been playing with the offsets and push, but can never get exactly evenly spaced.

I always end up having the spacing between either the sides of the site not the same as the other spacing between the thumbnails.

How can I get the thumbnails evenly spaced and center aligned? Heres my code snippet:

<style type="text/css">
    .thumbnail {
        border: 0 none;
        box-shadow: none;
    }

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    div.center
    {
        text-align: center;
    }
</style>
<div class="row center">
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="thumbnail">
            <i class="fa fa-users fa-5x"></i>
            <div class="caption">
                <h3>Community Driven</h3>
                <p>The more notes are added, the more knowledge is shared.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

Bootstraps grid is based on 12 columns. It divides every .row into 12 columns, and using columns classes like .col-xs-6 or .col-sm-3 you define how many of those columns your content should use. In this case 6 out 12 for xs screens and 3 out of 12 for sm screens.

You want the screen to be split into three parts for sm , so you need every .thumbnail to be contained in a .col-sm-4 . However you also want the .thumbnail to be smaller, you want it to be .col-sm-3 wide.

This doesn't map easily to Bootstrap's grid framework, as you need an offset of (12 - 3 * 3) / 4 = 0.75 columns per part. One solution might be to define this offset yourself, by adding a margin-left: 6.25% .

 .thumbnail { border: 0 none; box-shadow: none; } .col-sm-offset-3-4 { margin-left: 6.25%; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row text-center"> <div class="col-sm-3 col-sm-offset-3-4"> <div class="thumbnail"> <i class="fa fa-users fa-5x"></i> <div class="caption"> <h3>Community Driven</h3> <p>The more notes are added, the more knowledge is shared.</p> </div> </div> </div> <div class="col-sm-3 col-sm-offset-3-4"> <div class="thumbnail"> <i class="fa fa-users fa-5x"></i> <div class="caption"> <h3>Community Driven</h3> <p>The more notes are added, the more knowledge is shared.</p> </div> </div> </div> <div class="col-sm-3 col-sm-offset-3-4"> <div class="thumbnail"> <i class="fa fa-users fa-5x"></i> <div class="caption"> <h3>Community Driven</h3> <p>The more notes are added, the more knowledge is shared.</p> </div> </div> </div> </div> </div> 

A better solution might be to simply use a .col-sm-4 to divide the screen into three equal parts, and to add a <div> around the columns content on which you add some horizontal padding.

PS I do think it's a good idea to rethink if you really want this. Does it really have to look exactly like this? And if so, how do you expect it to look on smaller or larger screens?