CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Tristan Le Gacque
Tristan Le Gacque

Reputation: 58

Bootstrap - Align 2 images on save row with size adaptation

I want to put 2 images on the same row, with size adaptation when I increase/decrease the page size, without have the image move to the other row.

Currently when my page is sized down, my second image (black block on the description) moves to the other row

Here is an screenshot of what I'm trying to do:

enter image description here

CSS:

.album {
    margin-top: 10px;
    width: 100%;
    display: block;
    width: auto;
    height: auto;
}

.album img {
    padding: 10px;
}


And my html part:

<div class="row">
   <div class="album">
       <img src="images/album2017.png">
       <img src="images/album2016.png">
   </div>

I hope you can help me, Thanks in advance :)

Upvotes: 1

Views: 140

Answers (3)

Ritesh Patel
Ritesh Patel

Reputation: 315

I hope it's should work 

  .album {
        margin-top: 10px;
        width: 100%;
        display: block;
        width: auto;
        height: auto;
    }

    .album img {
         width: 50%;
        padding: 10px;
    }

Upvotes: 0

stars_point
stars_point

Reputation: 106

.album {
margin-top: 10px;
width: 100%;
display: block;
height:auto;
width:auto;

}

.album img {
padding: 10px;
width:50%;
height :auto;
}

Hope this is what you are looking for. Adjust your width % to scale according to your screen size / block size

JSFIDDLE

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122115

You just need to use sm breakpoint FIDDLE

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <img src="http://placehold.it/350x150">
    </div>
    <div class="col-sm-4">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions