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

Question

I\'m trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height.

The examples that bootstrap provides show 4 nice cards, but it

Answer 1

This answer is for those who are using Bootstrap 4.1+ and for those who care about IE 11 as well

Card-deck does not adapt the number visible of cards according to the viewport size.

Above methods work but do not support IE. With the below method, you can achieve similar functionality and responsive cards.

You can manage the number of cards to show/hide in different breakpoints.

In Bootstrap 4.1+ columns are same height by default, just make sure your card/content uses all available space. Run the snippet, you'll understand

    

        

            


                

                    
Card title
                    
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                    
Last updated 3 mins ago
                
            
        
        

            

                

                    
Card title
                    
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                    
Last updated 3 mins ago
                
            
        
        

            

                

                    
Card title
                    
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                    
Last updated 3 mins ago