How do I bottom-align grid elements in bootstrap fluid layout

Question

I have a fluid layout using Twitter s bootstrap  wherein I have a row with two columns   The first column has a lot of content  which I want to fill the span normally   The second column just has a button and some text  which I want to bottom align relative to the cell in the first column     Here s what I have   -row-fluid-------------------------------------  -span6----------   -span6----------                      short content       content           ----------------    that                is tall                                  ----------------  -----------------------------------------------   Here s what I want   -row-fluid-------------------------------------  -span6----------                       content            that                is tall           -span6----------                          short content      ----------------   ----------------  -----------------------------------------------   I ve seen solutions that make the first span an absolute height  and position the second span relative to it  but a solution where I didn t have to specify the absolute height of my divs would be preferred   I m also open to a complete rethink of how to achieve the same effect   I m not married to this use of the scaffolding  it just seemed to make the most sense to me   This layout as a fiddle   http   jsfiddle net ryansturmer A7buv 3

User · Answer

This is based on cfx s solution  but rather than setting the font size to zero in the parent container to remove the inter-column spaces added because of the display  inline-block and having to reset them  I simply added    x000D   x000D   row row-align-bottom  gt  div   x000D      float  none  x000D      display  inline-block  x000D      vertical-align  bottom  x000D      margin-right  -0 25em  x000D    x000D   x000D   x000D    to the column divs to compensate

User · Answer

This is an updated solution for Bootstrap 3  should work for older versions though  that uses CSS LESS only   http   jsfiddle net silb3r 0srp42pb 11   You set the font-size to 0 on the row  otherwise you ll end up with a pesky space between columns   then remove the column floats  set display to inline-block  re-set their font-size  and then vertical-align can be set to anything you need   No jQuery required

User · Answer

You need to add some style for span6  smthg like that    row-fluid  span6     display  table-cell    vertical-align  bottom    float  none      and this is your fiddle  http   jsfiddle net sgB3T

User · Answer

Please note  for Bootstrap 4  users  please consider Christophe s solution  Bootstrap 4 introduced flexbox  which provides for a more elegant CSS-only solution   The following will work for earlier versions of Bootstrap       See http   jsfiddle net jhfrench bAHfj  for a working solution     for each element that is classed as  pull-down   set its margin-top to the difference between its own height and the height of its parent     pull-down   each function       var  this     this      this css  margin-top    this parent   height   -  this height          On the plus side    in the spirit of Bootstrap s existing helper classes  I named the class pull-down  only the element that is getting  pulled down  needs to be classed  so       it s reusable for different element types  div  span  section  p  etc  it s fairly-well supported  all the major browsers support margin-top    Now the bad news    it requires jQuery it s not  as-written  responsive  sorry

User · Answer

align-bottom       position  absolute      bottom  10px      right  10px

User · Answer

Well  I didn t like any of those answers  my solution of the same problem was to add this  lt div gt  amp nbsp  lt  div gt   So in your scheme it would look like this  more or less   no style changes were necessary in my case   -row-fluid-------------------------------------  -span6----------   ----span6----------                        ---div---            content               amp  nbsp              that                ---------            is tall             -----div--------                            short content                            ----------------    ----------------   -------------------  -----------------------------------------------

User · Answer

Here s also an angularjs directive to implement this functionality          pullDown  function           return           restrict   A           link  function   scope  iElement  iAttrs              var  parent   iElement parent              var  parentHeight    parent height              var height   iElement height               iElement css  margin-top    parentHeight - height

User · Answer

Just set the parent to display flex  and the child to margin-top auto   This will place the child content at the bottom of the parent element  assuming the parent element has a height greater than the child element   There is no need to try and calculate a value for margin-top when you have a height on your parent element or another element greater than your child element of interest within your parent element

User · Answer

Based on the other answers here is an even more responsive version  I made changes from Ivan s version to support viewports  lt 768px wide and to better support slow window resizes    function         ensure   always references jQuery       function        when dom has finished loading           make top text appear aligned to bottom  http   stackoverflow com questions 13841387 how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout         function fixHeader                   for each element that is classed as  pull-down                reset margin-top for all pull down items                 pull-down   each function                        this  css  margin-top   0                                  set its margin-top to the difference between its own height and the height of its parent                 pull-down   each function                      if    window  innerWidth    gt   768                          this  css  margin-top     this  parent   height   -   this  height                                                            window  resize function                  fixHeader                         fixHeader              window jQuery

User · Answer

You can use flex    media  min-width  768px       row-fluid       display  flex      align-items  flex-end

[html] How do I bottom-align grid elements in bootstrap fluid layout

Examples related to html

Examples related to css

Examples related to layout

Examples related to twitter-bootstrap