Open In App

Bootstrap 5 Grid Large

Last Updated : 08 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a free and open-source tool for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers (IE, Firefox, and Chrome) and all sizes of screens (Desktop, Tablets, Phablets, and Phones). It provides a Faster and Easier way for Development.

Grid Large

Bootstrap Grid is a layout system that uses a 12-column grid to style a website. When the screen size is ≥992 px, a large grid is applied, and the elements align accordingly to the screen size using an auto-column layout. We can also specify the variable width of each element by mentioning the number along with the class, for example, .container-lg-4. If the screen size is less than 992 px, then the element takes up 100% width of the screen.

Breakpoint Description Size (px)
xs Extra Small (default) < 576
sm Small ≥ 576
md Medium ≥ 768
lg Large ≥ 992
xl Extra Large ≥ 1200
xxl Extra Extra Large ≥ 1400

Syntax:

<tag_name  class="class-lg">Content of the element </tag_name>

Grid Large with Equal Size and Using Only Large

Example: Illustration of Grid Large with Equal Size and using Only Grid Large in Bootstrap 5.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid medium</title>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
            integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="
            crossorigin="anonymous">
      </script>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
             integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98="
          crossorigin="anonymous">
    <style>
        [class*="col"],
        h2,
        p {
            padding: 1rem;
            background-color: green;
            border: 2px dashed #f3f3f3;
            color: #fff;
        }
    </style>
</head>
 
<body>
    <div class="container text-center ">
        <h2>Welcome to GeeksforGeeks</h2>
        <p>Equal width </p>
        <div class="row">
            <div class="col-lg">HTML</div>
            <div class="col-lg">HTML</div>
            <div class="col-lg">HTML</div>
            <div class="col-lg">HTML</div>
        </div>
        <div class="row">
            <div class="col-lg">CSS</div>
            <div class="col-lg">CSS</div>
            <div class="col-lg">CSS</div>
            <div class="col-lg">CSS</div>
        </div>
        <div class="row">
            <div class="col-lg">JavaScript</div>
            <div class="col-lg">JavaScript</div>
            <div class="col-lg">JavaScript</div>
            <div class="col-lg">JavaScript</div>
        </div>
 
    </div>
</body>
 
</html>
 






                        










Output:


ghy


Auto Layout Column


Example: Illustration of Auto Layout column using Boostrap






HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


 


<head>


    <meta charset="UTF-8">


    <meta name="viewport"


          content="width=device-width, initial-scale=1.0">


    <title>Grid medium</title>


    <script src=


"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"


            integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8="


            crossorigin="anonymous"></script>


    <link rel="stylesheet" href=


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


             integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98="


          crossorigin="anonymous">


    <style>


        [class*="col"],


        h2,


        p {


            padding: 1rem;


            background-color: green;


            border: 2px solid #fff;


            color: #fff;


        }


    </style>


 


</head>


 


<body>


    <div class="container text-center ">


        <h2>Welcome to GeeksforGeeks</h2>


        <p>Variable width content</p>


        <div class=" row">


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                HTML


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                HTML


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                HTML


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                HTML


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                CSS


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                CSS


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                CSS


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                CSS


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                JavaScript


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                JavaScript


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                JavaScript


            </div>


            <div class="col-xl-2 col-lg-3 


                        col-md-4 col-sm-6 col-xs-12">


                JavaScript


            </div>


        </div>


    </div>


</body>


 


</html>



















                        







                        










Output:


ghy


Explanation: 


In each row ,12 column elements are used.Each element contains classes to align the element with the respective screen size.For example when screen size is large i.e greater than 992px ,then each row has 4 columns according to the class col-lg-3 .As we reduce the screen size the number of column reduces and occupies 12 units.


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Grid XLarge
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Grid system Grid tiers
            

        
    
        
            

                How to use grid element using the grid auto placement rules?
            

        
    
        
            

                How to make a grid without calling CSS Grid property ?
            

        
    
        
            

                Pure CSS Regular Grid vs Responsive Grid
            

        
    
        
            

                How to write the bootstrap media queries for very large screens ?
            

        
    
        
            

                How do we create large button groups in Bootstrap ?
            

        
    
        
            

                Bootstrap Grid System
            

        
    
        
            

                How to Apply Bootstrap Grid for Inline Elements ?
            

        
    
        
            

                BootStrap 5 Grid System Stacked to Horizontal
            

        
    
        
            

                Bootstrap 5 Layout Form Grid
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        pritamfulari27                                

                            

                            

            
                                

                            

                                                                    

                                        
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