Sergi Sergi - 2 months ago 9
CSS Question

Weird "padding" between bootstrap columns

I can't seem to figure out why there's a white space in between my columns in this really simple row. I would like the elemenets to be touching each other and to fill up the 100% of the column space which they don't even with a 100% width? Added a universal selector with a border so the empty space is visible.

HTML

<html>
<body>




<div class="row">
<div class="col-md-2">
<div class="long-brick1">
</div>
</div>
<div class="col-md-2">
<div class="long-brick2">
</div>
</div>
<div class="col-md-2">
<div class="long-brick3">
</div>
</div>
<div class="col-md-2">
<div class="long-brick2">
</div>
</div>
<div class="col-md-2">
<div class="long-brick3">
</div>
</div>
<div class="col-md-2">
<div class="long-brick2">
</div>
</div>
</div> <!--row -->






</body>
</html>


CSS

* {border:5px solid;}

.long-brick1 {width:100%;
height: 100px;
background-color: red;
border:1px solid;}

.long-brick2 {width:100%;
height: 100px;
background-color: blue;
border:1px solid;}

.long-brick3 {width:100%;
height: 100px;
background-color: green;
border:1px solid;}

Answer

As far as I can see, your sample shows perfectly normal Bootstrap behaviour. Any col-* div will have a left and right padding of 15 px.

See http://getbootstrap.com/css/#grid-intro for additional information about Bootstrap grid system.

Of course you may override this default behaviour by resetting this default padding for col-md-2 or any other desired class:

.col-md-2 {padding: 0} 
Comments