How can I make Bootstrap columns all the same height

Question

I m using Bootstrap  How can I make three columns all the same height   Here is a screenshot of the problem  I would like the blue and red columns to be the same height as the yellow column      Here is the code     x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  container-fluid  gt  x000D   lt div class  row  gt  x000D       lt div class  col-xs-4 panel  style  background-color  red  gt  x000D          some content x000D       lt  div gt  x000D       lt div class  col-xs-4 panel  style  background-color  yellow  gt  x000D          catz x000D           lt img width  100  height  100  src  https   lorempixel com 100 100 cats   gt  x000D       lt  div gt  x000D       lt div class  col-xs-4 panel  style  background-color  blue  gt  x000D          some more content x000D       lt  div gt  x000D   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try this do through flex-box   x000D   x000D   container   x000D   display  flex  x000D   padding-bottom  50px  x000D    x000D   col   x000D   background  blue  x000D   padding  30px  x000D    x000D   x000D   col center   x000D   background  red  x000D   height  100px  x000D   margin-bottom  -50px  x000D    x000D   lt div class  container  gt  x000D     lt div class  col  gt Left lt  div gt  x000D     lt div class  col center  gt Center lt  div gt  x000D     lt div class  col  gt Right lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Live JSFiddle - https   jsfiddle net grinmax  spsn4fnq

User · Answer

03 19 2019    Bootstrap 4 Equal Height Solution      Bootstrap Utilities flex for equal height  Live example in Codepen  Equal height by bootstrap class with parent div fixed height or min-height   lt div class  d-flex align-content-stretch flex-wrap  style  min-height  200px  gt       lt div gt Flex height test text for example   Flex height test text for example  lt  div gt       lt div gt Flex item lt  div gt       lt div gt Flex item lt  div gt       lt div gt Flex item lt  div gt    lt  div gt     x000D   x000D   bd-highlight   x000D      background-color  rgba 86 61 124  15   x000D      border  1px solid rgba 86 61 124  15   x000D    x000D   fixed-height-200   x000D    min-height  200px  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   lt br gt  lt br gt  lt br gt  x000D   lt div class  d-flex align-content-stretch flex-wrap fixed-height-200  gt  x000D       lt div class  p-2 bd-highlight  gt Flex item  lt br gt  1111111111 lt  div gt  x000D       lt div class  p-2 bd-highlight bg-danger  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight bg-info  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight bg-light  gt Flex item  lt br gt  1111111111 lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item  lt br gt  1111111111 lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item  lt br gt  1111111111 lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight bg-primary  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D       lt div class  p-2 bd-highlight  gt Flex item lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There is a problem with using Solution 1 while appling it on only column in rows  Would like to improve Solution 1     class   col-   not  class   -12           margin-bottom  -99999px        padding-bottom  99999px         Sorry  can t comment Popnoodles s anwer  I have not enough reputations

User · Answer

Thought I d just add that the answer given by Dr Flink can also be applied to a Bootstrap 3 form-horizontal block - which can be very handy if you want to use background colours for each cell  In order for this to work for bootstrap forms  you would need to wrap the form contents which just serves to replicate a table-like structure   The example below also provides the CSS which demonstrates an additional media query allows Bootstrap 3 to simply takeover and do it s normal thing on the smaller screen s   This also works in IE8     Example      lt form class  form-horizontal  role  form  gt      lt div class  form-wrapper  gt       lt div class  form-group  gt         lt label class  col-xs-12 col-sm-2 control-label  gt My Label lt  label gt         lt div class  col-xs-12 col-sm-10  gt          Some content        lt  div gt       lt  div gt     lt  div gt    lt  form gt       form-wrapper     display  table      form-wrapper  form-group     display  table-row      form-wrapper  form-group  control-label     display  table-cell    float  none      form-wrapper  form-group label   div     display  table-cell    float  none      media  max-width  768px       form-wrapper       display  inherit         form-wrapper  form-group       display  block         form-wrapper  form-group  control-label       display  inherit         form-wrapper  form-group label   div       display  inherit

User · Answer

No JavaScript needed  Just add the class  row-eq-height to your existing  row just like this    lt div class  row row-eq-height  gt     lt div class  col-xs-12 col-sm-4 panel  style  background-color  red  gt      some content    lt  div gt     lt div class  col-xs-6 col-sm-4 panel  style  background-color  yellow  gt      kittenz    lt img src  http   placekitten com 100 100  gt     lt  div gt     lt div class  col-xs-6 col-sm-4 panel  style  background-color  blue  gt      some more content    lt  div gt   lt  div gt    Tip  if you have more than 12 columns in your row  the bootstrap grid will fail to wrap it  So add a new div row row-eq-height each 12 columns   Tip  you may need to add    lt link rel  stylesheet  href  http   getbootstrap com vn examples equal-height-columns equal-height-columns css    gt    to your html

User · Answer

