How to make Bootstrap 4 cards the same height in card-columns

Question

I am using Bootstrap 4 alpha 2 and taking advantage on cards   Specifically  I am working with this example taken from the official docs  How can I make all cards to be the same height   All I can think by now is setting the following CSS rule    card       min-height  200px      But that is just a hard coded solution that won t work in a general case  The code in my view is the same as the one in the docs i e    lt div class  card-columns  gt     lt div class  card  gt       lt img class  card-img-top  data-src       alt  Card image cap  gt       lt div class  card-block  gt         lt h4 class  card-title  gt Card title that wraps to a new line lt  h4 gt         lt p class  card-text  gt This is a longer card with supporting text below as a natural lead-in to additional content  This content is a little bit longer  lt  p gt       lt  div gt     lt  div gt     lt div class  card card-block  gt       lt blockquote class  card-blockquote  gt         lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Integer posuere erat a ante  lt  p gt         lt footer gt           lt small class  text-muted  gt            Someone famous in  lt cite title  Source Title  gt Source Title lt  cite gt           lt  small gt         lt  footer gt       lt  blockquote gt     lt  div gt     lt div class  card  gt       lt img class  card-img-top  data-src       alt  Card image cap  gt       lt div class  card-block  gt         lt h4 class  card-title  gt Card title lt  h4 gt         lt p class  card-text  gt This card has supporting text below as a natural lead-in to additional content  lt  p gt         lt p class  card-text  gt  lt small class  text-muted  gt Last updated 3 mins ago lt  small gt  lt  p gt       lt  div gt     lt  div gt     lt div class  card card-block card-inverse card-primary text-xs-center  gt       lt blockquote class  card-blockquote  gt         lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Integer posuere erat  lt  p gt         lt footer gt           lt small gt            Someone famous in  lt cite title  Source Title  gt Source Title lt  cite gt           lt  small gt         lt  footer gt       lt  blockquote gt     lt  div gt     lt div class  card card-block text-xs-center  gt       lt h4 class  card-title  gt Card title lt  h4 gt       lt p class  card-text  gt This card has supporting text below as a natural lead-in to additional content  lt  p gt       lt p class  card-text  gt  lt small class  text-muted  gt Last updated 3 mins ago lt  small gt  lt  p gt     lt  div gt     lt div class  card  gt       lt img class  card-img  data-src       alt  Card image  gt     lt  div gt     lt div class  card card-block text-xs-right  gt       lt blockquote class  card-blockquote  gt         lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Integer posuere erat a ante  lt  p gt         lt footer gt           lt small class  text-muted  gt            Someone famous in  lt cite title  Source Title  gt Source Title lt  cite gt           lt  small gt         lt  footer gt       lt  blockquote gt     lt  div gt     lt div class  card card-block  gt       lt h4 class  card-title  gt Card title lt  h4 gt       lt p class  card-text  gt This is a wider card with supporting text below as a natural lead-in to additional content  This card has even longer content than the first to show that equal height action  lt  p gt       lt p class  card-text  gt  lt small class  text-muted  gt Last updated 3 mins ago lt  small gt  lt  p gt     lt  div gt   lt  div gt

User · Answer

wrap the cards inside    lt div class  card-group  gt  lt  div gt   or    lt div class  card-deck  gt  lt  div gt

User · Answer

Most minimal way to achieve this  that I know of     Apply  text-monospace to all texts in in the card  Limit all texts in the cards to same number of characters    UPDATE  Add  text-truncate in the card s title and or other texts  This forces texts to a single line  Making the cards have same height

User · Answer

Bootstrap 4 has all you need   USE THE  d-flex and  flex-fill class  Don t use the card-decks as they are not responsive  I used col-sm  you can use the  col class you want  or use col-lg-x the x means number of width column e g 4 or 3 for best view if the post have many then 3 or 4 per column Try to reduce the browser window to XS to see it in action    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet    gt    lt link href  https   fonts googleapis com css family Roboto 300 300i 400 400i 500 500i 700 700i  rel  stylesheet  gt   lt div class  container  gt     lt div class  row my-4  gt       lt div class  col  gt         lt div class  jumbotron  gt           lt h1 gt Bootstrap 4 Cards all same height demo lt  h1 gt           lt p class  lead  gt by djibe  lt  p gt           lt span class  text-muted  gt  thx to BS4  lt  span gt           lt p gt Dependencies   standard BS4 lt  p gt           lt p gt            Enjoy the magic of flexboxes and leave the useless card-decks           lt  p gt           lt div class  container-fluid  gt             lt div class  row  gt               lt div class  col-sm d-flex  gt                 lt div class  card card-body flex-fill  gt                  A small card content                 lt  div gt               lt  div gt               lt div class  col-sm d-flex  gt                 lt div class  card card-body flex-fill  gt                   Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor                 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum                  lt  div gt               lt  div gt               lt div class  col-sm d-flex  gt                 lt div class  card card-body flex-fill  gt                  Another small card content                 lt  div gt               lt  div gt             lt  div gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt  x000D   x000D   x000D

