Bootstrap Grid alignment on small devices - html

Question

Just felt if this issue can be resolved with any css tweaks.
I have a row with Col -8 and Col -4 in it, Col -4 has the following 4 grid images in it with two rows again in it
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Devegowda</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
<!-- <br />-->
</div>
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Bhawani</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Revanna</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
<!-- <br />-->
</div>
<div class="col-md-6">
<div class="four">
<img src="images/home/client1.png" style="width:100% ; height:160px" alt="Devegowda">
<div class="four-overlay top">
<p style="font-weight: bold">HD Kumaraswamy</p>
<br /> Former Prime Minister of India (1996)
<br />
<a class="button_example" href="#">Read</a>
</div>
</div>
</div>
</div>
</div>
It appears like this when I minimize the screen to check its mobile compatibility but it looks ugly as two images in each row getting merged like this, I feel it will be much better if there is a small padding between two images here, any help ?

Answer 1

From what I understand, you will need to also specify the classes for different devices (col-sm-X and col-xs-X for tablets and phones).
If you prefer not to do that ... the COL-MD will be equal to COL-XS-12 no matter of its size.
So in order to display your images properly... you should add the class col-xs-4 or 6 for each image parent that already has the class: col-md-6 .
Hope it helps.

Answer 2

From the bootstrap docs, try
<img src="..." class="img-responsive" alt="Responsive image">
http://getbootstrap.com/css/#images