Solution 4 using Bootstrap 4  Bootstrap 4 uses Flexbox so there is no need for extra CSS    Demo   lt div class  container  gt       lt div class  row   gt           lt div class  col-md-4  style  background-color  red  gt            some content          lt  div gt           lt div class  col-md-4  style  background-color  yellow  gt            catz            lt img width  100  height  100  src  https   placekitten com 100 100   gt           lt  div gt           lt div class  col-md-4  style  background-color  green  gt            some more content          lt  div gt       lt  div gt   lt  div gt    Solution 1 using negative margins  doesn t break responsiveness    Demo   row      overflow  hidden       class   col-        margin-bottom  -99999px      padding-bottom  99999px      Solution 2 using table   Demo   row       display  table      class   col-         float  none      display  table-cell      vertical-align  top      Solution 3 using flex added August 2015  Comments posted before this don t apply to this solution   Demo   row     display  -webkit-box    display  -webkit-flex    display  -ms-flexbox    display          flex    flex-wrap  wrap     row  gt   class   col-       display  flex    flex-direction  column

User · Answer

row container-height       overflow  hidden      row container-height gt  class   quot col- quot         margin-bottom  -99999px      padding-bottom  99999px     where  container-height is the style class that has to be added to a  row styled element to which all its  col  children have the same height  Applying these styles only to some specific  row  with  container-height  as in the example  also avoids applying the margin and padding overflow to all  col

User · Answer

To answer your question this is all you need see full responsive demo with prefixed css      Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you d like     media only screen and  min-width   481px         flex-row           display  flex          flex-wrap  wrap             flex-row  gt   class   col-             display  flex          flex-direction  column             flex-row row after        flex-row row before           display  flex              To add support for thumbnail content flex within flex columns like the screenshot above also add this    Note you could do this with panels as well     flex-row  thumbnail   flex-row  caption       display  flex      flex  1 0 auto      flex-direction  column     flex-text       flex-grow  1         flex-row img       width  100         While flexbox doesn t work in IE9 and below you can use the demo with a fallback using conditional tags with something like javascript grids as a polyfill    lt  -- if lte IE 9  gt    lt   endif -- gt    As for the other two examples in the accepted answer    The table demo is a decent idea but is being implemented wrong  Applying that CSS on bootstrap column classes specifically will without a doubt break the grid framework entirely  You should be using a custom selector for one and two the tables styles should not be applied to  class   col-   that have defined widths  This method should ONLY be used if you want equal height AND equal width columns  It is not meant for any other layouts and is NOT responsive  We can make it fallback however on mobile displays      lt div class  table-row-equal  gt   lt div class  thumbnail  gt      Content     lt  div gt   lt div class  thumbnail  gt      Content     lt  div gt   lt  div gt     media only screen and  min-width   480px        table-row-equal           display  table          width  100           table-layout  fixed          border-spacing  30px 0px          word-wrap  break-word             table-row-equal  thumbnail           float  none          display  table-cell          vertical-align  top          width  1             Lastly  the first demo in the accepted answer which implements a version of the one true layout is a good choice for some situations  but not suitable for bootstrap columns  The reason for this is that all the columns expand to the container height  So this will also break responsiveness since the columns are not expanding to the elements next to them  but the entire container  This method will also not allow you to apply bottom margins to rows any longer and will also cause other issues along the way like scrolling to anchor tags   For the complete code see the Codepen which automatically prefixes the flexbox code

User · Answer

