Bootstrap 3 How do you align column content to bottom of row

Question

I have a row in Bootstrap 3 and 3 columns in that row  I want to align two of the columns to the bottom of the row and keep the first column at the top  When I use the traditional approach with position relative in the parent and absolute for both columns I get a weird behavior which I imagine is because of something in twitter bootstrap  Here s a bootply of what s happening   http   www bootply com 125735  The absolute forces all the columns on top of eachother  can anyone help me out  The end result is to have something like so   http   fahadalee wordpress com 2013 12 31 bootstrap-3-help-how-to-alin-div-in-bottom   Thanks

User · Answer

Vertical align bottom and remove the float seems to work. I then had a margin issue, but the -2px keeps them from getting pushed down (and they still don't overlap)

.profile-header > div {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  margin: -2px;
}
.profile-header {
  margin-bottom:20px;
  border:2px solid green;
  display: table-cell;
}
.profile-pic {
  height:300px;
  border:2px solid red;
}
.profile-about {
  border:2px solid blue;
}
.profile-about2 {
  border:2px solid pink;
}

Example here: http://www.bootply.com/125740#

User · Answer

You can use display  table-cell and vertical-align  bottom  on the 2 columns that you want to be aligned bottom  like so    bottom-column       float  none      display  table-cell      vertical-align  bottom      Working example here   Also  this might be a possible duplicate question

User · Answer

I don t know why but for me the solution proposed by Marius Stanescu is breaking the specificity of col  a col-md-3 followed by a col-md-4 will take all of the twelve row   I found another working solution     bottom-column       display  inline-block     vertical-align  middle     float  none

User · Answer

When working with bootsrap usually face three main problems    How to place the content of the column to the bottom  How to create a multi-row gallery of columns of equal height in one  row  How to center columns horizontally if their total width is less than 12 and the remaining width is odd    To solve first two problems download this small plugin https   github com codekipple conformity  The third problem is solved here http   www minimit com articles solutions-tutorials bootstrap-3-responsive-centered-columns  Common code   lt style gt       class  col-   position  relative       row-conformity  to-bottom  position absolute  bottom 0  left 0  right 0       row-centered  text-align center          row-centered  class  col-   display inline-block  float none  text-align left  margin-right -4px  vertical-align top    lt  style gt    lt script src  assets conformity conformity js  gt  lt  script gt   lt script gt        document  ready function                  row-conformity  gt   class  col-    conformity              window  on  resize   function                     row-conformity  gt   class  col-    conformity                         lt  script gt    1  Aligning content of the column to the bottom   lt div class  row row-conformity  gt       lt div class  col-sm-3  gt          I lt br gt create lt br gt highest lt br gt column      lt  div gt       lt div class  col-sm-3  gt           lt div class  to-bottom  gt              I am on the bottom          lt  div gt       lt  div gt   lt  div gt    2  Gallery of columns of equal height   lt div class  row row-conformity  gt       lt div class  col-sm-4  gt We all have equal height lt  div gt       lt div class  col-sm-4  gt     lt  div gt       lt div class  col-sm-4  gt     lt  div gt       lt div class  col-sm-4  gt     lt  div gt       lt div class  col-sm-4  gt     lt  div gt       lt div class  col-sm-4  gt     lt  div gt   lt  div gt    3  Horizontal alignment of columns to the center  less than 12 col units    lt div class  row row-centered  gt       lt div class  col-sm-3  gt     lt  div gt       lt div class  col-sm-4  gt     lt  div gt   lt  div gt    All classes can work together   lt div class  row row-conformity row-centered  gt           lt  div gt

[css] Bootstrap 3: How do you align column content to bottom of row

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3