Onlangs wilde ik een paar bootstrap kolommen plaatsen, maar zonder de standaard marge die Bootstrap plaatst bij kolommen. Ik kwam toen een manier tegen op internet om dit op een eenvoudige manier op te lossen. Het enigste wat nodig is zijn een paar regels CSS en plaatsing van een extra class no-gutters achter de row class.

CSS

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

HTML

<div class="row no-gutters">
  <div class="col-xs-6 col-sm-3 kitten-box">
    <img src="http://placekitten.com/g/600" alt="kittens" />
  </div>
  ...
</div>

Geef een reactie