I'm trying to create a certain layout using bootstrap:
But unable to achieve 2 main principles in my layout:
- in the first row, div 2 should be 'sticked' to the bottom of it's column (relayed on div1's height).
- in the second row, i have 3 divs i want to align at center (while using bootstrap grid system!)
edit: regarding the 2nd row: i tried using 3 columns lets say 3-col for each div (since i want the margin on the right and left) but i remain with an offset of 3 more which i cant divide equally. so i decided changing it to col-4 with a margined container, that's my solution to it:
<div class="container" style="padding: 0 80px;">
<div class="row">
<div class="col-xs-4">
<div style="border:solid 1px black;">Div1</div>
</div>
<div class="col-xs-4">
<div style="border:solid 1px black;">Div2</div>
</div>
<div class="col-xs-4">
<div style="border:solid 1px black;">Div3</div>
</div>
</div>
</div>
http://jsfiddle.net/tomico/y7xesq6v/
Hope anyone could explain how can i handle this 2 issues