CODEWITHSUNDEEP
htmltwitter-bootstrap
MS1
MS1

Reputation: 518

responsive images with bootstrap - two images aligned

I have the following HTML-code with bootstrap 3:

<div class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div id="test-header" class="row">
        <div class="col-md-12">
          <p><span class="label label-default"><span aria-hidden="true" class="glyphicon glyphicon-star"></span> Parts <span aria-hidden="true" class="glyphicon glyphicon-star"></span></span></p>
        </div>
      </div>
      <div id="test-body" class="row">
        <div class="col-xs-4 col-md-3"> <img alt="Image1" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> </div>
        <div class="col-xs-4 col-md-3"> <img alt="Image2" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> </div>
      </div>
    </div>
  </div>
</div>

Link: https://jsfiddle.net/DTcHh/20090/

I would like to have this a little bit different: the two images should somehow belong together (should not be in separate cols) but should be responsive if screen gets to small.

If i change the second row to the following code, i have the problem that the images align vertically on small screens, which i want to avoid.

<div id="test-body" class="row">
  <div class="col-md-12"> <img alt="Image1" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> <img alt="Image2" class="img-thumbnail img-responsive" src="http://placehold.it/200x300"> </div>
</div>

So what i want is to have the second example, but instead of aligning vertically i would like to shrink the images when screen size reduces.

Edit:

Here are the images on what i want to get:

On big screens:

enter image description here

On small screens:

enter image description here

Upvotes: 0

Views: 1230

Answers (2)

winresh24
winresh24

Reputation: 687

you need to divide the division into two. your div must be like this

<div class="col-xs-6 col-md-6"> <img src="img.jpg"/> </div> <div class="col-xs-6 col-md-6"> <img src="img.jpg"/> </div>

then set your image width to 100%

Check this demo https://jsfiddle.net/DTcHh/20098/

Upvotes: 0

Refilon
Refilon

Reputation: 3499

You mean something like this?

img {
  width: 50%;
  float: left;
}

WORKING FIDDLE

Upvotes: 1

Related Questions