CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
user2997418
user2997418

Reputation:

Bootstrap bring img to bottom of div

I use bootstrap and I have an img in a div, the img is top aligned, I couldn't make in stick to the bottom of the div.

<div class="col-lg-6 col-md-6" style="height: 100%">
    <img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="vertical-align: bottom; position: absolute;">    
</div>

Upvotes: 1

Views: 4409

Answers (2)

Drew Kennedy
Drew Kennedy

Reputation: 4168

I see you're trying to use vertical-align:bottom. From MDN:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Because your display is likely the initial (block), it won't work. You could position it as absolute, which you have done, and put it at the bottom:

img {
      position:absolute;
      bottom:0;
  }
<img src="https://s-media-cache-ak0.pinimg.com/236x/d1/f9/eb/d1f9eb025650eb3ff13a26697ed9994a.jpg" alt="test" />

Also, you should avoid using inline styling as much as possible. It makes styling far more complicated as a project unfolds.

Upvotes: 0

Amit Kumar Pawar
Amit Kumar Pawar

Reputation: 3330

<div class="col-lg-6 col-md-6" style="height: 100%">
    <img src="images/tv/Smartphone_Hand.png" class="img-responsive" style="position:absolute;bottom:0">    
</div>

Use his

Upvotes: 4

Related Questions