Best out there    Github reflex - Docs   Works with bootstrap  Update    Include the CSS Update your code     x000D   x000D      x000D     x000D     Reflex v1 0 x000D     x000D     Reflex is a flexbox grid which provides a way to take advantage of emerging x000D     flexbox support while providing a fall back to inline-block on older browsers x000D     x000D     Built by Lee Jordan G C S E  x000D     email  ldjordan gmail com x000D     github  https   github com leejordan x000D     x000D     Structure and calculations are inspired by twitter bootstrap x000D     x000D      x000D   reflex-order-12   x000D    -webkit-order  12  x000D    -ms-flex-order  12  x000D    order  12  x000D    x000D   reflex-order-11   x000D    -webkit-order  11  x000D    -ms-flex-order  11  x000D    order  11  x000D    x000D   reflex-order-10   x000D    -webkit-order  10  x000D    -ms-flex-order  10  x000D    order  10  x000D    x000D   reflex-order-9   x000D    -webkit-order  9  x000D    -ms-flex-order  9  x000D    order  9  x000D    x000D   reflex-order-8   x000D    -webkit-order  8  x000D    -ms-flex-order  8  x000D    order  8  x000D    x000D   reflex-order-7   x000D    -webkit-order  7  x000D    -ms-flex-order  7  x000D    order  7  x000D    x000D   reflex-order-6   x000D    -webkit-order  6  x000D    -ms-flex-order  6  x000D    order  6  x000D    x000D   reflex-order-5   x000D    -webkit-order  5  x000D    -ms-flex-order  5  x000D    order  5  x000D    x000D   reflex-order-4   x000D    -webkit-order  4  x000D    -ms-flex-order  4  x000D    order  4  x000D    x000D   reflex-order-3   x000D    -webkit-order  3  x000D    -ms-flex-order  3  x000D    order  3  x000D    x000D   reflex-order-2   x000D    -webkit-order  2  x000D    -ms-flex-order  2  x000D    order  2  x000D    x000D   reflex-order-1   x000D    -webkit-order  1  x000D    -ms-flex-order  1  x000D    order  1  x000D    x000D   reflex-order-0   x000D    -webkit-order  0  x000D    -ms-flex-order  0  x000D    order  0  x000D    x000D   reflex-container   x000D    display  inline-block  x000D    display  -webkit-flex  x000D    display  flex  x000D    zoom  1  x000D     display  inline  x000D    margin  0  x000D    padding  0  x000D    position  relative  x000D    width  100   x000D    letter-spacing  -0 31em  x000D     letter-spacing  normal  x000D    word-spacing  -0 43em  x000D    list-style-type  none  x000D    x000D   reflex-container    x000D   reflex-container before  x000D   reflex-container after   x000D    -webkit-box-sizing  border-box  x000D    -moz-box-sizing  border-box  x000D    box-sizing  border-box  x000D    max-width  100   x000D    letter-spacing  normal  x000D    word-spacing  normal  x000D    white-space  normal  x000D    x000D   reflex-container   before  x000D   reflex-container   after   x000D    -webkit-box-sizing  border-box  x000D    -moz-box-sizing  border-box  x000D    box-sizing  border-box  x000D    x000D   class   reflex-col-     x000D    width  100   x000D    vertical-align  top  x000D    position  relative  x000D    display  inline-block  x000D    display  -webkit-flex  x000D    display  flex  x000D    zoom  1  x000D     display  inline  x000D    text-align  left  x000D    text-align  start  x000D    x000D   reflex-item   x000D    display  block  x000D    display  -webkit-flex  x000D    display  flex  x000D    -webkit-flex-direction  column  x000D    flex-direction  column  x000D    -webkit-flex  1 1 auto  x000D    flex  1 1 auto  x000D    x000D    -ms-fullscreen  x000D   root  reflex-item   x000D    width  100   x000D    x000D   reflex-col-12   x000D    width  100   x000D     width  99 9   x000D    x000D   reflex-col-11   x000D    width  91 66666666666666   x000D     width  91 56666666666666   x000D    x000D   reflex-col-10   x000D    width  83 33333333333334   x000D     width  83 23333333333335   x000D    x000D   reflex-col-9   x000D    width  75   x000D     width  74 9   x000D    x000D   reflex-col-8   x000D    width  66 66666666666666   x000D     width  66 56666666666666   x000D    x000D   reflex-col-7   x000D    width  58 333333333333336   x000D     width  58 233333333333334   x000D    x000D   reflex-col-6   x000D    width  50   x000D     width  49 9   x000D    x000D   reflex-col-5   x000D    width  41 66666666666667   x000D     width  41 56666666666667   x000D    x000D   reflex-col-4   x000D    width  33 33333333333333   x000D     width  33 23333333333333   x000D    x000D   reflex-col-3   x000D    width  25   x000D     width  24 9   x000D    x000D   reflex-col-2   x000D    width  16 666666666666664   x000D     width  16 566666666666663   x000D    x000D   reflex-col-1   x000D    width  8 333333333333332   x000D     width  8 233333333333333   x000D    x000D   media  min-width  480px    x000D     reflex-col-xs-12   x000D      width  100   x000D       width  99 9   x000D      x000D     reflex-col-xs-11   x000D      width  91 66666666666666   x000D       width  91 56666666666666   x000D      x000D     reflex-col-xs-10   x000D      width  83 33333333333334   x000D       width  83 23333333333335   x000D      x000D     reflex-col-xs-9   x000D      width  75   x000D       width  74 9   x000D      x000D     reflex-col-xs-8   x000D      width  66 66666666666666   x000D       width  66 56666666666666   x000D      x000D     reflex-col-xs-7   x000D      width  58 333333333333336   x000D       width  58 233333333333334   x000D      x000D     reflex-col-xs-6   x000D      width  50   x000D       width  49 9   x000D      x000D     reflex-col-xs-5   x000D      width  41 66666666666667   x000D       width  41 56666666666667   x000D      x000D     reflex-col-xs-4   x000D      width  33 33333333333333   x000D       width  33 23333333333333   x000D      x000D     reflex-col-xs-3   x000D      width  25   x000D       width  24 9   x000D      x000D     reflex-col-xs-2   x000D      width  16 666666666666664   x000D       width  16 566666666666663   x000D      x000D     reflex-col-xs-1   x000D      width  8 333333333333332   x000D       width  8 233333333333333   x000D      x000D    x000D   media  min-width  768px    x000D     reflex-col-sm-12   x000D      width  100   x000D       width  99 9   x000D      x000D     reflex-col-sm-11   x000D      width  91 66666666666666   x000D       width  91 56666666666666   x000D      x000D     reflex-col-sm-10   x000D      width  83 33333333333334   x000D       width  83 23333333333335   x000D      x000D     reflex-col-sm-9   x000D      width  75   x000D       width  74 9   x000D      x000D     reflex-col-sm-8   x000D      width  66 66666666666666   x000D       width  66 56666666666666   x000D      x000D     reflex-col-sm-7   x000D      width  58 333333333333336   x000D       width  58 233333333333334   x000D      x000D     reflex-col-sm-6   x000D      width  50   x000D       width  49 9   x000D      x000D     reflex-col-sm-5   x000D      width  41 66666666666667   x000D       width  41 56666666666667   x000D      x000D     reflex-col-sm-4   x000D      width  33 33333333333333   x000D       width  33 23333333333333   x000D      x000D     reflex-col-sm-3   x000D      width  25   x000D       width  24 9   x000D      x000D     reflex-col-sm-2   x000D      width  16 666666666666664   x000D       width  16 566666666666663   x000D      x000D     reflex-col-sm-1   x000D      width  8 333333333333332   x000D       width  8 233333333333333   x000D      x000D    x000D   media  min-width  992px    x000D     reflex-col-md-12   x000D      width  100   x000D       width  99 9   x000D      x000D     reflex-col-md-11   x000D      width  91 66666666666666   x000D       width  91 56666666666666   x000D      x000D     reflex-col-md-10   x000D      width  83 33333333333334   x000D       width  83 23333333333335   x000D      x000D     reflex-col-md-9   x000D      width  75   x000D       width  74 9   x000D      x000D     reflex-col-md-8   x000D      width  66 66666666666666   x000D       width  66 56666666666666   x000D      x000D     reflex-col-md-7   x000D      width  58 333333333333336   x000D       width  58 233333333333334   x000D      x000D     reflex-col-md-6   x000D      width  50   x000D       width  49 9   x000D      x000D     reflex-col-md-5   x000D      width  41 66666666666667   x000D       width  41 56666666666667   x000D      x000D     reflex-col-md-4   x000D      width  33 33333333333333   x000D       width  33 23333333333333   x000D      x000D     reflex-col-md-3   x000D      width  25   x000D       width  24 9   x000D      x000D     reflex-col-md-2   x000D      width  16 666666666666664   x000D       width  16 566666666666663   x000D      x000D     reflex-col-md-1   x000D      width  8 333333333333332   x000D       width  8 233333333333333   x000D      x000D    x000D   media  min-width  1200px    x000D     reflex-col-lg-12   x000D      width  100   x000D       width  99 9   x000D      x000D     reflex-col-lg-11   x000D      width  91 66666666666666   x000D       width  91 56666666666666   x000D      x000D     reflex-col-lg-10   x000D      width  83 33333333333334   x000D       width  83 23333333333335   x000D      x000D     reflex-col-lg-9   x000D      width  75   x000D       width  74 9   x000D      x000D     reflex-col-lg-8   x000D      width  66 66666666666666   x000D       width  66 56666666666666   x000D      x000D     reflex-col-lg-7   x000D      width  58 333333333333336   x000D       width  58 233333333333334   x000D      x000D     reflex-col-lg-6   x000D      width  50   x000D       width  49 9   x000D      x000D     reflex-col-lg-5   x000D      width  41 66666666666667   x000D       width  41 56666666666667   x000D      x000D     reflex-col-lg-4   x000D      width  33 33333333333333   x000D       width  33 23333333333333   x000D      x000D     reflex-col-lg-3   x000D      width  25   x000D       width  24 9   x000D      x000D     reflex-col-lg-2   x000D      width  16 666666666666664   x000D       width  16 566666666666663   x000D      x000D     reflex-col-lg-1   x000D      width  8 333333333333332   x000D       width  8 233333333333333   x000D      x000D    x000D   reflex-wrap   x000D    -webkit-flex-wrap  wrap  x000D    flex-wrap  wrap  x000D    x000D   reflex-wrap-reverse   x000D    -webkit-flex-wrap  wrap-reverse  x000D    flex-wrap  wrap-reverse  x000D    x000D   reflex-direction-row-reverse   x000D    -webkit-flex-direction  row-reverse  x000D    flex-direction  row-reverse  x000D    x000D   reflex-direction-column   x000D    -webkit-flex-direction  column  x000D    flex-direction  column  x000D    x000D   reflex-direction-column-reverse   x000D    -webkit-flex-direction  column-reverse  x000D    flex-direction  column-reverse  x000D    x000D   reflex-align-start   x000D    -webkit-align-items  flex-start  x000D    align-items  flex-start  x000D    x000D   reflex-align-end   x000D    -webkit-align-items  flex-end  x000D    align-items  flex-end  x000D    x000D   reflex-align-end  class   reflex-col-     x000D    vertical-align  bottom  x000D    x000D   reflex-align-center   x000D    -webkit-align-items  center  x000D    align-items  center  x000D    x000D   reflex-align-center  class   reflex-col-     x000D    vertical-align  middle  x000D    x000D   reflex-align-baseline   x000D    -webkit-align-items  baseline  x000D    align-items  baseline  x000D    x000D   reflex-align-baseline  class   reflex-col-     x000D    vertical-align  baseline  x000D    x000D   reflex-align-content-start   x000D    -webkit-align-content  flex-start  x000D    align-content  flex-start  x000D    x000D   reflex-align-content-end   x000D    -webkit-align-content  flex-end  x000D    align-content  flex-end  x000D    x000D   reflex-align-content-end  class   reflex-col-     x000D    vertical-align  bottom  x000D    x000D   reflex-align-content-center   x000D    -webkit-align-content  center  x000D    align-content  center  x000D    x000D   reflex-align-content-space-between   x000D    -webkit-align-content  space-between  x000D    align-content  space-between  x000D    x000D   reflex-align-content-space-around   x000D    -webkit-align-content  space-around  x000D    align-content  space-around  x000D    x000D   reflex-align-self-stretch   x000D    -webkit-align-self  stretch  x000D    align-self  stretch  x000D    x000D   reflex-align-self-start   x000D    -webkit-align-self  flex-start  x000D    align-self  flex-start  x000D    x000D   reflex-align-self-end   x000D    -webkit-align-self  flex-end  x000D    align-self  flex-end  x000D    vertical-align  bottom  x000D    x000D   reflex-align-self-center   x000D    -webkit-align-self  center  x000D    align-self  center  x000D    vertical-align  middle  x000D    x000D   reflex-align-self-baseline   x000D    -webkit-align-self  baseline  x000D    align-self  baseline  x000D    vertical-align  baseline  x000D    x000D   reflex-justify-start   x000D    text-align  left  x000D    -webkit-justify-content  flex-start  x000D    justify-content  flex-start  x000D    x000D   reflex-justify-end   x000D    text-align  right  x000D    -webkit-justify-content  flex-end  x000D    justify-content  flex-end  x000D    x000D   reflex-justify-center   x000D    text-align  center  x000D    -webkit-justify-content  center  x000D    justify-content  center  x000D    x000D   reflex-justify-space-between   x000D    text-align  justify  x000D    -moz-text-align-last  justify  x000D    text-align-last  justify  x000D    -webkit-justify-content  space-between  x000D    justify-content  space-between  x000D    x000D   reflex-justify-space-around   x000D    text-align  justify  x000D    -moz-text-align-last  justify  x000D    text-align-last  justify  x000D    -webkit-justify-content  space-around  x000D    justify-content  space-around  x000D    x000D   reflex-item-margin-sm   x000D    margin  0 0 25em 0 5em  x000D    x000D   reflex-item-margin-md   x000D    margin  0 0 5em 1em  x000D    x000D   reflex-item-margin-lg   x000D    margin  0 1em 2em  x000D    x000D   reflex-item-content-margin-sm     x000D    margin-right  0 25em  x000D    margin-left  0 25em  x000D    x000D   reflex-item-content-margin-md     x000D    margin-right  0 5em  x000D    margin-left  0 25em  x000D    x000D   reflex-item-content-margin-lg     x000D    margin-right  1em  x000D    margin-left  1em  x000D    x000D   reflex-img   x000D    display  inline-block  x000D    display  -webkit-flex  x000D    display  flex  x000D    zoom  1  x000D     display  inline  x000D    -webkit-flex  0 0 auto  x000D    flex  0 0 auto  x000D    margin-left  0  x000D    margin-right  0  x000D    max-width  100   x000D    width  100   x000D    height  auto  x000D    x000D   reflex-item-footer   x000D    margin-top  auto  x000D    margin-left  0  x000D    margin-right  0  x000D    x000D   lt link href  http   maxcdn bootstrapcdn com bootstrap 3 3 4 css bootstrap min css  rel  stylesheet   gt  x000D   lt link href  http   maxcdn bootstrapcdn com bootstrap 3 3 4 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  reflex-container reflex-wrap  gt  x000D     lt div class  reflex-col-xs-12 reflex-col-sm-4 panel  style  background-color  red  gt  x000D    some content x000D     lt  div gt  x000D     lt div class  reflex-col-xs-6 reflex-col-sm-4 panel  style  background-color  yellow  gt  x000D    kittenz x000D     lt img src  http   upload wikimedia org wikipedia en 1 13 Matrona jpg  gt  x000D     lt  div gt  x000D     lt div class  reflex-col-xs-6 reflex-col-sm-4 panel  style  background-color  blue  gt  x000D    some more content x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I m surprised I couldn t find a worthwhile solution here late 2018  I went ahead and figured it out a Bootstrap 3 solution myself using flexbox    Clean and simple example     HTML   lt div class  row row-equal  gt       lt div class  col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal  gt           lt p gt Text lt  p gt       lt  div gt       lt div class  col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal  gt           lt img src    placehold it 200x200  gt       lt  div gt       lt div class  col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal  gt           lt p gt Text lt  p gt       lt  div gt     lt  div gt    CSS  img     width  100     p     padding  2em     media  min-width  768px       row-equal       display  flex      flex-wrap  wrap         col-equal       margin  auto          View working demo  http   jsfiddle net 5kmtfrny

