0

using bootstrap 3.

I have 4 img elements.

2 images across 2 images down

Total of 4 images.

This is my markup:

<html> <body> <div class="row" id="row1"> <div class="col-xs-6"> <img src="" id="img1" class="img-responsive" alt="" /> </div> <div class="col-xs-6"> <img src="" id="img2" class="img-responsive" alt="" /> </div> </div> <div class="row" id="Div1"> <div class="col-xs-6"> <img src="" id="img3" class="img-responsive" alt="" /> </div> <div class="col-xs-6"> <img src="" id="img4" class="img-responsive" alt="" /> </div> </div> </body> </html>

Trouble is that there is a gap in the middle. When I view the element using Chrome there are no margins or paddings automatically set by Bootstrap.

What should I do/use?

This is the screenshot (this is a mobile browser)

enter image description here

Improve this question
5
  • 1
    You could tighten the gutter... stackoverflow.com/questions/26077931/… Commented Oct 4, 2014 at 16:01
  • 1
    You could also try the .thumbnail class to evenly space them getbootstrap.com/components/#thumbnails Commented Oct 4, 2014 at 16:02
  • Hi, for some reaon tight-gutter had no affect an dthe .thumbnail class did not make a difference either - but it did give a nice hote border effect :) Commented Oct 4, 2014 at 16:21
  • Do you have any styling on #row1 and #Div1? Commented Oct 4, 2014 at 16:51
  • @tim Hi, no it does not but thanks :) Commented Oct 5, 2014 at 9:39

2 Answers 2

Reset to default
1

I'm thinking it may be the width of your images. Depending on the width of your page, large images will fill the col and tighten up the gutter between them

<div class="row" id="row1"> <div class="col-xs-6"> <img src="http://placehold.it/600x600" id="img1" class="img-responsive" alt="" /> </div> <div class="col-xs-6"> <img src="http://placehold.it/600x600" id="img2" class="img-responsive" alt="" /> </div> </div> <div class="row" id="Div1"> <div class="col-xs-6"> <img src="http://placehold.it/600x600" id="img3" class="img-responsive" alt="" /> </div> <div class="col-xs-6"> <img src="http://placehold.it/600x600" id="img4" class="img-responsive" alt="" /> </div> </div>

smaller image will leave a gap

<div class="row" id="row1"> <div class="col-xs-6"> <img src="http://placehold.it/200x200" id="img1" class="img-responsive" alt="" /> </div> <div class="col-xs-6"> <img src="http://placehold.it/200x200" id="img2" class="img-responsive" alt="" /> </div> </div> <div class="row" id="Div1"> <div class="col-xs-6"> <img src="http://placehold.it/200x200" id="img3" class="img-responsive" alt="" /> </div> <div class="col-xs-6"> <img src="http://placehold.it/200x200" id="img4" class="img-responsive" alt="" /> </div> </div>

See it in this fiddle: http://jsfiddle.net/timgavin/nmwuyhad/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Hi, my images are designed for desktop browser I am using the "img-responsive" to auo-scale my images for the mobile - which is does.
0

I added this styling to ensure padding and margin is zero and it worked:

 <div id="col1" class="col-xs-6" style="padding: 0px; margin: 0px;">
Improve this answer

1 Comment

that's what I had in my first comment :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.