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 have created a Cards Layout - 3 cards in a row using Bootstrap 4 / CSS3 (of course its responsive). The following example uses basic Bootstrap 4 classes such as container, row, col-x, list-group and list-group-item. Thought to share here if someone is interested in this sort of a layout.

HTML

  

    

      

        
Header
        

          

            
 Cras justo odio
            
 Dapibus ac facilisis in
            
 Morbi leo risus
            
 Porta ac consectetur ac
            
 Vestibulum at eros
          
        
        
Click here
      
    
    

      
        
        
Header
        

          

            
 Cras justo odio
            
 Dapibus ac facilisis in
            
 Morbi leo risus
            
 Porta ac consectetur ac
            
 Vestibulum at eros
          
        
        
Click here
      
    
    

      

        
Header
        

          

            
 Cras justo odio
            
 Dapibus ac facilisis in
            
 Morbi leo risus
            
 Porta ac consectetur ac
            
 Vestibulum at eros
          
        
        
Click here
      
    
  

CSS / SCSS

$primary-color: #ccc;
$col-bg-color: #eee;
$col-footer-bg-color: #eee;
$col-header-bg-color: #007bff;
$col-content-bg-color: #fff;

body {
  background-color: $primary-color;
}  

.custom-column {  
  background-color: $col-bg-color;
  border: 5px solid $col-bg-color;    
  padding: 10px;
  box-sizing: border-box;  
}

.custom-column-header {
  font-size: 24px;
  background-color: #007bff;  
  color: white;
  padding: 15px;  
  text-align: center;
}

.custom-column-content {
  background-color: $col-content-bg-color;
  border: 2px solid white;  
  padding: 20px;  
}

.custom-column-footer {
  background-color: $col-footer-bg-color;   
  padding-top: 20px;
  text-align: center;
}

Link :- https://codepen.io/anjanasilva/pen/JmdOpb