Bootstrap3 Issue

HTML & CSS
1

The following bit of code works fine in the large screens, however, when view on smaller screens, there is no space showing between the col-md-6 div’s in both the first and second rows. Any suggestions would be great.


<div class="col-md-8">


<div class="row">

    <div class="col-md-6">

	<img class="img-responsive" src="http://placehold.it/600x250">

    </div>

    <div class="col-md-6">


	<img class="img-responsive" src="http://placehold.it/600x250">


    </div>

</div>

<div class="row">

    <div class="col-md-6">

	<img class="img-responsive" src="http://placehold.it/600x250">


    </div>

    <div class="col-md-6">


	<img class="img-responsive" src="http://placehold.it/600x250">


    </div>

</div>


</div>
2

.row has no vertical margin by default so you just add another class to modify it.

e.g.


<div class="row img-row">



.img-row {margin-bottom:15px}
3

thanks, i tried this however I’m still having the same issue

There is white space between the two rows which is fine. It’s when the screen size gets smaller that the col-6 div’s in both the first and second rows sit on top of one another without any space. The whitespace between the two rows still holds its form.

Do I maybe put the margin-bottom on both of the top divs in each row.

4

You could just add the margin to the image instead of the row.

e.g.


.img-responsive{margin-bottom:10px}

It all depends on your design where you apply the margins but in this case it would make sense to place the margin on the image.