How to bottom align all elements within the div row?

Question

I have a row made up of four columns. Each column contains 3 things center aligned: text output, a label and an image. The images are sized differently so the alignment is off. I want to align all elements in each column to the bottom for consistency across the row.

I've tried

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

and nothing seems to make a 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, I was told padding would influence how bootstrap aligns content in different displays. Any suggestions?

Thanks, in advance

Answer 1

You can achieve the same layout with fewer classes and wrappers, and not have padding issues. When you nest columns inside columns they have to be surrounded by a .row in all cases otherwise you get double gutter problems on the outer edges. And outside of all of that there must be a .container-fluid or a .container to adjust the negative margin on the L and R of the .row. You don't nest .container/.container-fluid

Here's a revised version. Try it out.

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

Notice that when you use inline-block on .col-xs-6 in this case you have to remove the spaces created by the display:inline/inline-block style. This can be done by formatting your html as follows with the comments as they are (or you can zero out the font size on the parent and apply it on the 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 this is a 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; /* the default is baseline, so no need to add vertical alignment in your case*/
}

IMAGES:

If you have images that will be bigger -- at any size of your viewport -- than the viewport, put the following classes on them to make them responsive and to center it.

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