CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrapmultiple-columns
Antoine
Antoine

Reputation: 560

Bootstrap 3 columns, vertical-align: bottom with img

I'm trying to get 3 columns with Bootstrap, with images (differents heights) aligned to the bottom and centered.

I want this:

col-md-4    |    col-md-4    |    col-md-4    
            |                |
            |                |    ---------
 ---------  |                |    ---------
 ---------  |    ----------  |    ---------
 -- img --  |    -- img  --  |    -- img --
 ---------  |    ----------  |    ---------

I tried this, but but unsuccessful, (uncentered, and suspect behavior)...

.vertical-align{
    position: relative;
}
 
.vertical-align img{
    position: absolute;
    bottom: 0;
}
<div class="row">
  <div class="col-md-4 vertical-align">
    <img src="images/antoine.png" />
  </div>
  <div class="col-md-4 vertical-align">
    <img src="images/logo_code.png" />
  </div>
  <div class="col-md-4 vertical-align">
    <img src="images/logo_android.png"/>
  </div>
</div>

Please help me, thanks !

Upvotes: 1

Views: 2926

Answers (1)

Mick Sherry
Mick Sherry

Reputation: 146

If you could set up a jsfiddle or a codepen, that would be greatly appreciated.

Otherwise, give this a try:

.vertical-align {
   min-height: 1000px; /*Add a height or minimum height to the containers*/
   position: relative;
}

.vertical-align img{
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   margin-right: auto;
   margin-left:auto;
}

EDIT: Here is a JSfiddle with your complete solution - the images are aligned to the bottom and centered in their respective parents. https://jsfiddle.net/o4kk49kz/1/

Upvotes: 1

Related Questions