Post
Ask Question

An Overview Of Bootstrap Grid System

Prerequisites
  • Bootstrap package
  • Notepad or Notepad++
  • Any browser
Bootstrap Grid System
  • In graphic designing, a Grid is a structure (usually two-dimensional) of intersecting straight lines (horizontal, vertical).
  • In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.
  • Bootstrap Grid system allows the developers to use a maximum of 12 columns in a web page. All 12 columns are used individually or grouped to create a wide column. If you want to split the columns as per your wish, still you can't split them in more than 12 columns.
Bootstrap Grid system
  • Grid System is responsive and the columns are re-arranged automatically according to the screen size.
Grid Classes
 
There are four classes that are used in Bootstrap Grid System.
  • xs ( mobiles phone viewport)
  • sm ( tablets viewport)
  • md( desktops or laptops viewport)
  • lg( big screen desktops viewport)
You can combine the above classes to create more dynamic and flexible layouts.
 
Basic structure of a Bootstrap Grid
  1. <div class="row">    
  2.   <div class="col-*-*"></div>    
  3. </div>    
  4. <div class="row">    
  5.   <div class="col-*-*"></div>    
  6.   <div class="col-*-*"></div>    
  7.   <div class="col-*-*"></div>    
  8. </div>    
  9. <div class="row">    
  10.   ...    
  11. </div>    
Instructions while creating a Bootstrap Grid
  • Create a row (<div class="row">).
  • To add the number of columns and the type of class you want (tags with appropriate .col-*-* classes), the 1st star position is to create what type of class you want. The 2nd star position is used to create how many columns you want.
Important keywords
  • Well -  Well is used to make the Grid visible
  • Without well - the normal View of Grid ( grid not visible)
  • Container- fluid - the Grid fillss the entire screen with the help of this keyword
  • Container - it shows the Grid with some margin at right and left side.
Coding for extra small devices
  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.         <title>Bootstrap Grid system</title>  
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  8.     </head>  
  9. <body>  
  10. <div class="container">  
  11.      <div class="row">  
  12.         <div class="col-sm-9 well">col-9</div>  
  13.          <div class="col-sm-3 well">col-3</div>  
  14.      </div>  
  15.    </div>  
  16.  <div class="container">  
  17.      <div class="row">  
  18. <strong>With background colour</strong>  
  19.          <div class="col-sm-9 well"  style="background-color:pink">col-9</div>  
  20.         <div class="col-sm-3 well"  style="background-color:cyan">col-9</div>  
  21.     </div>  
  22.    </div>  
  23. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  24.     <script type="text/css" src="js/jquery"></script>   
  25. </body>  
  26. </html>
 
Bootstrap Grid
 
Coding for medium sized devices
  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.         <title>Bootstrap grid system</title>  
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  
  8.     </head>  
  9. <body>  
  10. <div class="container-fluid">  
  11.     <div class="row">  
  12. <div class="col-md-6 well">col-6</div>  
  13.          <div class="col-md-6 well">col-6</div>  
  14.      </div>  
  15.    </div>  
  16.     <div class="container">  
  17.     <div class="row">  
  18.         <div class="col-md-9 well">col-6</div>  
  19.   <div class="col-md-3 well">col-6</div>  
  20.     </div>  
  21.    </div>  
  22.   <div class="container">  
  23.   <div class="row">  
  24. <strong>With background colour</strong>  
  25.          <div class="col-md-6 well"  style="background-color:pink">col-6</div>  
  26.          <div class="col-md-6 well"  style="background-color:cyan">col-6</div>  
  27.     </div>  
  28.    </div>  
  29. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  30. <script type="text/css" src="js/jquery"></script>   
  31. </body>  
  32. </html>
 
Bootstrap Grid
 
Coding for large devices
  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.         <title>Bootstrap grid system</title>  
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  
  8.     </head>  
  9. <body>  
  10. <div class="container-fluid">  
  11.   <div class="row">  
  12. <div class="col-lg-12 well">col-12</div>  
  13.     </div>  
  14.    </div>  
  15.     <div class="container">  
  16.     <div class="row">  
  17.         <div class="col-lg-12 well">col-12</div>  
  18.     </div>  
  19.    </div>  
  20.   <div class="container">  
  21.     <div class="row">  
  22. <strong>With background colour</strong>  
  23.         <div class="col-lg-12 well"  style="background-color:pink">col-12</div>  
  24.     </div>  
  25.    </div>  
  26. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  27. <script type="text/css" src="js/jquery"></script>   
  28. </body>  
  29. </html>
 
