Bootstrap 4 - displaying cards in a custom way

Question

I\'m trying to create a proper semantic HTML/CSS based on Bootstrap 4 that would present card elements in a certain way without adding too much custom bulk.

What I have

Answer 1

You can use the Bootstrap 4 utility classes to adjust the layout...

• h-100 to make the left card full-height to match the smaller cards
• p-2 spacing (padding) to make even gutter between columns

https://www.codeply.com/go/CPe58ZHi2u

  

    

      

        

          
          

          

            
Test 1

          
        
      
      

        

          

            

              
              

              

                
Test 2

              
            
          
          

            

              
              

              

                
Test 3

              
            
          
          

            

              
              

              

                
Test 4

              
            
          
          

            

              
              

              

                
Test 5

              
            
          
          

            

              
              

              

                
Test 6

              
            
          
          

            

              
              

              

                
Test 7

              
            
          
        
      
    
  

Also, p-3 could be used instead of p-2 if you want a larger gutter.