User · Answer

media  min-width   screen-sm-min        div equal-height-sm           display  table             gt  div class   col-                 display  table-cell              float  none              vertical-align  top                      lt div class  equal-height-sm  gt       lt div class  col-xs-12 col-sm-7  gt Test lt br  gt Test lt br  gt Test lt  div gt       lt div class  col-xs-12 col-sm-5  gt Test lt  div gt   lt  div gt    Example   https   jsfiddle net b9chris njcnex83 embedded result   Adapted from several answers here  The flexbox-based answers are the right way once IE8 and 9 are dead  and once Android 2 x is dead  but that is not true in 2015  and likely won t be in 2016  IE8 and 9 still make up 4-6  of usage depending on how you measure  and for many corporate users it s much worse  http   caniuse com  feat flexbox  The display  table  display  table-cell trick is more backwards-compatible - and one great thing is the only serious compatibility issue is a Safari issue where it forces box-sizing  border-box  something already applied to your Bootstrap tags  http   caniuse com  feat css-table  You can obviously add more classes that do similar things  like  equal-height-md  I tied these to divs for the small performance benefit in my constrained usage  but you could remove the tag to make it more generalized like the rest of Bootstrap   Note that the jsfiddle here uses CSS  and so  things Less would otherwise provide are hard-coded in the linked example  For example  screen-sm-min has been replaced with what Less would insert - 768px

