Press "Enter" to skip to content

Kolommen zonder marge in Bootstrap

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>
Marco van der Ziel
Marco van der Ziel

View all posts

Geef een reactie