How to use vertical align in bootstrap

Question

Simple problem  How do I vertically align a col within a col using bootstrap  Example here  I want to vertically align child1a and child1b     http   bootply com 73666  HTML   lt div class  col-lg-12  gt      lt div class  col-lg-6 col-md-6 col-12 child1  gt       lt div class  col-12 child1a  gt Child content 1a lt  div gt       lt div class  col-12 child1b  gt Child content 1b lt  div gt      lt  div gt       lt div class  col-lg-6 col-md-6 col-12 child2  gt    Child content 2 lt br gt    Child content 2 lt br gt    Child content 2 lt br gt    Child content 2 lt br gt    Child content 2 lt br gt      lt  div gt    lt  div gt    UPDATE  Some CSS    col-lg-12  top 40px  bottom 0px  border 4px solid green          child1a   child1b    border 4px solid black    display inline-block  important      child1    border 4px solid blue    height 300px    display table-cell  important    vertical-align middle      child2    border 4px solid red

User · Answer

I had to add width  100   to display table to fix some strange bahavior in IE and FF  when i used this example  IE and FF had some problems displaying the col-md-  tags at the right width   display-table           display  table          table-layout  fixed          width  100       display-cell           display  table-cell          vertical-align  middle          float  none

User · Answer

Prinsen s answer is the best choice  But  to fix the issue where the columns don t collapse his code needs to be surrounded by a media check statement  This way these styles are only applied when the larger columns are active  Here is the updated complete answer   HTML    lt div class  row display-table  gt       lt div class  col-xs-12 col-sm-4 display-cell  gt          img      lt  div gt       lt div class  col-xs-12 col-sm-8 display-cell  gt          text      lt  div gt   lt  div gt    CSS    media  min-width  768px       display-table         display  table         table-layout  fixed            display-cell         display  table-cell         vertical-align  middle         float  none

User · Answer

With Bootstrap 4  you can do it much more easily  http   v4-alpha getbootstrap com layout flexbox-grid  vertical-alignment

User · Answer

http   jsfiddle net b9chris zN39r   HTML    lt div class  item row  gt       lt div class  col-xs-12 col-sm-6  gt  lt h4 gt This is some text  lt  h4 gt  lt  div gt       lt div class  col-xs-12 col-sm-6  gt  lt h4 gt This is some more  lt  h4 gt  lt  div gt   lt  div gt    CSS   div item div h4       height  60px      vertical-align  middle          display  table-cell      Important notes    The vertical-align  middle  display  table-cell  must be applied to a tag that has no Bootstrap classes applied  it cannot be a col-   a row  etc  This can t be done without this extra  possibly pointless tag in your HTML  unfortunately  The backgrounds are unnecessary - they re just there for demo purposes  So  you don t need to apply any special rules to the row or col-  tags  It is important to notice the inner tag does not stretch to 100  of the width of its parent  in our scenario this didn t matter but it may to you  If it does  you end up with something closer to some of the other answers here    http   jsfiddle net b9chris zN39r 1   CSS   div item div       background   fdd      table-layout  fixed      display  table    div item div h4       height  60px      vertical-align  middle          display  table-cell      background   eee      Notice the added table-layout and display properties on the col-  tags  This must be applied to the tag s  that have col-  applied  it won t help on other tags

User · Answer

For the parent  display  table   For the child  display  table-cell    Then add vertical-align  middle    I can make a fiddle but home time now  yay   OK here is the lovely fiddle  http   jsfiddle net lharby AJAhR    parent      display table      child      display table-cell     vertical-align middle     text-align center

User · Answer

You mean you want 1b and 1b to be side by side         lt div class  col-lg-6 col-md-6 col-12 child1  gt         lt div class  col-6 child1a  gt Child content 1a lt  div gt         lt div class  col-6 child1b  gt Child content 1b lt  div gt    lt  div gt

User · Answer

parent       display  table      table-layout  fixed      child       display table-cell      vertical-align middle      text-align center      table-layout  fixed prevents breaking the functionality of the col-  classes

User · Answer

Maybe an old topic but if someone needs further help with this do the following for example  this puts the text in middle line of image if it has larger height then the text    HTML    lt div class  row display-table  gt       lt div class  col-xs-12 col-sm-4 display-cell  gt          img      lt  div gt       lt div class  col-xs-12 col-sm-8 display-cell  gt          text      lt  div gt   lt  div gt    CSS    display-table      display  table      table-layout  fixed      display-cell      display  table-cell      vertical-align  middle      float  none      The important thing that I missed out on was  float  none   since it got float left from bootstrap col attributes   Cheers

[css] How to use vertical align in bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3