User · Answer

You can use inline-flex as well which works pretty good and may be a little cleaner than modifying every row element with CSS   For my project I wanted every row who s child elements had borders to be the same height so the borders would look jagged  For this I created a simple css class    row borders      display  inline-flex      width  100

User · Answer

So yes  Bootstrap 4 does make all the cols in a row equal height  however if you are creating a border around the content inside the row you may find that it appears like the cols are not equal heights   When I applied height  100  to the element inside the col I found that I lost my margin   My solution is to use padding on the col s div  instead of a margin on the inner element   Like so    lt div class  container  gt       lt div class  row  gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt           lt div class  col-lg-4 col-md-6 col-12 py-4  gt               lt div class  h-100 border round  gt                                           lt  div gt           lt  div gt       lt  div gt   lt  div gt    The above code example uses Bootstrap 4 1 to create a set of nine boxes with a border

User · Answer

I tried alot of the suggestions made in this thread and on other pages but no solution worked 100  in every browsers   So I experimented quite some time and came up with this  A complete solution for Bootstrap Equal Height columns with the help of flexbox with only 1 class  This works in all major browsers IE10    CSS    row equal-cols     display  -webkit-flex    display  -ms-flexbox    display  flex    -webkit-flex-wrap  wrap    -ms-flex-wrap  wrap    flex-wrap  wrap      row equal-cols before   row equal-cols after     display  block      row equal-cols  gt   class   col-       display  -webkit-flex    display  -ms-flexbox    display  flex    -webkit-flex-direction  column    -ms-flex-direction  column    flex-direction  column      row equal-cols  gt   class   col-    gt        -webkit-flex  1 1 auto    -ms-flex  1 1 auto    flex  1 1 auto       HTML    lt div class  container  gt     lt div class  row equal-cols  gt       lt div class  col-sm-4  gt         lt div class  content  gt  lt  div gt       lt  div gt       lt div class  col-sm-4  gt         lt div class  content  gt  lt  div gt       lt  div gt       lt div class  col-sm-4  gt         lt div class  content  gt  lt  div gt       lt  div gt     lt  div gt   lt  div gt    To support even more versions of IE you can  for example  use https   github com liabru jquery-match-height and target all child columns of  equal-cols  Like this      Create a check for IE9  or any other specific browser   if IE9          row equal-cols  gt   class   col-     matchHeight        Without this polyfill the columns will behave as usual Bootstrap columns so which is a quite good fallback

