Question

I’m using Bootstrap as CSS framework for a project me and my friend is working on (hence the D&D theme). I have a page where we’re displaying a specific users D&D characters. When displaying these characters on the page there is supposed to be four on each row (span4’s in a row-fluid). The problem is that there is a strange indentation starting on the second row (see attatched fiddle).

I’ve been using “Inspect component” in Chrome but I can’t seem to get what makes this happen.

http://jsfiddle.net/sE5en/4/

Hope I explained the problem somewhat 🙂

The main “container” (essentially the ) is pasted below:

  <div class="container"><div class="row">
    <div class="span12">
        <h3 class="mycharacters">My characters</h3>
        <a class="btn btn-success btn-small pull-right">
            <i class="icon-plus-sign icon-white"></i> Add character
        </a>
    </div>
    <div class="span12" id="actor_result"><div class="row-fluid">
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=1"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Davius</h4><div><i class="icon-heart"></i><strong> Health: </strong>17/20hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Mumblecore bushwick sed, nulla id street art dolore delectus wolf american apparel artisan sriracha.
Laboris seitan hoodie, freegan brooklyn letterpress adipisicing chambray mixtape id tofu organic butcher small batch. Art party carles readymade messenger bag williamsburg. Irony placeat sustainable, high life cillum yr sed vinyl pork belly messenger bag williamsburg VHS. Occaecat lo-fi readymade gluten-free 3 wolf moon. Ad tofu twee, blog nulla mumblecore gentrify brooklyn odio cliche selvage put a bird on it pork belly chillwave deserunt. Ea assumenda chillwave, keytar velit tumblr pour-over enim VHS mcsweeney's blog.</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text"></div></div></div>
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="images/avatar/actor/leonidas.png"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=3"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Awesome Maximus</h4><div><i class="icon-heart"></i><strong> Health: </strong>1/30hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">DYYYING! öööääöååå</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">lol</div></div></div>
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=4"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Master Thief Sven</h4><div><i class="icon-heart"></i><strong> Health: </strong>10/13hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Lurking</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">He's a backstabber</div></div></div>
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=5"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Giant Frederic</h4><div><i class="icon-heart"></i><strong> Health: </strong>25/27hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Farting</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">I will cruuuush you!</div></div></div>
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=6"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">One eyed idiot</h4><div><i class="icon-heart"></i><strong> Health: </strong>35/35hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong></div><div class="actor-text">Rested</div><div><i class="icon-edit"></i><strong> Notes: </strong></div><div class="actor-text">Can't see straight</div></div></div>
<div class="span4 well well-small"><div class="media"><a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://placehold.it/64x64"></a><div class="overflow-media-body media-body"><div class="btn-group pull-right"><button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu"><li><a href="actor_edit_owner?id=7"><i class="icon-pencil"></i> Edit
                                    </a></li><li><a href=""><i class="icon-picture"></i> Change avatar</a></li><li><a href=""><i class="icon-trash"></i> Delete</a></li></ul></div><h4 class="media-heading">Pantless bum</h4><div><i class="icon-heart"></i><strong> Health:   </strong>5/7hp</div><br><br></div><div><i class="icon-fire"></i><strong> Effects: </strong>  </div><div class="actor-text">Stinks like you wouldn't believe</div><div><i class="icon-edit">    </i><strong> Notes: </strong></div><div class="actor-text">Needs help...</div></div></div>
</div></div>
</div>

Answer 1

That indentation comes from the fact that you’re lining up a stack of divs that exceeds the grid limitation of 12 columns per line, so the grid elements past the 12 column mark are indented per design. You can evade this by lining up just 3 .span4 divs per .row-fluid (4×3=12) or targeting that fourth grid element with some css magic and removing the margin, like so:

CSS

.row-fluid > .span4:nth-child(4) {
    margin-left:0;
}

Of course, the nth-child selector is not supported in older browsers (such as IE7-8) but you can replace the CSS with some jQuery if you want to expand support.

Updated fiddle: http://jsfiddle.net/sE5en/5/show/