Bootstrap 5 Cards need to be all same height using SwiperJS Slider

Question

I am not a CSS expert. I want all of the cards in a swiperjs slider to have the same height, no matter what the content is in the card. At the moment, the content of some of the cards is a different height. My code looks like this image and my sample code is below. How do I make my cards in swiperjs all have the same height?

Here is the sample code:



  
    Test
    
    
    
    
    
  
  
    
        
            
                
                    Projects I have completed for my clients
                

                
                    
                        
                            
                                
                                    
                                        
                                    
                                    
                                        Tuffwraps
                                        
                                            Built a script that:

                                            1) Scans the products for tags in your Shopify cart 

                                            2) If 3 products contain a same tag, the customer will be awarded 20% off 

                                            3) Similarly, 4 will get them 25% off, and 5 or more will get them 30% off.
                                        
                                        Shopify Plus
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        Travelbass
                                        
                                            Added a cart slider, made it so the page doesn't refresh in case a new item is added into a cart, while updating information about the quantity and price of products.
                                        
                                        Shopify
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        CEA
                                        
                                            Tailored the responsive view for mobile devices.
                                        
                                        Shopify
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        THE CLOATHING LOUNGE
                                        Built a new design look
                                        Shopify
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        Creative Lighters
                                        Fixed a broken monthly subscription for a mystery box product
                                        Shopify

user_18595321 · Answer

Add height: auto; to .swiper-slide in the CSS.

Set autoHeight:false as a slider object parameter. The sliderjs docs say that if autoHeight is set to true then the slider wrapper will adapt its height to the height of the currently active slide -- which is not what you want.

Set vh-100 on each card. Other vh values may or may not work. I have not tested them properly, but I don't think they work too well.

Finally, the text content was overflowing, so set the font size for the card class to something smaller. However, changing the font size will depend on your particular layout.

.swiper-slide {
  height: auto;
}

.card-text {
  font-size: 12px;
  line-height: 1.5;
}





  Test
  
  
  
  
  



  
    
      
        
          Projects I have completed for my clients
        

        
          
            
              
                
                  
                    
                  
                  
                    Tuffwraps
                    
                      Built a script that:
 1) Scans the products for tags in your Shopify cart 
 2) If 3 products contain a same tag, the customer will be awarded 20% off 
 3) Similarly, 4 will get them 25% off, and 5 or more will get
                      them 30% off.
                    
                    Shopify Plus
                  
                
              

              
                
                  
                    
                  
                  
                    Travelbass
                    
                      Added a cart slider, made it so the page doesn't refresh in case a new item is added into a cart, while updating information about the quantity and price of products.
                    
                    Shopify
                  
                
              

              
                
                  
                    
                  
                  
                    CEA
                    
                      Tailored the responsive view for mobile devices.
                    
                    Shopify
                  
                
              

              
                
                  
                    
                  
                  
                    THE CLOATHING LOUNGE
                    Built a new design look
                    Shopify
                  
                
              

              
                
                  
                    
                  
                  
                    Creative Lighters
                    Fixed a broken monthly subscription for a mystery box product
                    Shopify

user_16496357 · Answer

With your current structure the problem falls with .card-body. You have a varying amount of content for each .card-body which is determining the height of each .card.

Set a height on .card-body and use overflow-y: scroll; so that the .cards with the most content have a scrollbar. I added a custom scrollbar that is always visibile to demonstrate.

.card-body {
  height: 200px;
  overflow-y: scroll;
}



.card-body::-webkit-scrollbar {
  width: 10px;
}

.card-body::-webkit-scrollbar-thumb {
  background: var(--bs-primary);
  border-radius: 3px;
}





  Test
  
  
  
  
  



  
    
      
        
          Projects I have completed for my clients
        

        
          
            
              
                
                  
                    
                  
                  
                    Tuffwraps
                    
                      Built a script that:
 1) Scans the products for tags in your Shopify cart 
 2) If 3 products contain a same tag, the customer will be awarded 20% off 
 3) Similarly, 4 will get them 25% off, and 5 or more will get
                      them 30% off.
                    
                    Shopify Plus
                  
                
              

              
                
                  
                    
                  
                  
                    Travelbass
                    
                      Added a cart slider, made it so the page doesn't refresh in case a new item is added into a cart, while updating information about the quantity and price of products.
                    
                    Shopify
                  
                
              

              
                
                  
                    
                  
                  
                    CEA
                    
                      Tailored the responsive view for mobile devices.
                    
                    Shopify
                  
                
              

              
                
                  
                    
                  
                  
                    THE CLOATHING LOUNGE
                    Built a new design look
                    Shopify
                  
                
              

              
                
                  
                    
                  
                  
                    Creative Lighters
                    Fixed a broken monthly subscription for a mystery box product
                    Shopify

user_11748351 · Answer

I want to thank PeterJames because of your answer I will able to figure out how can I make it all same height and here is mine solution to this problem



  
    Test
    
    
    
    
    
  
  
    
        
            
                
                    Projects I have completed for my clients
                

                
                    
                        
                            
                                
                                    
                                        
                                    
                                    
                                        Tuffwraps
                                        
                                            Built a script that:

                                            1) Scans the products for tags in your Shopify cart 

                                            2) If 3 products contain a same tag, the customer will be awarded 20% off 

                                            3) Similarly, 4 will get them 25% off, and 5 or more will get them 30% off.
                                        
                                        Shopify Plus
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        Travelbass
                                        
                                            Added a cart slider, made it so the page doesn't refresh in case a new item is added into a cart, while updating information about the quantity and price of products.
                                        
                                        Shopify
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        CEA
                                        
                                            Tailored the responsive view for mobile devices.
                                        
                                        Shopify
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        THE CLOATHING LOUNGE
                                        Built a new design look
                                        Shopify
                                    
                                
                            

                            
                                
                                    
                                        
                                    
                                    
                                        Creative Lighters
                                        Fixed a broken monthly subscription for a mystery box product
                                        Shopify

Bootstrap 5 Cards need to be all same height using SwiperJS Slider

3 Answers