Bootstrap Grid
 
Extra small size
  • It is used for a mobile phone viewport
  • Screen size below 768px
  • No maximum container width
  • Class prefix .col-xs-*
  • Maximum column width auto
Coding 
  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.         <title>Bootstrap grid system</title>  
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  
  8.     </head>  
  9. <body>  
  10. <div class="container-fluid">  
  11.     <div class="row">  
  12. <div class="col-xs-1 well">col-1</div>  
  13.          <div class="col-xs-1 well">col-1</div>  
  14.          <div class="col-xs-1 well">col-1</div>  
  15.          <div class="col-xs-1 well">col-1</div>  
  16.         <div class="col-xs-1 well">col-1</div>  
  17.          <div class="col-xs-1 well">col-1</div>  
  18.          <div class="col-xs-1 well">col-1</div>  
  19.          <div class="col-xs-1 well">col-1</div>  
  20.          <div class="col-xs-1 well">col-1</div>  
  21.          <div class="col-xs-1 well">col-1</div>  
  22.         <div class="col-xs-1 well">col-1</div>  
  23.          <div class="col-xs-1 well">col-1</div>  
  24.     </div>  
  25.    </div>  
  26.    <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  27. <script type="text/css" src="js/jquery"></script>   
  28. </body>  
  29. </html>
 
Bootstrap Grid
 
To create an equal and unequal Grid system, use all the classes.
 
Coding 
  1. <!DOCTYPE html>  
  2. <html >  
  3. <head>  
  4.         <title>Bootstrap Grid System</title>  
  5.         <meta charset="utf-8">  
  6.         <meta name="viewport" content="width=device-width, initial scale=1">  
  7.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"  
  8.     </head>  
  9. <body>  
  10.           
  11. <div class="container">  
  12.   <div class="row">  
  13.   <div class="col-xs-1 well">col-1</div>  
  14.          <div class="col-xs-1 well">col-1</div>  
  15.         <div class="col-xs-1 well">col-1</div>  
  16.         <div class="col-xs-1 well">col-1</div>  
  17.         <div class="col-xs-1 well">col-1</div>  
  18.         <div class="col-xs-1 well">col-1</div>  
  19.          <div class="col-xs-1 well">col-1</div>  
  20.         <div class="col-xs-1 well">col-1</div>  
  21.          <div class="col-xs-1 well">col-1</div>  
  22.          <div class="col-xs-1 well">col-1</div>  
  23.          <div class="col-xs-1 well">col-1</div>  
  24. <div class="col-xs-1 well">col-1</div>  
  25.      </div>  
  26.   </div>  
  27.     <div class="container">  
  28.         <div class="row">  
  29.   <div class="col-sm-2 well">col-2</div>  
  30.              <div class="col-sm-2 well">col-2</div>  
  31.             <div class="col-sm-2 well">col-2</div>  
  32.              <div class="col-sm-2 well">col-2</div>  
  33.   <div class="col-sm-2 well">col-2</div>  
  34.   <div class="col-sm-2 well">col-2</div>  
  35.         </div>  
  36.   </div>  
  37.     
  38. <div class="container">  
  39.      <div class="row">  
  40.  <div class="col-md-4 well">col-4</div>  
  41.          <div class="col-md-4 well">col-4</div>  
  42.         <div class="col-md-4 well">col-4</div>  
  43.    </div>  
  44.  </div>  
  45.  <div class="container">  
  46.         <div class="row">  
  47.              <div class="col-xs-6 well">col-6</div>  
  48.              <div class="col-xs-6 well">col-6</div>  
  49.          </div>  
  50.   </div>  
  51.     
  52.   <div class="container">  
  53.         <div class="row">  
  54.             <div class="col-ls-12 well">col-12</div>  
  55.           </div>  
  56.   </div>  
  57.     
  58.   
  59. <div class="container">  
  60.     <div class="row">  
  61.          <div class="col-md-9 well">col-9</div>  
  62.   <div class="col-xs-3 well">col-3</div>  
  63.       </div>  
  64.   </div>  
  65.     
  66.   <div class="container">  
  67.         <div class="row">  
  68.             <div class="col-md-7 well">col-7</div>  
  69.   <div class="col-sm-5 well">col-5</div>  
  70.          </div>  
  71.     </div>  
  72.   <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  73. <script type="text/css" src="js/jquery"></script>   
  74. </body>  
  75. </html>
 
Bootstrap Grid
 
Conclusion
 
I hope, now you understand how to create a Bootstrap Grid system. Stay tuned for more on Bootstrap.


Similar Articles