User · Answer

Just checking through bootstrap documentation and I found the simple solution for the problem of column same height   Add the extra clearfix for only the required viewport   lt div class  clearfix visible-xs-block  gt  lt  div gt    For example    lt div class  col-md-3 col-xs-6  gt This is a long text lt  div gt   lt div class  col-md-3 col-xs-6  gt This is short lt  div gt   lt div class  clearfix visible-xs-block  gt This is a long text lt  div gt   lt div class  col-md-3 col-xs-6  gt Short lt  div gt   lt div class  col-md-3 col-xs-6  gt Long Text lt  div gt   lt div class  clearfix visible-xs-block  gt  lt  div gt   lt div class  col-md-3 col-xs-6  gt Longer text which will push down lt  div gt   lt div class  col-md-3 col-xs-6  gt Short lt  div gt    Please refer to http   getbootstrap com css  grid-responsive-resets

User · Answer

alot of css here     jQuery    document  ready function            Get height of original column you want to match    var box-height       panel nth-child 1    outerHeight           Output same height on particular element or element s         panel   height box-height          Really simple code no need to play with css  although all options above are perfectly usable   Jsfiddle

User · Answer

row-eq-height   display  -webkit-box  display  -webkit-flex  display  -ms-flexbox  display          flex       From   http   getbootstrap com vn examples equal-height-columns equal-height-columns css

User · Answer

For those looking for a quick  easy solution - if you have a relatively consistent set of block content setting a min-height on the div that is a bit bigger than the largest block can be easier to implement    align-box       min-height  400px

User · Answer

I use this super easy solution with clearfix  which doesn t have any side effects    Here is an example on AngularJS    lt div ng-repeat-start  item in list  gt       lt div class  col-lg-4 col-md-6 col-sm-12 col-xs-12  gt  lt  div gt   lt  div gt   lt div ng-repeat-end gt       lt div ng-if   index   3    2  class  clearfix visible-lg  gt  lt  div gt       lt div ng-if   index   2    1  class  clearfix visible-md  gt  lt  div gt   lt  div gt    And one more example on PHP    lt  php foreach   list as  i   gt   item     gt       lt div class  col-lg-4 col-md-6 col-sm-12 col-xs-12  gt  lt  div gt       lt div class  clearfix visible-md  gt  lt  div gt       lt  php if   i   2     1     gt           lt div class  clearfix visible-lg  gt  lt  div gt       lt  php endif    gt   lt  php endforeach    gt

