Brandon Powell Brandon Powell - 6 months ago 30
HTML Question

How to add no margin or padding between images using bootstrap 3?

I am trying to create portfolio section on a one-page site with no margin or no padding in between the images.

How do I achieve this with Bootstrap 3 I tried this but end up with negative margins at tablet/desktop break points:

HTML

<!-- Projects Row -->
<div class="row">
<div class="col-md-3 col-sm-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-one.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-two.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6 padding-0 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-three.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-four.png" alt="">
</a>
</div>

<div class="col-md-3 col-sm-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-five.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-six.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-seven.png" alt="">
</a>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="../asset/portfolio-work/work-eight.png" alt="">
</a>
</div>
</div>
<!-- /.row -->

Answer

Every col has a margin-left: 15px and margin-right: 15px. Make padding: 0 to these cols. Make a new class (e.g. .myRow) to not affect the standard classes of Bootstrap. Note that every image must be as big as the width of the cols or bigger!

HTML

<div class="row myRow">
  <div class="col-md-3 col-sm-6 portfolio-item">
      <a href="#">
          <img class="img-responsive" src="http://www.lorempixel.com/500/500/sports/1" alt="">
      </a>
  </div>
  ...
</div>

CSS

.myRow > [class^="col-"] {
    padding: 0;
}