html - How to bottom align all elements within the div row? -

html - How to bottom align all elements within the div row? -

i have row made of 4 columns. each column contains 3 things center aligned: text output, label , image. images sized differently alignment off. want align elements in each column bottom consistency across row.

i've tried

style="text-align:bottom;" bottom:0, vertical-align:bottom;"

and nil seems create difference.

my code is:

<div class="row"> <div class="col-xs-12"> <div class="col-xs-6 col-md-2"> <div align="center"><img src="@url.content("random.png")" /></div> <div id="text1" class="text-center">1</div> <div class="text-center">label1</div> </div> <div class="col-xs-6 col-md-2 col-md-offset-1"> <div align="center"><img src="@url.content("random2.png")" /></div> <div id="text2" class="text-center">2</div> <div class="text-center">label2</div> </div> <div class="col-xs-6 col-md-2 col-md-offset-1"> <div align="center"><img src="@url.content("random3.png")" /></div> <div id="text3" class="text-center">3</div> <div class="text-center">label3</div> </div> <div class="col-xs-6 col-md-2 col-md-offset-1"> <div align="center"><img src="@url.content("random.png")" /></div> <div id="text2" class="text-center">3.4</div> <div class="text-center">label</div> </div> </div> </div>

also, told padding influence how bootstrap aligns content in different displays. suggestions?

thanks, in advance

you can accomplish same layout fewer classes , wrappers, , not have padding issues. when nest columns within columns have surrounded .row in cases otherwise double gutter problems on outer edges. , outside of of there must .container-fluid or .container adjust negative margin on l , r of .row. don't nest .container/.container-fluid

here's revised version. seek out.

demo: http://jsbin.com/huhamu/1/

notice when utilize inline-block on .col-xs-6 in case have remove spaces created display:inline/inline-block style. can done formatting html follows comments (or can 0 out font size on parent , apply on children):

<div class="container"> <div class="row inline-block-row text-center"> <div class="col-xs-6 col-md-3"> <img src="@url.content("random.png")" /> <div id="text1">1</div> label1 </div><!--comment --><div class="col-xs-6 col-md-3"> <img src="@url.content("random2.png")" /> <div id="text2" class="text-center">2</div> label2 test </div><!--comment --><div class="col-xs-6 col-md-3"> <img src="@url.content("random3.png")" /> <div id="text3" class="text-center">3</div> label3 </div><!--comment --><div class="col-xs-6 col-md-3"> <img src="@url.content("random.png")" /> <div id="text2">3.4</div> label </div> </div> </div>

css:

.inline-block-row .col-xs-6 { border:1px solid red; float:none; display:inline-block; /* default baseline, no need add together vertical alignment in case*/ }

images:

if have images bigger -- @ size of viewport -- viewport, set next classes on them create them responsive , center it.

<img src="myimage.png" class="img-responsive center-block" alt="" />

html css twitter-bootstrap model-view-controller frontend