CODEWITHSUNDEEP
csstwitter-bootstrap
Sheldon
Sheldon

Reputation: 10095

How do I align images to the bottom of a div (in bootstrap)?

I would like to be able to align different sized images to the bottom of a div.

I have the following markup: 

<div class="container">
  <div class="container">
    <div class="footer-images">
      <a href="link1"><img src="img1"></a>
      <a href="link2"><img src="img2"></a>
      <a href="link3"><img src="img3"></a>
    </div>
  </div>
  <div class="container">
    <div class="copyright">
      <p>© Some Company YYYY</p>
    </div>
  </div>
</div>

I can't figure out how to have all the images aligned to the bottom of the footer-images div. Any help would be greatly appreciated.

Upvotes: 7

Views: 51178

Answers (5)

FreshSnow
FreshSnow

Reputation: 434

In Bootstrap v4 you can use the class align-items-end to achieve bottom alignment in a div. You can use this class on the row or on the column.

Example with all column content aligned to the bottom.

<div class="container">
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Example with first column top, second colum middle and third colunm bottom alignment.

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Source: Bootstrap documentation.

Upvotes: 4

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

used to this css and apply 

.footer-images img{
width:xxpx;
height:xxpx;           // add here your style as like with height border etc.
vertical-align:top;
border:0;
}

More about bootstrap

Upvotes: 1

Pavel Nov&#225;k
Pavel Nov&#225;k

Reputation: 168

It would be enough:

margin-top: auto;

See https://jsfiddle.net/d3jau1gx/

Upvotes: 1

Prashobh
Prashobh

Reputation: 9550

try this 

 .footer-images img{
        vertical-align:bottom;
        border:0;
        }

Upvotes: 5

Kane
Kane

Reputation: 16812

Does this help?

<style type="text/css">
.footer-images {
    margin: auto;
    display: block;
    position: absolute;
    bottom: 0;
}
.footer-images .copyright {
    text-align: center;
}
</style>

Using this HTML

<div class="container">
  <div class="container">
    <div class="footer-images">
      <a href="link1"><img src="http://placehold.it/350x150"></a>
      <a href="link2"><img src="http://placehold.it/640x480"></a>
      <a href="link3"><img src="http://placehold.it/120x120"></a>
      <div class="container">
        <div class="copyright">
          <p>© Some Company YYYY</p>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions