Bootstrap 4 images thumbnail classes

Question

I got a HTML code in the following using bootstrap 3.3.7, using thumbnail class the images can be resized and fit into the grid perfectly.

Answer 1

In Bootstrap 4 you can do the following.

For columns col-xs- doesn't exist anymore, replace with col-. The default is xs.

For the thumbnail, you can use the img-thumbnail class on the img element instead of on the div element.

Additionally, to achieve 0 padding on each column and row, you can override Bootstrap's padding by adding a custom style rule.

    .row > .col-lg-4,
       .col-6 {
               padding: 0;
       }

The resulting Bootstrap 4 file would be the following:

    
    

    
        
        
        
        
        
    
    

        
Pictures of Coffee
        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
        
    
    

    

Hope this helps.