Bootstrap 4 card deck table-cell columns responsive based on viewport?

Question

So in Bootstrap v4, I see there\'s a new feature for card decks ( http://v4-alpha.getbootstrap.com/components/card/#decks ) that makes a group of cards, with their height equal

Answer 1

Try this

    

        

            
            

                
Title
                
Nullam id dolor id nibh ultricies vehicula ut id elit.
                Button
            
        
        

            
            

                
Title
                
Nullam id dolor id nibh ultricies vehicula ut id elit.
                Button
            
        
        

            
            

                
Title
                
Nullam id dolor id nibh ultricies vehicula ut id elit.
                Button
            
        
        

            
            

                
Title
                
Nullam id dolor id nibh ultricies vehicula ut id elit.
                Button
            
        
    

// 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 card-deck