CODEWITHSUNDEEP
twitter-bootstrap-3
AnonymousDev
AnonymousDev

Reputation: 247

Bootstrap img responive, How does it work?

Hey I am using bootstrap and I am using images of same dimensions but I am getting two very different outputs I dont know the reason behing it, can any one help in this issue? I am attaching screenshot : Ambiguous behaviour of img-responsive

Here is the code:

    <div class="pdt" id="pdt">
      <div class="row product">
       <div class="col-md-3">
        <img src="photos/3KG_P.jpg" class="img-responsive">
        <p class="imgDescription">Capacity :3 KG</p>
        <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun6()">
       </div>
<div class="col-md-offset-1 col-md-3"><img src="photos/5KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :5 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun7()"></div><div class="col-md-offset-1 col-md-3"><img src="photos/8KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :8 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun8()"></div>
</div>
<div class="row product">

  <div class="col-md-offset-1 col-md-3">
   <img src="photos/10KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :10 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun9()"></div>
<div class="col-md-offset-1 col-md-3"><img src="photos/15KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :15 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun10()"></div><div class="col-md-offset-1 col-md-3"><img src="photos/20KG_P.jpg" class="img-responsive"><p class="imgDescription">Capacity :20 KG</p><input type="button" value="Ask Price" class="btn btn-primary" onclick="fun11()"></div></div></div>

Upvotes: 0

Views: 46

Answers (1)

nicogaldo
nicogaldo

Reputation: 585

I think the problem is because those using the class col-md-offset-1

Try this:

<div class="pdt" id="pdt">
    <div class="row product">
        <div class="col-md-4">
            <img src="photos/3KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :3 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun6()">
        </div>

        <div class="col-md-4">
            <img src="photos/5KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :5 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun7()">
        </div>

        <div class="col-md-4">
            <img src="photos/8KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :8 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun8()">
        </div>

    </div>

    <div class="row product">

        <div class="col-md-4">
            <img src="photos/10KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :10 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun9()">
        </div>

        <div class="col-md-4">
            <img src="photos/15KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :15 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun10()">
        </div>

        <div class="col-md-4">
            <img src="photos/20KG_P.jpg" class="img-responsive">
            <p class="imgDescription">Capacity :20 KG</p>
            <input type="button" value="Ask Price" class="btn btn-primary" onclick="fun11()">
        </div>
    </div>
</div>

Upvotes: 2

Related Questions