Open In App

Bootstrap 5 Grid system Mix and match

Last Updated : 04 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Grid System Mix and Match provides a way to combine the column with various available classes for each tier, in order to simply stack the columns in some grid tiers according to need, i.e., any number of columns in each row tier can be added to get the style of layout we want which at times can be something which is a homogeneous distribution of columns. It is generally utilized where the number of columns in each row is mixed and matched to achieve a certain type of layout.

Syntax:

<div class="row">
    <div class="col-*"></div>
        ...
</div>

The * in col-* denotes the number of sections occupied by that column. This is a styling technique of the Grid System and to implement it each row needs to have a different set of columns occupied. 

Example 1: The below code example demonstrates how when we can mix and match the columns of a Grid System to create a layout.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h4>
        BootStrap 5 Grid system Mix and match
    </h4>
    <div class="row text-light mt-4">
        <div class="col-2 bg-success border">
            2 sections
        </div>
        <div class="col-4 bg-success border">
            4 sections
        </div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
    </div>
    <div class="row text-light mt-1">
        <div class="col-2 bg-success border">
            2 sections
        </div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
        <div class="col-1 bg-success border">
            1 section
        </div>
        <div class="col-4 bg-success border">
            4 sections
        </div>
        <div class="col-2 bg-success border">
            2 sections
        </div>
    </div>
    <div class="row text-light mt-1">
        <div class="col-2 bg-success border">
            2 sections
        </div>
        <div class="col-1 bg-success border">
            1 section
        </div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
        <div class="col-3 bg-success border">
            3 sections
        </div>
    </div>
    <div class="row text-light mt-1">
        <div class="col-2 bg-success border">
            2 sections
        </div>
        <div class="col-4 bg-success border">
            4 sections
        </div>
        <div class="col-4 bg-success border">
            4 sections
        </div>
        <div class="col-2 bg-success border">
            2 sections
        </div>
    </div>
</body>
  
</html>
 






                        










Output:


 


Example 2: The below code example demonstrates how when we can mix and match the responsive columns classes of a Grid System to create a layout.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 


          rel="stylesheet" 


          integrity= 


"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 


          crossorigin="anonymous"> 


</head> 


  


<body> 


    <h1 class="text-success"> 


        GeeksforGeeks 


    </h1> 


    <h4> 


        Bootstrap 5 Grid system Mix and match 


    </h4> 


    <div class="row text-light text-center mt-4"> 


        <div class="col-4 col-lg-2 bg-secondary border"> 


            4 sections(small)<br>2 sections(large) 


        </div> 


        <div class="col-2 col-lg-4 bg-secondary border"> 


            2 sections(small)<br>4 sections(large) 


        </div> 


        <div class="col-3 col-lg-3 bg-secondary border"> 


            3 sections(small)<br>3 sections(large) 


        </div> 


        <div class="col-3 col-lg-3 bg-secondary border"> 


            3 sections(small)<br>3 sections(large) 


        </div> 


    </div> 


    <div class="row text-light text-center"> 


        <div class="col-2 col-lg-2 bg-dark border"> 


            2 sections(small)<br>2 sections(large) 


        </div> 


        <div class="col-2 col-lg-3 bg-dark border"> 


            2 sections(small)<br>3 sections(large) 


        </div> 


        <div class="col-3 col-lg-1 bg-dark border"> 


            3 sections(small)<br>1 section(large) 


        </div> 


        <div class="col-3 col-lg-4 bg-dark border"> 


            3 sections(small)<br>4 sections(large) 


        </div> 


        <div class="col-2 col-lg-2 bg-dark border"> 


            2 sections(small)<br>2 sections(large) 


        </div> 


    </div> 


    <div class="row text-light text-center"> 


        <div class="col-1 col-lg-2 bg-success border"> 


            1 section(small)<br>2 sections(large) 


        </div> 


        <div class="col-4 col-lg-1 bg-success border"> 


            4 sections(small)<br>1 section(large) 


        </div> 


        <div class="col-3 col-lg-3 bg-success border"> 


            3 sections(small)<br>3 sections(large) 


        </div> 


        <div class="col-2 col-lg-3 bg-success border"> 


            2 sections(small)<br>3 sections(large) 


        </div> 


        <div class="col-2 col-lg-3 bg-success border"> 


            2 sections(small)<br>3 sections(large) 


        </div> 


    </div> 


    <div class="row text-light text-center"> 


        <div class="col-4 col-lg-2 bg-danger border"> 


            4 sections(small)<br>2 sections(large) 


        </div> 


        <div class="col-2 col-lg-4 bg-danger border"> 


            2 sections(small)<br>4 sections(large) 


        </div> 


        <div class="col-2 col-lg-4 bg-danger border"> 


            2 sections(small)<br>4 sections(large) 


        </div> 


        <div class="col-4 col-lg-2 bg-danger border"> 


            4 sections(small)<br>2 sections(large) 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


 


Reference: https://getbootstrap.com/docs/5.0/layout/grid/#mix-and-match 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        BootStrap 5 Grid System Stacked to Horizontal
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Grid System Row Columns
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Grid system Grid tiers
            

        
    
        
            

                CSS mix-blend-mode Property
            

        
    
        
            

                Node Jimp | Color mix
            

        
    
        
            

                Tailwind CSS Mix Blend Mode
            

        
    
        
            

                Less.js Color Operation mix() Function
            

        
    
        
            

                It is Possible to Mix Chakra UI with Tailwind CSS ?
            

        
    
        
            

                Should I use Hooks, classes, or a mix of both?
            

        
    
        
            

                How Specify Length and Width of Square Grid Picture System in Bootstrap?
            

        
    
        
            

                Bootstrap Grid System
            

        
    
        
            

                BootStrap 5 Grid System Stacked to Horizontal
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
T

        

            
        

        

                                    


                                    

                                        triashabiswas                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox