Bootstrap4 get cards in columns to stretch and fill parent container horizontally and vertically

Question

I'm using Bootstrap 4. I created a row with 3 columns each with a size of 4 on medium and larger displays. Content in each card might be of different sizes but I still want each card to be of equivalent length.

I am not using card groups/decks because they are not responsive and I want the cards to take up all 12 rows on small/xs displays.

Below is a snippet of code that relates to the cards. I also have the project on Plunker for a live view: http://plnkr.co/edit/RLQaA6knYi69qc4vLr6j?p=info. If you open up the project on a large display, the cards are not of equivalent size.

Bootstrap 4 says that if no width is provided, cards by default stretch to fill the entire width of its container. Am I wrong in assuming its filling the entire width of the parent container in which the card is contained (i.e. in below case the div of col-md-4)?

If I am wrong, how do I go about making the 3 cards stretch horizontally to fill the entire width of the column in which its placed as well as stretch vertically to be the same size? I tried to add flex-column flex-grow but that only sized them horizontally but not vertically. What would be the best way to handle this?




  

    
      
        Portfolio
      
    

    

      
        
          
          Featured
        
      

      
        
          
          Footer
        
      

      
        
          
          
            This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Edit:

I got this to work by adding a class to each card div and setting the width to 100%. I'm still not sure if this is the correct approach as I was under the assumption a card would do that automatically.

Gleb Kemarsky · Accepted Answer

Your columns have a width of 100% on the mobile device. But the cards inside these columns still have a width of auto.

enter image description here

So you can add the w-100 class to each card.

Please check the result. Is it what you want to achieve?




  

    
      
        Portfolio
      
    

    

      
        
          
          Featured
        
      

      
        
          
          Footer
        
      

      
        
          
          
            This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

UPDATE

To manage the properties of all the cards at once, you can assign your own class to a row that contains all these cards. Bootstrap does not prohibit the use of your own CSS.

.row-whith-wide-cards .card {
  width: 100%;
}




  

    
      
        Portfolio
      
    

    

      
        
          
          Featured
        
      

      
        
          
          Footer
        
      

      
        
          
          
            This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Bootstrap4 get cards in columns to stretch and fill parent container horizontally and vertically

Edit:

Answers (1)

UPDATE

Related Questions