User · Answer

I came across this problem  most people use jQuery    Here was my solution   quot Do not mind  I am just a beginner in this    quot   cards-collection        card-item            width  100           margin  20px 20px          padding 0            card               border-radius  10px                  button                       border  inherit                                             container-fluid           row cards-collection justify-content-center             card-item col-lg-3 col-md-4 col-sm-6 col-11                card h-100  If any card item height is e g  400px  based on it s contents   because the default for flex-align is stretch  then  card-item  child of row or card-collection class  will be stretched  making the height of the card to be 100  of the parent will occupy this full height  I hope I was correct  Am I

User · Answer

You can either put the classes on the  row  or the  column    Won t be visible on the cards  border  if you use it on the row   https   v4-alpha getbootstrap com utilities flexbox  align-items   lt div class  container  gt       lt div class  row  gt             lt div class  col-lg-4 d-flex align-items-stretch  gt    Some of the other answers here seem  wacky   Why would use a min-height or even worse a fixed height   I thought this issue  equal heights  was part of the reason for progression away from floating block divs

User · Answer

I am a novice at this so please forgive if I am missing something all together   I tried many of the above  If you set the height   100  the card will always expand to the greatest length of the longest card  The container will constrain all to the same length   I wanted to see the container  so I used background color to help me see what was going on    lt div class  col-lg-3   style  background-color  rosybrown   gt       lt div class  card w-100  Style  height  100   gt           lt div class  card-body  gt               lt img src  images beHappy png  alt    class  img-fluid rounded-circle w-25 mb-3  gt               lt h4 gt CBe Happy lt  h2 gt

User · Answer

I m using Bootstrap 4  Beta 2   Meanwhile the situations seems to have changed  I had the same problem and found an easy solution  This is my code    lt div class  container-fluid content-row  gt       lt div class  row  gt           lt div class  col-sm-12 col-lg-6  gt               lt div class  card h-100  gt                      content card                  lt  div gt           lt  div gt              all the other cards           lt  div gt   lt  div gt    With  col-sm-12 col-lg-6  I ve made the cards responsive  With  card h-100  I ve set all cards to the height of their parent column  On my system this works  but I m not a pro  So  hopefully I helped someone

User · Answer

this worked fine for me   lt div class  quot card card-body  quot  style  quot height 80   important quot  gt   forcing our CSS over the bootstraps general CSS

User · Answer

You can apply the class h-100  which stands for height 100

User · Answer

If anyone is interested  there is a jquery plugin called  jquery matchHeight js  https   github com liabru jquery-match-height  matchHeight makes the height of all selected elements exactly equal  It handles many edge cases that cause similar plugins to fail   For a row of cards  I use    lt div class  row match-height  gt    Then enable site-wide       row match-height   each function          this  find   card   not   card  card   matchHeight       Not  card  card prevents collapsible cards from taking height

User · Answer

this may help you just follow this code  lt div class  quot row quot  gt      lt div class  quot col-md-4 h-100 quot  gt contents     lt  div gt      lt div class  quot col-md-4 h-100 quot  gt contents     lt  div gt      lt div class  quot col-md-4 h-100 quot  gt contents     lt  div gt   lt  div gt   use bootstrap class  quot h-100 quot

User · Answer

