CODEWITHSUNDEEP
csslayouttwitter-bootstrap-3
Abdull
Abdull

Reputation: 27862

Vertically aligning an image to the bottom inside a bootstrap “column”?

I am trying to vertically align an img to the bottom of a containing Bootstrap column.

How can this be accomplished?

Example

<div class="container-fluid" style="background-color: #00ff00">
    <div class="row">
        <div class="col-sm-offset-4 col-sm-4">
             <h1>green container</h1>
        </div>
    </div>
</div>

<div class="container-fluid" style="background-color: #ff0000">
    <div class="row">
        <div class="col-sm-offset-4 col-sm-4">
            <h1>red container with lots of</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
             <h1>lorem ipsum</h1>
        </div>
        <div class="col-sm-4">
            <img src="http://dummyimage.com/200x200/00a/fff.png?text=I+want+to+touch+the+blue+container"/>
        </div>
    </div>
</div>

<div class="container-fluid" style="background-color: #0000ff">
    <div class="row">
        <div class="col-sm-offset-4 col-sm-4">
             <h1>blue container</h1>
        </div>
    </div>
</div>

JSFiddle

In above example, there are three containers. Each container has a distinctive color. I want the blueish image to touch the bottom blue container, not the top green container.

Bonus points if answer is able to abstract away from hard-programmed image sizes.

Upvotes: 1

Views: 6154

Answers (1)

Kevin Nelson
Kevin Nelson

Reputation: 7673

This is probably not the solution you are looking for...but the only way that I could think of to do it was to absolutely position the column within the row. While this allows the column on the left to be a dynamic height, it loses the responsiveness...you'd probably have to define set widths for differing media.

A margin-top would allow the width to be responsive but would assume static height on the left, which is, I'm assuming, also not a good solution, since the fact that you put text in the left column implies you want a dynamic height.

Dare I say TABLE??? I know, I know, "horrible idea", right? But the <td>s stretch with the <td>s on the left in height, and the vertical-align:bottom; works within a TD. Bad practice, or a practical solution, you decide.

<div class="row" style='position:relative;'>
    <div class="col-sm-offset-4 col-sm-4">
        <h1>red container with lots of</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
         <h1>lorem ipsum</h1>
    </div>
    <div class="col-sm-4" style='position:absolute;bottom:0;right:0;'>
        <img src="http://dummyimage.com/200x200/00a/fff.png?text=I+want+to+touch+the+blue+container"/>
    </div>
</div>

Upvotes: 1

Related Questions