Post
Ask Question

Journey With Bootstrap: Day 2 ( Grid System)

Hello Geeks,

I am here with the second day of my journey with bootstrap, today we learn Bootstrap's Grid system. If you have not read my first day's journey with Bootstrap then please first read that from here: Journey With Bootstrap: Day 1.

My first day's journey explained what Bootstrap is, its advantages, history and so on.

Now let's start the second day's journey.

Bootstrap's Grid System

We discussed previously that Bootstrap has the cool feature of being able to resize automatically based on the screen size of devices. We can organize content in multiple columns when using large screen devices but when we are using small-screen devices we need to customize the columns to prevent loss of content and also to look good of our applications or websites.

Bootstrap Grid System

We have four types of screens:

  • col-xs extra small screen size device such as smartphones (<768 px).
  • col-sm small screen size device such as tablets (>=768 px).
  • col-md medium screen size devices such as laptops (>=992 px).
  • col-lg large screen size devices such as computers (>=1200 px).

Bootstrap's grid system are responsive and the columns are re-arranged depending on screen size.

Example of grid system

  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>grid system</title>  
  5.          <link rel="stylesheet" href="css/bootstrap.min.css">  
  6.          <script src="js/bootstrap.min.js"></script>  
  7.          <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.          <style>  
  9.          #border  
  10.          {  
  11.             text-align:center;  
  12.             color:#FFF;  
  13.          }  
  14.          #border1  
  15.          {  
  16.             background-color:#0C9;  
  17.          }  
  18.          #border2  
  19.          {  
  20.             background-color:#99F;  
  21.          }  
  22.          #border3  
  23.          {  
  24.             background-color:#F3C;  
  25.          }  
  26.          #border4  
  27.          {  
  28.             background-color:#9C0;  
  29.          }  
  30.          #border5  
  31.          {  
  32.             background-color:#609;  
  33.          }  
  34.          h3  
  35.          {  
  36.             color:#006;  
  37.          }  
  38.       </style>  
  39.    </head>  
  40.    <body id="border">  
  41.    <h3> Equal Size Column (Medium screens)</h3>  
  42.       <div class="container" >  
  43.          <div class="row" id="border1">  
  44.             <div class="col-md-1">part 1 (size 1)</div>  
  45.             <div class="col-md-1">part 2 (size 1)</div>  
  46.             <div class="col-md-1">part 3 (size 1)</div>  
  47.             <div class="col-md-1">part 4 (size 1)</div>  
  48.             <div class="col-md-1">part 5 (size 1)</div>  
  49.             <div class="col-md-1">part 6 (size 1)</div>  
  50.             <div class="col-md-1">part 7 (size 1)</div>  
  51.             <div class="col-md-1">part 8 (size 1)</div>  
  52.             <div class="col-md-1">part 9 (size 1)</div>  
  53.             <div class="col-md-1">part 10 (size 1)</div>  
  54.             <div class="col-md-1">part 11 (size 1)</div>  
  55.             <div class="col-md-1">part 12 (size 1)</div>  
  56.          </div>  
  57.       </div>  
  58.       <div class="container" id="border2">  
  59.          <div class="row">  
  60.             <div class="col-md-3">part 1 (size 3)</div>  
  61.             <div class="col-md-3">part 2 (size 3)</div>  
  62.             <div class="col-md-3">part 3 (size 3)</div>  
  63.             <div class="col-md-3">part 4 (size 3)</div>  
  64.          </div>  
  65.       </div>  
  66.       <div class="container" id="border3">  
  67.          <div class="row">  
  68.             <div class="col-md-4">part 1 (size 4)</div>  
  69.             <div class="col-md-4">part 2 (size 4)</div>  
  70.             <div class="col-md-4">part 3 (size 4)</div>  
  71.          </div>  
  72.       </div>  
  73.       <div class="container" id="border4">  
  74.          <div class="row">  
  75.             <div class="col-md-6">part 1(size 6)</div>  
  76.             <div class="col-md-6">part 2(size 6)</div>  
  77.          </div>  
  78.       </div>  
  79.       <div class="container" id="border5">  
  80.          <div class="row">  
  81.             <div class="col-md-12">part 1(size 12)</div>  
  82.          </div>  
  83.       </div>  
  84.    <br>  
  85.    <h3> Different Size Column</h3>  
  86.       <div class="container" >  
  87.          <div class="row" id="border1">  
  88.             <div class="col-md-8">part 1 (size 8)</div>  
  89.             <div class="col-md-4">part 2 (size 4)</div>  
  90.          </div>  
  91.       </div>  
  92.       <div class="container" >  
  93.          <div class="row" id="border4">  
  94.             <div class="col-md-5">part 1 (size 5)</div>  
  95.             <div class="col-md-4">part 2 (size 4)</div>  
  96.             <div class="col-md-3">part 3 (size 3) </div>  
  97.          </div>  
  98.       </div>  
  99.       <h3> Equal Size Column (small screens)</h3>  
  100.       <div class="container" >  
  101.          <div class="row" id="border3">  
  102.             <div class="col-xs-4">part 1 (size 5)</div>  
  103.             <div class="col-xs-4">part 2 (size 4)</div>  
  104.             <div class="col-xs-4">part 3 (size 3) </div>  
  105.          </div>  
  106.       </div>  
  107.    </body>  
  108. </html>  
Output

On medium screen:
medium screen

Output on extra small size screen:

different size column

Another Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>grid system</title>  
  5.       <link rel="stylesheet" href="css/bootstrap.min.css">  
  6.       <script src="js/bootstrap.min.js"></script>  
  7.       <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.       <style>  
  9.       #border  
  10.       {  
  11.          text-align:center;  
  12.          color:#FFF;  
  13.       }  
  14.       #border1  
  15.       {  
  16.          background-color:#0C9;  
  17.       }   
  18.       <h3>Different coloumn for small screne and different for medium screen</h3>  
  19.       <div class="container" >  
  20.         <div class="row" id="border5">  
  21.             <div class="col-xs-4 col-md-3">part 1 (size 3)</div>  
  22.             <div class="col-xs-4 col-md-3">part 2 (size 3)</div>  
  23.             <div class="col-xs-4 col-md-3">part 3 (size 3)</div>  
  24.             <div class="col-md-3">part 4 (size 3)</div>  
  25.          </div>  
  26.       </div>  
  27.    </body>  
  28. </html>  
Output

On medium screen size:

Output

On extra small size screen:

Extra small size

Using these example we can understand how Bootstrap's Grid system works.

I hope you enjoying this Journey!
Thank you.


Similar Articles