flex box bootstrap image fixed bottom-Twitter bootstrap

Beep
March 5, 2019
212 views
1 vote
2 Answers

I am having some problems with image position, I have a few columns with title at the top (flex box) the columns height is flex so that that they dynamically adapt the height so they are uniform.

However under the title is a image, I would like the image to always be at the bottom.

My code

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
      <div class="card-body flex-fill">
        <h4 class="article-preview__headline"><a href="#">title</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=990" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
      <div class="card-body flex-fill">
        <h4 class="article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=991" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>

Answers

You will need to re-order the elements, either by amending the HTML or using the order property.

If each card-body is made a flex-column we can use the order property to make the image div appear last visually in each column and then margin-top:auto to push it to the bottom of the column.

.card-body {
  flex: 1;
}

.card-body .image {
  order: 2;
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="article-preview__headline"><a href="#">title</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>

Based on Paulie_D‘s answer

You can accomplish this without extra CSS and with just some additional css classes:
order-1, order-2, order-3 and mt-auto

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="order-1 article-preview__headline"><a href="#">title</a></h4>
        <div class="order-3 mt-auto image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="order-2 link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="order-1 article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="order-3 mt-auto image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="order-2 link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.