Aligning divs and images vertically

Question

I have a couple of images mockleft.png - 1228x500px mockright.png - 1825x335px

My code is as below..

<head>
   
    <link href="css/bootstrap.min.css" rel="stylesheet">
    

</head>

<body id="home">
    <div class="intro">
        
        <div class="row">
            <div class="col-xs-5" style="background-color:blue">

                <img src="img/mockleft.png" alt="logo" style="width:100%;">

            </div>
            <div class="col-xs-1"></div>
            <div class="col-xs-6" style="background-color:red;">

                <img src="img/mockright.png" alt="logo" style="width:100%;">

            </div>
        </div>
    </div>
        
</body>

The output is as below..

I wish for two things..

a) The left div with blue background should be same height as right div with red background and vice versa.

b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.

I tried the vertical-align css to both the div as well as image without success.

All help is sincerely appreciated

Thanks

Use bootstrap 4 instead of 3 and your first wish will come true and then it will be easier to achieve your second wish too — Pete, May 23 '19 at 13:41

score 2 · Accepted Answer · answered May 23 '19 at 13:51

You could do it with flexbox. If you use Bootstrap 4 as @Pete suggests in the comments, you could achieve the same, since it uses flexbox.

JSFiddle Demo

.row {
  display: flex;
}

.col-xs-1 {
  width: 10%;
}

.col-xs-5 {
  display: flex;
  flex-direction: column;
  width: 40%;
  background: blue;
  justify-content: flex-end;
}
.col-xs-6 {
  width: 50%;
  background: red;
}

<div class="row">
  <div class="col-xs-5">
    <img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
  </div>

  <div class="col-xs-1"></div>

  <div class="col-xs-6">
    <img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
  </div>
</div>

score 2 · Answer 2 · answered May 23 '19 at 13:51

a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height: How can I make Bootstrap columns all the same height?

b) For that part, use auto margin:

<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">

Hope it helps :)

Aligning divs and images vertically

2 Answers2