You can use card-deck  it will align all the cards    this come from bootstrap 4 official page    lt div class  card-deck  gt     lt div class  card  gt       lt img class  card-img-top  src       alt  Card image cap  gt       lt div class  card-body  gt         lt h5 class  card-title  gt Card title lt  h5 gt         lt p class  card-text  gt This is a longer card with supporting text below as a natural lead-in to additional content  This content is a little bit longer  lt  p gt         lt p class  card-text  gt  lt small class  text-muted  gt Last updated 3 mins ago lt  small gt  lt  p gt       lt  div gt     lt  div gt     lt div class  card  gt       lt img class  card-img-top  src       alt  Card image cap  gt       lt div class  card-body  gt         lt h5 class  card-title  gt Card title lt  h5 gt         lt p class  card-text  gt This card has supporting text below as a natural lead-in to additional content  lt  p gt         lt p class  card-text  gt  lt small class  text-muted  gt Last updated 3 mins ago lt  small gt  lt  p gt       lt  div gt     lt  div gt     lt div class  card  gt       lt img class  card-img-top  src       alt  Card image cap  gt       lt div class  card-body  gt         lt h5 class  card-title  gt Card title lt  h5 gt         lt p class  card-text  gt This is a wider card with supporting text below as a natural lead-in to additional content  This card has even longer content than the first to show that equal height action  lt  p gt         lt p class  card-text  gt  lt small class  text-muted  gt Last updated 3 mins ago lt  small gt  lt  p gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

jsfiddle  Just add the height you want with CSS  example    card      height  350px      You will have to add your own CSS    If you check the documentation  this is for Masonry style - the point of that is they are not all the same height

User · Answer

Here is how I did it   CSS    my-flex-card  gt  div  gt  div card       height  calc 100  - 15px       margin-bottom  15px      HTML    lt div class  row my-flex-card  gt       lt div class  col-lg-3 col-sm-6  gt           lt div class  card  gt               lt div class  card-block  gt                  aaaa              lt  div gt           lt  div gt       lt  div gt       lt div class  col-lg-3 col-sm-6  gt           lt div class  card  gt               lt div class  card-block  gt                  bbbb              lt  div gt           lt  div gt       lt  div gt       lt div class  col-lg-3 col-sm-6  gt           lt div class  card  gt               lt div class  card-block  gt                  cccc              lt  div gt           lt  div gt       lt  div gt       lt div class  col-lg-3 col-sm-6  gt           lt div class  card  gt               lt div class  card-block  gt                  dddd              lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

Another useful approach is Card Grids    x000D   x000D   lt div class  row row-cols-1 row-cols-md-2  gt  x000D     lt div class  col mb-4  gt  x000D       lt div class  card  gt  x000D         lt img src       class  card-img-top  alt       gt  x000D         lt div class  card-body  gt  x000D           lt h5 class  card-title  gt Card title lt  h5 gt  x000D           lt p class  card-text  gt This is a longer card with supporting text below as a natural lead-in to additional content  This content is a little bit longer  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  col mb-4  gt  x000D       lt div class  card  gt  x000D         lt img src       class  card-img-top  alt       gt  x000D         lt div class  card-body  gt  x000D           lt h5 class  card-title  gt Card title lt  h5 gt  x000D           lt p class  card-text  gt This is a longer card with supporting text below as a natural lead-in to additional content  This content is a little bit longer  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  col mb-4  gt  x000D       lt div class  card  gt  x000D         lt img src       class  card-img-top  alt       gt  x000D         lt div class  card-body  gt  x000D           lt h5 class  card-title  gt Card title lt  h5 gt  x000D           lt p class  card-text  gt This is a longer card with supporting text below as a natural lead-in to additional content  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt div class  col mb-4  gt  x000D       lt div class  card  gt  x000D         lt img src       class  card-img-top  alt       gt  x000D         lt div class  card-body  gt  x000D           lt h5 class  card-title  gt Card title lt  h5 gt  x000D           lt p class  card-text  gt This is a longer card with supporting text below as a natural lead-in to additional content  This content is a little bit longer  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I took a slightly different approach  Using the Card Deck wrapper  I added a style rule that limits the height of the card block    card  card-block  max-height 300px overflow auto     This give the following result

User · Answer

UPDATE  In Bootstrap 4  flexbox is now default  and each card-deck row will contain 3 cards  The cards will fill to full height   http   www codeply com go x91w5Cl6ip  The Bootstrap 4 alpha card-columns uses CSS3 columns which don t really support equal heights  except column-fill which is only suppored in Firefox    If you instead enable Bootstrap 4 flexbox mode  you could instead use the card-deck and a little CSS to equalize the height and wrap every 3 columns    media  min-width 34em         card-deck  gt   card               width  29           flex-wrap  wrap          flex  initial             http   codeply com go YFFFWHVoRB  Related Bootstrap Card of same Height in Col

[html] How to make Bootstrap 4 cards the same height in card-columns?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to bootstrap-cards