bootstrap: vertical align to bottom / same column height

Question

here's my markup:

<div class="row partner">
    <div class="col-md-2 col-xs-2"><img src="/images/foo.jpg" class="img-responsive"></div>
    <div class="col-md-8 col-xs-8">
        <span class="name">Foo Item</span>Lorem ipsum dolor sit amet, consetetur sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        <a href="/details.php?id=11475">More<span></span></a></div>
    <div class="col-md-2 col-xs-2">
        <div class="price">Text</div>
    </div>
</div>

i want to get this result:

the tricky part is: the "more" button and the text block both need to bee vertically aligned to bottom .. i couldn'd find out how to do it (without using jquery) any ideas?

Answer 1

You should be able to use position:absolute ..

.bottom {
  position:absolute;
  bottom:0;
}

http://www.bootply.com/4qREQQiNcD

Answer 2

Flexbox can do that.

 .partner { display: flex; border:1px solid grey; } .partner > .vert { display: flex; flex-direction: column; } .partner > .vert .more { margin: 1em; margin-top: auto; padding: .5em; background: red; align-self: flex-end } .partner > .vert .price { margin: 1em; margin-top: auto; padding: .5em; background: lightgrey; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row partner"> <div class="col-md-2 col-xs-2"><img src="http://www.fillmurray.com/140/200" class="img-responsive"></div> <div class="col-md-8 col-xs-8 vert"> <span class="name">Foo Item</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a class="more" href="/details.php?id=11475">More<span></span></a></div> <div class="col-md-2 col-xs-2 vert"> <div class="price">Text</div> </div> </div> 

Codepen Demo

Answer 3

Add pull-right css class to more link and bottom-align-text to right text block like below :

<div class="row partner">
    <div class="col-md-2 col-xs-2"><img src="/images/foo.jpg" class="img-responsive"></div>
    <div class="col-md-8 col-xs-8">
        <span class="name">Foo Item</span>
        Lorem ipsum dolor sit amet, consetetur sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        <a href="/details.php?id=11475" class="pull-right">More<span></span></a>
    </div>
    <div class="col-md-2 col-xs-2 bottom-align-text">
        <div class="price">Text</div>
    </div>
</div>

also and css :

<style>
    @media (min-width: 768px ) {
      .row {
          position: relative;
      }
      .bottom-align-text {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
 </style>