Bootstrap 3 sketch vertical align
I am creating my first website using Twitter Bootstrap 3. I want to create a feedback section using sketches. I need to vertically align social buttons to the bottom of each thumbnail regardless of the height of the thumbnail.
Here is my HTML code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail vertical-container">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
<div class="vertical-container1">
<p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
</div>
</div>
</div>
</div>!
source to share
You can do this by positioning the div. Assign a position to the relative
container div. in your case col-md-4
, but since it is a bootstrap class, you have to give it a different class name and assign a position relative to it.
And the position of the div containing the buttons. (in your case vertical-container1
) set absolute
parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}
source to share
You can set the minimum height for your text area using a custom class;
<p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>
.min-height {
min-height:100px;
}
this will ensure that the entire text area is the same height even if there is not enough text to push the buttons down.
Of course, this could go the other way and end up with too much text, in which case you want to add a maximum height;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos ....max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}
source to share