CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards
blueSurfer
blueSurfer

Reputation: 5831

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

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:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">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.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Upvotes: 226

Views: 617485

Answers (23)

Alb Rick Bi
Alb Rick Bi

Reputation: 33

If any card item height is e.g. 400px (based on its 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.

.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

Upvotes: 1

Wande Shokunbi
Wande Shokunbi

Reputation: 91

This is quite simple. You just need to put the h-100 class on the card.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">In exercitation voluptate consectetur velit eiusmod sint minim duis cillum minim nisi aliqua. Id dolore enim laboris exercitation qui magna reprehenderit. Ad irure pariatur enim officia dolor irure adipisicing magna. Anim ullamco qui quis ullamco sint aliquip id culpa non nulla cupidatat consequat ex sit.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Sint tempor velit anim eiusmod. Laborum minim aliquip eu adipisicing cillum cupidatat elit excepteur.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Dolore labore esse mollit in nostrud adipisicing velit in amet exercitation incididunt minim. Voluptate elit consectetur culpa fugiat elit enim incididunt magna officia esse. Nulla est duis in enim id consequat cupidatat dolor eu elit velit.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>

See Codepen example

Upvotes: 3

Yuh Lee
Yuh Lee

Reputation: 353

You can set $card-height: 100% in Sass, which was~ null by default

Upvotes: 0

Kerry7777
Kerry7777

Reputation: 4574

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://getbootstrap.com/docs/4.6/utilities/flex/#align-items

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
    </div>
</div>

UPDATE BS5 FULL HTML EXAMPLE

https://codepen.io/Kerrys7777/pen/QWgwEeG

Upvotes: 340

S&#233;bastien Gicquel
S&#233;bastien Gicquel

Reputation: 4386

You can add d-flex and flex-column to the div with card-body.

Here is a working example :

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">
  <div class="row">
    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
          <p class="text-muted">Lorem ipsum dolor </p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <p class="text-uppercase">consectetur adipiscing elit</p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Smaller title here that wraps 1 line</h5>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <p class="text-uppercase">adipiscing </p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Longer title here that wraps 3 lines, Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

asad minhas
asad minhas

Reputation: 281

<div class='row'>
  <div class="col-xs-12 d-flex align-items-stretch"></div>
</div>

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362790

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://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 > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Related
Bootstrap 4 Cards of same height in columns

Upvotes: 18

PraWin Pravs
PraWin Pravs

Reputation: 31

According to the question I have an answer it may help you and you can use it. You can just use height attribute and set it as height: 100vh; I have used 70vh and cards will be fixed height which you have given.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- Bootstrap 4.5 CSS-->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

      <!-- Bootstrap JS Requirements -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
          crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
          integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
          crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
          integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
          crossorigin="anonymous"></script>
      <link rel="stylesheet" href="index.css">
      <title>Document</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <style>
      /*Use height property to set equil card height*/
      .card {
          background-color: #56568a;
          margin: 10px !important;
          height: 70vh;
          width: auto;
      }
  </style>
  <body>
      <div class="container">
          <div class="col-sm-6 col-md-6 col-lg-3">
              <div class="card">
                  <img class="card-img-top img-fluid" src="img5.PNG" alt="Card image cap">
                  <div class="card-block">
                      <small class="purple"> Product Launch</small>
                      <h4 class="card-title">Leveraging Social Proof for Growth</h4>
                      <p class="card-text">Duolingo removes language barriers by connecting people that need
                          websites translated with students
                          that learning a
                          language...</p>
                      <p class="card-text "><i class="far fa-user"></i><small class="purple">Praveen</small>
                          <i class="far fa-clock    "></i><small class="purple">Today</small>
                      </p>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-6 col-lg-3">
              <div class="card">
                  <img class="card-img-top img-fluid" src="img6.PNG" alt="Card image cap">
                  <div class="card-block">
                      <small class="purple"> ddc</small>
                      <h4 class="card-title">Leveraging Social Proof for Growth</h4>
                      <p class="card-text">Duolingo removes language barriers by connecting people that need
                          websites translated with students
                          that learning a
                          language...</p>
                      <p class="card-text"><i class="far fa-user"></i><small class="purple">Praveen</small>
                          <i class="far fa-clock    "></i><small class="purple">2 days ago</small>
                      </p>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

Upvotes: 2

SidG
SidG

Reputation: 39

For Bootstrap 5 and 4

HEIGHT-put your all card in div with class="card-deck"

WIDTH -give your all card style {min-width: 50ch}

Upvotes: 2

praveen kumar
praveen kumar

Reputation: 102

this may help you

just follow this code

<div class="row">
   <div class="col-md-4 h-100">contents....</div>
   <div class="col-md-4 h-100">contents....</div>
   <div class="col-md-4 h-100">contents....</div>
</div>

use bootstrap class "h-100"

Upvotes: 3

djibe
djibe

Reputation: 3038

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 :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "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."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Upvotes: 150

Zenish Prajapati
Zenish Prajapati

Reputation: 11

this worked fine for me:

<div class="card card-body " style="height:80% !important">

forcing our CSS over the bootstraps general CSS.

Upvotes: -3

Antonio Petricca
Antonio Petricca

Reputation: 11070

Another useful approach is Card Grids:

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

jeyglo
jeyglo

Reputation: 152

You can use card-deck, it will align all the cards... this come from bootstrap 4 official page.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">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.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Upvotes: 9

csaw
csaw

Reputation: 21

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.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

Upvotes: 2

bsesic
bsesic

Reputation: 609

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

Upvotes: 40

doncadavona
doncadavona

Reputation: 7760

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.

Upvotes: 1

Mujtaba Kably
Mujtaba Kably

Reputation: 755

wrap the cards inside

<div class="card-group"></div>

or

<div class="card-deck"></div>

Upvotes: 4

user3350279
user3350279

Reputation: 2709

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:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

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.

Upvotes: 247

rlu7732
rlu7732

Reputation: 23

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:

<div class="row match-height">

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
});

Upvotes: -4

Nick
Nick

Reputation: 10559

Here is how I did it:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

Upvotes: 19

skrile
skrile

Reputation: 388

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: enter image description here

Upvotes: 5

PlatinumJay
PlatinumJay

Reputation: 95

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.

Upvotes: -17

Related Questions