CODEWITHSUNDEEP
htmlimagetwitter-bootstrap-3
Andrew Simpson
Andrew Simpson

Reputation: 7324

Image width using Bootstrap does not size properly

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

Upvotes: 0

Views: 108

Answers (2)

Andrew Simpson
Andrew Simpson

Reputation: 7324

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;">

Upvotes: 0

timgavin
timgavin

Reputation: 5166

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/

Upvotes: 1

Related Questions