User · Answer

cheeky jquery solution if anyone s interested  Just make sure all your cols  el  have a common classname   works responsively too if you bind it to   window  resize  function equal cols el        var h   0        el  each function              this  css   height   auto             if   this  outerHeight    gt  h                        h     this  outerHeight                            el  each function              this  css   height  h                Usage    document  ready function       equal cols   selector            Note  This post has been edited as per  Chris  comment out that the code was only set the last highest height in the   each   function

User · Answer

Update 2020  Best approach for Bootstap 3 x -- using CSS flexbox  and requires minimal CSS      equal     display  flex    display  -webkit-flex    flex-wrap  wrap      Bootstrap same height flexbox example  To only apply the same height flexbox at specific breakpoints  responsive   use a media query  For example  here is sm 768px  and up    media  min-width  768px       row equal       display  flex      flex-wrap  wrap          This solution also works well for multiple rows  column wrapping    https   www bootply com gCEXzPMehZ  Other workarounds  These options will be recommended by others  but are not a good idea for responsive design  These only work for simple single row layouts w o column wrapping   1  Using huge negative margins  amp  padding  2  Using display table-cell  this solution also effects the responsive grid  so a  media query can be used to only apply table display on wider screens before the columns stack vertically     Bootstrap 4  Flexbox is now used by default in Bootstrap 4 so there is no need for the extra CSS to make equal height columns  http   www codeply com go IJYRI4LPwU  Example    lt div class  container  gt       lt div class  row  gt           lt div class  col-md-6  gt  lt  div gt           lt div class  col-md-6  gt  lt  div gt       lt  div gt   lt  div gt

User · Answer

You only show one row so your use case may be limited to just that   Just in case you have multiple rows  this plugin - github Javascript-grids - works perfectly   It makes each panel expand to the tallest panel  giving each row potentially a different height based on the tallest panel in that row  It s a jquery solution vs  css  but wanted to recommend it as an alternative approach

User · Answer

HTML   lt div class  container-fluid  gt       lt div class  row-fluid  gt           lt div class  span4 option2  gt               lt p gt left column  lt  p gt               lt p gt The first column has to be the longest The first column has to be the longes lt  p gt           lt  div gt            lt div class  span4 option2  gt               lt p gt middle column lt  p gt           lt  div gt            lt div class  span4 option2  gt               lt p gt right column  lt  p gt               lt p gt right column  lt  p gt               lt p gt right column  lt  p gt               lt p gt right column  lt  p gt               lt p gt right column  lt  p gt           lt  div gt       lt  div gt   lt  div gt    CSS   option2   background  red  border  black 1px solid  color  white      JS      option2   css        height       option2   height

User · Answer

I searched for a solution to the same problem  and found one just worked    - with almost no extra code    see https   medium com wdstack bootstrap-equal-height-columns-d07bc934eb27 for a good disuccuion  and with the resposne you want in the bottom  with a link   https   www codeply com go EskIjvun4B  this was the correct responsive way to for me    a quote      3     Use flexbox  best    As of 2017  the best  and easiest  way to make equal height columns in a responsive design is using CSS3 flexbox     row display-flex     display  flex    flex-wrap  wrap     row display-flex  gt   class   col-       display  flex    flex-direction  column      and simply use   div class  container  gt      lt div class  row display-flex      etc

User · Answer

I know I m very late but now you can use the  min-height  style attribute to achieve your purpose

User · Answer

Some of the previous answers explain how to make the divs the same height  but the problem is that when the width is too narrow the divs won t stack  therefore you can implement their answers with one extra part  For each one you can use the CSS name given here in addition to the row class that you use  so the div should look like this if you always want the divs to be next to each other    lt div class  row row-eq-height-xs  gt Your Content Here lt  div gt    For all screens    row-eq-height-xs       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display          flex      flex-direction  row      For when you want to use sm    row-eq-height-sm       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display          flex      flex-direction  column     media  min-width 768px         row-eq-height-sm           flex-direction  row            For when you want to md    row-eq-height-md       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display          flex      flex-direction  column     media  min-width 992px         row-eq-height-md           flex-direction  row            For when you want to use lg    row-eq-height-lg       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display          flex      flex-direction  column     media  min-width 1200px         row-eq-height-md           flex-direction  row            EDIT Based on a comment  there is indeed a simpler solution  but you need to make sure to give column info from the largest desired width for all sizes down to xs  e g   lt div class  col-md-3 col-sm-4 col-xs-12  gt     row-eq-height       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display  flex      flex-direction  row      flex-wrap  wrap

User · Answer

You can use below code  var heights       row  gt  div   map function         return   this  height       get    maxHeight   Math max apply null  heights       row  gt  div   height maxHeight

User · Answer

If you want to make this work in any browser  use javascript      document   ready function         var heights       panel   map function             return   this  height           get         maxHeight   Math max apply null  heights            panel   height maxHeight

User · Answer

