How to do multiple spans twitter bootstrap without spacing between

Question

I'm trying to get 3 columns on a page without any spacing between them in bootstrap

here is what I get:

here is what I want:

here is the code I'm currently using:

<div class="row">     <div class="span4 blue1">         <h1>span4 (1)</h1>     </div>     <div class="span4 blue2">         <h1>span4 (2)</h1>    </div>     <div class="span4 blue3">         <h1>span4 (3)</h1>     </div> </div> 

I'm really not sure how to achieve what I want using bootstrap - any help appreciated

Answer 1

You can create your own class that removes that space in between your span grid elements like so:

CSS

.no-space [class*="span"] {     margin-left: 0; } 

Then you can just include it inside the container .row div:

<div class="row no-space">     <div class="span3 blue1">         <h1>span4 (1)</h1>     </div>     <div class="span3 blue2">         <h1>span4 (2)</h1>    </div>     <div class="span3 blue3">         <h1>span4 (3)</h1>     </div> </div> 

Also note that the .row container class removes 20px on the left side to accommodate the grid elements so you might have to remove that as well like so:

.no-space {     margin-left:0; } 

So play around to see what works.

Demo: http://jsfiddle.net/G36uQ/