CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
PIDZB
PIDZB

Reputation: 913

How to align images under variable heights of text while maintaining Bootstrap Grid?

I am faced with the challenge to vertical align images inside a Bootstrap grid under text with different height containers.

Fiddle here

This is what it is now: Current

This is what I want to achieve: Target

I would like to do this without the use of JavaScript, because that will only help the responsiveness.

I have tried:

  1. Using flexbox, but I can't get the images to stick to the bottom
  2. Give figure the property display:table-cell; and vertical-align:bottom, but the containers are not the same height without flexbox
  3. Positioning the figure absolute and bottom:0;, but this (ofcourse) messes with the parent containers height.

The HTML:

<div class="row">
  <div class="col-xs-3"> 
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus suscipit nisl id sagittis. Suspendisse ex neque, tempus a bibendum eget, elementum eget lorem. Integer ultricies turpis eget nibh pulvinar, at facilisis diam dapibus. Quisque non turpis eget libero consequat fringilla vel et sem.
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
</div>

Upvotes: 0

Views: 38

Answers (1)

Paulie_D
Paulie_D

Reputation: 115044

Flexbox can work.

The trick obviously is to give the columns equal height be setting the .row div to display:flex.

Then each columns also need display:flex but flex-direction:column.

Finally we set the figure to margin-top:auto to "push" it to the bottom in each case.

.row.flex {
  display: flex;
}
.row.flex >div {
  display: flex;
  flex-direction: column;
}
.row.flex > div figure {
  margin-top: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex">
  <div class="col-xs-3">
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus suscipit nisl id sagittis. Suspendisse ex neque, tempus a bibendum eget, elementum eget lorem. Integer ultricies turpis eget nibh pulvinar, at facilisis diam dapibus. Quisque non
      turpis eget libero consequat fringilla vel et sem.
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
</div>

Upvotes: 2

Related Questions