Bootstrap 4 Column Decks Column Table Response to Viewport?

Question

Therefore, in Bootstrap v4, I see a new function for the deck of cards ( http://v4-alpha.getbootstrap.com/components/card/#decks ), which makes the group of cards the same in height according to the highest content in the group.

It looks like the number of columns is based on how many div cards in the group. Is there a way to change the number of columns depending on the viewport? For example, 4 columns / map wide with a wide width, 2 widths with an average width and 1 with a small width?

They currently have the same number of columns / maps up to 544 pixels wide. At 544px and above, they have display: table-cell with the screen (min-width: 544px) rule screen (min-width: 544px) .

Is there a way to make maps have a different number of columns depending on the viewport, changing only CSS?

Edit - Do not use flex / flexbox due to IE support

Codepen example with a width of 4 counts / card and a width of 3 counts / card in http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

I found a pretty easy workaround using css-grid. You can customize 250px according to your use case.

 .card-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: .5rem; } 

Answer 2

Update 2018

Using card-deck difficult to set the width of the cards (responsive), because it uses display:table-cell and width:1% .

I found it easier to make them responsive using cards in the Bootstap col-* grid, and then you can use the breakpoints of the grid viewport. Enable Bootstrap flexbox if you want the cards to be the same height as a card-deck .

http://www.codeply.com/go/6eqGPn3Qud

In addition, img-responsive been changed to img-fluid

Bootstrap 4.0.0

Flexbox is now used by default , but the way to create an adaptive deck of cards is still not supported. The recommended way is to use cards inside the grid:

Responsive Mesh Maps

Another way to make a responsive deck of cards is to use responsive reset divs every x columns. This will cause the cards to wind up at certain breakpoints.

For example: 5 on xl, 4 on lg, 3 on md, 2 on sm, etc.

Adaptive deck of cards ( 4.0.0 )
Adaptive Card Deck Demo (alpha 6)
CSS Pseudo Elements Options

Answer 3

Here you go, http://codepen.io/KarlDoyle/pen/pypWbR

The main thing is that you need to redefine the styles. as shown below.

 .card-deck { display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: stretch; } .card-deck .card { display: block; flex-basis: 33.3%; /* change this value for each breakpoint*/ } 

Answer 4

Bootstrap 4 Card Deck Responsive

I tried using <container> , <row> and <col> to make it responsive, but you lost

All cards are the same height.

A feature of the deck of cards, if you do. You need CSS:

 .card-deck { margin: 0 -15px; justify-content: space-between; } .card-deck .card { margin: 0 0 1rem; } @media (min-width: 576px) and (max-width: 767.98px) { .card-deck .card { -ms-flex: 0 0 48.7%; flex: 0 0 48.7%; } } @media (min-width: 768px) and (max-width: 991.98px) { .card-deck .card { -ms-flex: 0 0 32%; flex: 0 0 32%; } } @media (min-width: 992px) { .card-deck .card { -ms-flex: 0 0 24%; flex: 0 0 24%; } } 

Here is my CodePen: Bootstrap 4-card deck is responsive

Answer 5

Just put the h-100 class on the cards in the grid.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-sm-6 my-3"> <div class="card h-100"> <!-- full height --> <div class="card-header"></div> <div class="card-body">1</div> <div class="card-footer"></div> </div> </div> <div class="col-sm-6 my-3"> <div class="card h-100"> <!-- full height --> <div class="card-header"></div> <div class="card-body">2a <br> 2b <br> 2c</div> <div class="card-footer"></div> </div> </div> <div class="col-sm-6 my-3"> <div class="card h-100"> <!-- full height --> <div class="card-header"></div> <div class="card-body">3</div> <div class="card-footer"></div> </div> </div> </div> 

Answer 6

try it

 <div class="container"> <div class="card-deck"> <div class="card my-3"> <img src="http://placehold.it/560x560" class="card-img-top"> <div class="card-body"> <h4 class="card-title">Title</h4> <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <button class="btn btn-primary" type="button">Button</button> </div> </div> <div class="card my-3"> <img src="http://placehold.it/560x560" class="card-img-top"> <div class="card-body"> <h4 class="card-title">Title</h4> <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <button class="btn btn-primary" type="button">Button</button> </div> </div> <div class="card my-3"> <img src="http://placehold.it/560x560" class="card-img-top"> <div class="card-body"> <h4 class="card-title">Title</h4> <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <button class="btn btn-primary" type="button">Button</button> </div> </div> <div class="card my-3"> <img src="http://placehold.it/560x560" class="card-img-top"> <div class="card-body"> <h4 class="card-title">Title</h4> <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <button class="btn btn-primary" type="button">Button</button> </div> </div> </div> </div> 

 // Bootstrap 4 breakpoints & gutter $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; $grid-gutter-width: 30px !default; // number of cards per line for each breakpoint $cards-per-line: ( xs: 1, sm: 2, md: 3, lg: 4, xl: 5 ); @each $name, $breakpoint in $grid-breakpoints { @media (min-width: $breakpoint) { .card-deck .card { flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width}); } } } 

Demo on codepen Bootstrap 4, responsive deck of cards

Answer 7

This can be done using javascript.

• First you need to create divs for each breakpoint in your html document.

• Then you need to set divs to default value in css. Create media queries for each breakpoint that overrides this default value.

• Then write some javascript. One function to check for breakpoints by checking if the default value for css has been overridden, and the other to add and remove appropriate classes. I removed the card-deck-wrapper and card-deck classes when I wanted to make them responsive, and added the corresponding col-**-** classes col-**-** . Finally, add calls to these functions in the document.ready and window.resize .

 var breakpoint; $(document).on('ready', function() { detectBreakpoint(); }); $(window).resize(function() { detectBreakpoint(); }); // detects the current breakpoint function detectBreakpoint() { if ($('.breakpointXS').css('display') == "inline") { breakpoint = 'xs'; } else if ($('.breakpointSM').css('display') == "inline") { breakpoint = 'sm'; } else if ($('.breakpointMD').css('display') == "inline") { breakpoint = 'md'; } else if ($('.breakpointLG').css('display') == "inline") { breakpoint = 'lg'; } placeCards(); } function placeCards() { if (breakpoint == 'xs' || breakpoint == 'sm') { console.log('small'); $('.cardCont1').removeClass('card-deck-wrapper'); $('.cardCont2').removeClass('card-deck'); $('.card').addClass('col-xs-10 offset-xs-1'); } else { $('.cardCont1').addClass('card-deck-wrapper'); $('.cardCont2').addClass('card-deck'); $('.card').removeClass('col-xs-10 offset-xs-1'); } } 

 .breakpointXS, .breakpointSM, .breakpointMD, .breakpointLG { /* hides divs to detect breakpoints until made visible my media queries */ display: none; } @media only screen and (max-width: 767px) { .breakpointXS { display: inline; } } @media screen and (max-width: 991px) and (min-width: 768px) { .breakpointSM { display: inline; } } @media screen and (max-width: 1199px) and (min-width: 992px) { .breakpointMD { display: inline; } } @media only screen and (min-width: 1200px) { .breakpointLG { display: inline; } } 

 <!-- to use breakpoints in jquery --> <div class="breakpointXS"></div> <div class="breakpointSM"></div> <div class="breakpointMD"></div> <div class="breakpointLG"></div>