here is my solution  compiled CSS     row row-xs-eq     display  table    table-layout  fixed    margin  0      row row-xs-eq  before     content  none      row row-xs-eq  after     content  none      row row-xs-eq  gt   class   col-       display  table-cell    float  none    padding  0      media  min-width  768px       row row-sm-eq       display  table      table-layout  fixed      margin  0          row row-sm-eq  before       content  none          row row-sm-eq  after       content  none          row row-sm-eq  gt   class   col-         display  table-cell      float  none      padding  0          media  min-width  992px       row row-md-eq       display  table      table-layout  fixed      margin  0          row row-md-eq  before       content  none          row row-md-eq  after       content  none          row row-md-eq  gt   class   col-         display  table-cell      float  none      padding  0          media  min-width  1200px       row row-lg-eq       display  table      table-layout  fixed      margin  0          row row-lg-eq  before       content  none          row row-lg-eq  after       content  none          row row-lg-eq  gt   class   col-         display  table-cell      float  none      padding  0          So your code would look like    lt div class  row row-sm-eq  gt     lt  -- your old cols definition here -- gt   lt  div gt    Basically this is the same system you use with  col-  classes with that difference you need to apply  row-  classes to the row itself   With  row-sm-eq columns will be stacked on XS screens  If you don t need them to be stacked on any screens you can use  row-xs-eq   The SASS version that we do actually use    row      mixin row-eq-height       display  table      table-layout  fixed      margin  0        amp   before         content  none              amp   after         content  none              gt   class   col-           display  table-cell        float  none        padding  0                amp  row-xs-eq        include row-eq-height          media  min-width   screen-sm-min         amp  row-sm-eq          include row-eq-height                media  min-width   screen-md-min         amp  row-md-eq          include row-eq-height                media  min-width   screen-lg-min         amp  row-lg-eq          include row-eq-height                Live demo    Note  mixing  col-xs-12 and  col-xs-6 inside a single row would not work properly

User · Answer

If anyone using bootstrap 4 and looking for equal height columns just use row-eq-height to parent div   x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 2 css bootstrap min css  rel  stylesheet    gt  x000D   lt div class  row row-eq-height  gt  x000D     lt div class  col-xs-4  style  border  1px solid grey   gt  row row-eq-height  amp gt   col-xs-4 lt  div gt  x000D     lt div class  col-xs-4  style  border  1px solid grey   gt  row row-eq-height  amp gt   col-xs-4 lt br gt this is lt br gt a much lt br gt taller lt br gt column lt br gt than the others lt  div gt  x000D     lt div class  col-xs-4  style  border  1px solid grey   gt  row row-eq-height  amp gt   col-xs-4 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Ref  http   getbootstrap com vn examples equal-height-columns

User · Answer

From official documentation  Maybe you can use it in your case   When you need equal height  add  h-100 to the cards    lt div class  quot row row-cols-1 row-cols-md-3 g-4 quot  gt     lt div class  quot col quot  gt      lt div class  quot card h-100 quot  gt        lt div gt       lt  div gt     lt  div gt     lt div class  quot col quot  gt      lt div class  quot card h-100 quot  gt        lt div gt       lt  div gt     lt  div gt

User · Answer

If it makes sense in your context  you can simply add an empty 12-column div after each break  which acts as a divider that hugs the bottom of the tallest cell in your row    x000D   x000D   lt div class  row  gt  x000D      lt div class  col-xs-6  gt Some content lt  div gt  x000D      lt div class  col-xs-6  gt  x000D        Lots of content  Lots of content  Lots of content  Lots of content  Lots of content   x000D      lt  div gt  x000D      lt div id  spacer-div  class  col-xs-12  gt  lt  div gt  x000D      lt div class  col-xs-6  gt More content    lt  div gt  x000D   lt  div gt  lt  --this You forgot to close -- gt  x000D   x000D   x000D    Hope this helps

User · Answer

You can wrap the columns inside a div   lt div class  row  gt   lt div class  col-md-12 gt     lt div class  col-xs-12 col-sm-4 panel  style  background-color  red  gt    some content    lt  div gt     lt div class  col-xs-6 col-sm-4 panel  style  background-color  yellow  gt    kittenz    lt img src  http   placekitten com 100 100  gt     lt  div gt     lt div class  col-xs-6 col-sm-4 panel  style  background-color  blue  gt    some more content    lt  div gt   lt  div gt   lt  div gt

User · Answer

Here is my method  i have used flex with some changes in media query      media  min-width  0px  and  max-width  767px       fsi-row-xs-level       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display  flex         media  min-width  768px  and  max-width  991px       fsi-row-sm-level       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display  flex         media  min-width  992px  and  max-width  1199px       fsi-row-md-level       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display  flex         media  min-width  1200px       fsi-row-lg-level       display  -webkit-box      display  -webkit-flex      display  -ms-flexbox      display  flex          then added the classes to the parent which were required    lt div class  row fsi-row-lg-level fsi-row-md-level  gt   lt div class  col-sm-4  gt column 1 lt  div gt   lt div class  col-sm-4  gt column 2 lt  div gt   lt div class  col-sm-4  gt column 3 lt  div gt   lt  div gt    I am using responsive breakpoints because flux usually hampers the bootstrap standard responsive nature

[css] How can I make Bootstrap columns all the same height?

Examples related to css

Examples related to twitter-bootstrap