Andrea Andrea - 5 months ago 11
CSS Question

How to break a row into several rows when going to smaller screens in Bootstrap?

I have the following code:

<div class="row second-row">
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
</div>


When we have a big screen, al the images show side by side on the same row, and when I go to a smaller screen they stack one on top of the other.
How can I make a break between each image? I need it to have a white space like each image was on a different row.

I tried adding
<br>
that were only visible with xs or sm but it didn't work. Is this possible in a simple way, or should I add paddings on a media query?

Answer

Try this and see if it works.

<div class="row second-row">
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
  <div class="col-xs-1 visible-xs">
    <br/>
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
  <div class="col-xs-1 visible-xs">
    <br/>
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
  <div class="col-xs-1 visible-xs">
    <br/>
  </div>
  <div class="col-md-3 col-sm-12 col-xs-12">
    <img class="img-responsive" src="http://placehold.it/200x150">
  </div>
</div>
Comments