Bootstrap 4 - Responsive cards in card-columns

Question

I\'m playing with Bootstrap 4 and I can\'t find a solution to add responsiveness to cards while in a div with class=\"card-columns\" (this class ap

Answer 1

I realize this question was posted a while ago; nonetheless, Bootstrap v4.0 has card layout support out of the box. You can find the documentation here: Bootstrap Card Layouts.

I've gotten back into using Bootstrap for a recent project that relies heavily on the card layout UI. I've found success with the following implementation across the standard breakpoints:

    
    

        

            
Cars
            
Add and manage your cars for sale.
            

                Add a car for sale
            
        
        

            

                

                    
                    

                        
Card title
                        
Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        
                        Go somewhere
                    
                    

                        buttons here
                    
                
                

                    
                    

                        
Card title
                        
Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        
                        Go somewhere
                    
                    

                        buttons here
                    
                
                

                    
                    

                        
Card title
                        
Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        
                        Go somewhere
                    
                    

                        buttons here
                    
                
                

                    
                    

                        
Card title
                        
Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        
                        Go somewhere
                    
                    

                        buttons here
                    
                
                

                    
                    

                        
Card title
                        
Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        
                        Go somewhere
                    
                    

                        buttons here
                    
                
            
        
    

After trying both the Bootstrap .card-group and .card-deck card layout classes with quirky results at best across the standard breakpoints, I finally decided to give the .card-columns class a shot. And it worked!

Your results may vary, but .card-columns seems to be the most stable implementation here.