Bootstrap 4 Card-Deck with Number of Columns Based on Viewport

Bootstrap 4 card-deck with number of columns based on viewport

Updated 2018

If you want a responsive card-deck, use the visibility utils to force a wrap every X columns on different viewport width(breakpoints)...

Bootstrap 4 responsive card-deck (v 4.1)

Original answer for Bootstrap 4 alpha 2:

You can use the grid col-*-* to get the different widths (instead of card-deck) and then set equal height to the cols using flexbox.

.row > div[class*='col-'] {
  display: flex;
  flex:1 0 auto;
}

http://codeply.com/go/O0KdSG2YX2 (alpha 2)

The problem is that w/o flexbox enabled the card-deck uses table-cell where it becomes very hard to control the width. As of Bootstrap 4 Alpha 6, flexbox is default so the additional CSS is not required for flexbox, and the h-100 class can be used to make the cards full height: http://www.codeply.com/go/gnOzxd4Spk

Related question:
Bootstrap 4 - Responsive cards in card-columns

How to limit number of columns of card-deck?

As explained in the docs, Card layouts (decks, groups and columns)...

"For the time being, these layout options are not yet responsive."

Therefor, you can't limit the cards per row in the card-deck. You could use grid columns instead, and flexbox if you need the cards to be equal height..

  <div class="row">
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          <div class="col-sm-3">
                <div class="card">
                  ...
                </div>
          </div>
          ... {repeat col-sm-3}..
  </div>

http://codeply.com/go/AP1MpYKY2H

As of Bootstrap 4 alpha 6: Flexbox is now the default so the extra CSS is no longer needed. Use h-100 to make the cards fill the height of the columns.

https://www.codeply.com/go/rHe6rq5L76 (updated demo for Bootstrap 4.1)

How to set number of cards per row in card-deck in Bootstrap 4

is this what you wanted??

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
<div class="row">  <div class="card col-sm-6">    <div class="card-body">      <h5 class="card-title">Card title</h5>      <p class="card-text">        Card text      </p>    </div>    <div class="card-footer">      <small class="text-muted">Card footer text</small>    </div>  </div>  <div class="card col-sm-6">    <div class="card-body">      <h5 class="card-title">Card title</h5>      <p class="card-text">        Card text      </p>    </div>    <div class="card-footer">      <small class="text-muted">Card footer text</small>    </div>  </div>  <div class="card col-sm-6">    <div class="card-body">      <h5 class="card-title">Card title</h5>      <p class="card-text">        Card text      </p>    </div>    <div class="card-footer">      <small class="text-muted">Card footer text</small>    </div>  </div>  <div class="card col-sm-6">    <div class="card-body">      <h5 class="card-title">Card title</h5>      <p class="card-text">        Card text      </p>    </div>    <div class="card-footer">      <small class="text-muted">Card footer text</small>    </div>  </div></div>

Bootstrap 4 Card Deck Fixed Card Width (when less than specified amount of cards per row)

You need to define max-width at global level. You can refer to bootstrap documentation.

https://getbootstrap.com/docs/4.0/components/card/

or you can refer this previous post.

Previously discussed: Bootstrap 4 card-deck with number of columns based on viewport

.card {
    max-width: 13rem;

}

Bootstrap 4 - Responsive cards in card-columns

Bootstrap 4 (4.0.0-alpha.2) uses the css property column-count in the card-columns class to define how many columns of cards would be displayed inside the div element.

But this property has only two values:

The default value 1 for small screens (max-width: 34em)
The value 3 for all other sizes (min-width: 34em)

Here's how it is implemented in bootstrap.min.css :

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        ⋮
    }
    ⋮
}

To make the card stacking responsive, you can add the following media queries to your css file and modify the values for min-width as per your requirements :

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 48em) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 62em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 75em) {
    .card-columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

Create responsive card decks in Bootstrap

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>JS Bin</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head><body><div class="container">    <div class="row">        <div class="col-md-6 col-lg-4 col-12">            <div class="card-deck">                <div class="card mb-4">                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">                    <div class="card-body">                    <h4 class="card-title">1 Card title</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>                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>                    </div>                </div>            </div>        </div>        <div class="col-md-6 col-lg-4 col-12">            <div class="card-deck">                <div class="card mb-4">                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">                    <div class="card-body">                    <h4 class="card-title">1 Card title</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>                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>                    </div>                </div>            </div>        </div>        <div class="col-md-6 col-lg-4 col-12">            <div class="card-deck">                <div class="card mb-4">                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">                    <div class="card-body">                    <h4 class="card-title">1 Card title</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>                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>                    </div>                </div>            </div>        </div>    
        <div class="col-lg-4 col-md-6 col-12">            <div class="card-deck">                <div class="card mb-4">                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">                    <div class="card-body">                    <h4 class="card-title">1 Card title</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>                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>                    </div>                </div>            </div>        </div>        <div class="col-lg-4 col-md-6 col-12">            <div class="card-deck">                <div class="card mb-4">                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">                    <div class="card-body">                    <h4 class="card-title">1 Card title</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>                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>                    </div>                </div>            </div>        </div>        <div class="col-lg-4 col-md-6 col-12">            <div class="card-deck">                <div class="card mb-4">                    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">                    <div class="card-body">                    <h4 class="card-title">1 Card title</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>                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>                    </div>                </div>            </div>        </div>    </div></div></body></html>

Size card to viewport in Bootstrap 4.6

I'd eliminate all the unnecessary grid structure around the card and use Bootstrap's
viewport sizing utilities. I'd then apply Bootstrap's flex utilities to the card and set overflow on the body to auto.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="card d-flex vw-100 vh-100">
  <div class="card-header">
    Header
  </div>

  <div class="card-body flex-none overflow-auto">
    Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come
    to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the
    time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the
    aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time
    for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of
    their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.
  </div>

  <div class="card-footer">
    Footer
  </div>
</div>

Bootstrap 4 Card-Deck with Number of Columns Based on Viewport