CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Dennis G.
Dennis G.

Reputation: 2287

CSS aligning elements at the bottom of a Bootstrap 3 grid

I would like to align an image or div relative to the bottom of a row in a Bootstrap 3 based grid. I've tried to absolute position the element with bottom: 0, but it appears that this doesn't work unless I specifically set a width for the parent tag, which I prefer not to do. Is there a CSS-based way to align elements to the bottom? Here's a full example:

http://jsfiddle.net/uMTAN/

Upvotes: 0

Views: 137

Answers (1)

khollenbeck
khollenbeck

Reputation: 16157

There is a CSSish way to do it, but I don't think you can do it with CSS only. You need to set the parent element position to relative and then you need to set a height on that element so that the absolutely positioned child element will position to the bottom of the column container. The natural behavior for height does not force the container to the height of the parent container unfortunately. And you would think height:100%; would work, but it doesn't.

For example:

.col-xs-6 {
    position: relative;
    height: 322px; // this will most likely be dynamic via JavaScript
}

<div class="col-xs-6">
    <div style="position: absolute; bottom: 0px">
       <a href="/">
          <img width="200" height="200" src="http://placehold.it/200x200">
        </a>
    </div>
</div>

However if the content to the right continues to change in height (which I am assuming it will), then you will have to update the height of the parent container dynamically.

Upvotes: 1

Related Questions