Sunday, 25 May 2014

Bootstrap 3 Grid System

Bootstrap provide Mobile first fluid and responsive grid system that appropriately scales up to 12 columns as the device or view-port size increases.


It provides predefined grid classes for making layouts for different types of devices like phones(<768px), tablet(≥768px), medium sized desktop(≥992px) and large devices(≥200px).


Example: Creating two columns(of equal width) for medium Sized desktop screen

1) Firstly add the .container class in div which sets maximum width and centring of the layout.

2) After Adding container class, Add another div with .row class. As we know that row in the grid is made up of 12 columns and we are going to create two columns having same width than we have to use .col-md-6 class in both div(Sum of Columns 6+6=12). If we use .col-md-6 class in one div and .col-md-7 in another div than the second div wrap up and come in next row(because here no. of columns in row becomes more than 12 i.e.6+7)

<!DOCTYPE html>
<html>
       <head>
              <title>Grid Example</title>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link href="css/bootstrap.min.css" rel="Stylesheet">
              <style>
             
              </style>
       </head>
       <body>
              <div class="container">
                     <div class="row">
                           <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa. Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p></div>
                           <div class="col-md-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa. Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p></div>
                     </div>
              </div>
              <script js="js/bootstrap.min.js"></script>
       </body>

</html>

Preview:


Example: Multiple Grid System

In Multiple grid system, we use two or more than two predefined grid classes for a single div. For easy understanding, we are going to create an example in which we have 3 content boxes(3 div) of same size(33%/33%/33%) for medium sized devices and when we reduce size or access it with Tablet(Small sized device) than our layout changes to 2 div  of equal width(i.e.50%) and one with 100% width below the first two div.
In this Example, we take 3 Div with multiple grid system. Here, we set .col-md-4 class for all the 3 div which makes it to be visible side by side and of same width for the medium sized desktop(≥992px) and for small screen devices like tablet we use .col-sm-6 class for first 2 div so that on small devices first two div come along side by side and .col-sm-12 for third div which makes it to take the entire width of the container.

<!DOCTYPE html>
<html>
       <head>
              <title>Multiple Grid Example</title>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link href="css/bootstrap.min.css" rel="Stylesheet">
              <style>
             
              </style>
       </head>
       <body>
              <div class="container">
                     <div class="row">
                           <h3>Example of Multiple grid System</h3>
                           <div class="col-sm-6 col-md-4">Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.</div>
                           <div class="col-sm-6 col-md-4">Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.</div>
                           <div class="col-sm-12 col-md-4">Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.Some Text here.</div>
                     </div>
              </div>
              <script js="js/bootstrap.min.js"></script>
       </body>
</html>

Preview for Medium Device desktop:

Preview when viewed on Small Devices Tablet:
Example:Nested Column
For adding Nested column, Add another .row class in the div you want to do partition and then divide the column using .col-md-* as per your need.

<!DOCTYPE html>
<html>
       <head>
              <title>Grid Example</title>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link href="css/bootstrap.min.css" rel="Stylesheet">
              <style>
             
              </style>
       </head>
       <body>
              <div class="container">
                     <div class="row">
                           <div class="col-md-8">
                                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh. Aliquam ut diam posuere, ornare augue eget, dignissim massa. Nullam consectetur fermentum enim sit amet hendrerit. Phasellus commodo ornare aliquam. Vestibulum odio enim, pretium in velit semper, faucibus egestas nunc.</p>
                                  <div class="row">
                                         <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
                                         <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
                                  </div>
                           </div>
                           <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor eleifend nibh at tristique. In sit amet nibh non dolor tempor tincidunt. Mauris aliquet, lacus in lobortis pulvinar, ligula augue venenatis mi, vel adipiscing orci libero ut nisi. Suspendisse lobortis faucibus enim, a ullamcorper nibh.</div>
                     </div>
              </div>
              <script js="js/bootstrap.min.js"></script>
       </body>
</html>

Preview:


Offset:
Offset is required for moving columns towards right side using .col-md-offset-* classes here value of * is in between 1 to 11.

<!DOCTYPE html>
<html>
       <head>
              <title>Grid Example</title>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link href="css/bootstrap.min.css" rel="Stylesheet">
              <style>
             
              </style>
       </head>
       <body>
              <div class="container">
                     <div class="row">
                           <div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
                           <div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
                           <div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
                           <div class="col-md-3"><p style="background-color:silver;padding:20px;">.col-md-3</p></div>
                     </div>
                     <div class="row">
                           <div class="col-md-3 col-md-offset-3"><p style="background-color:silver;padding:20px;">.col-md-3 .col-md-offset-3</p></div>
                     </div>
                     <div class="row">
                           <div class="col-md-5"><p style="background-color:silver;padding:20px;">.col-md-5</p></div>
                           <div class="col-md-3 col-md-offset-2"><p style="background-color:silver;padding:20px;">.col-md-3 .col-md-offset-2</p></div>
                     </div>
              </div>
              <script js="js/bootstrap.min.js"></script>
       </body>
</html>

Preview:


Hope you like it. Thanks

[Download Source code from Google Drive]

 Protected by Copyscape Web Plagiarism Scanner


0 comments:

Post a Comment

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Subscribe us on YouTube

Like us on Facebook

Follow us on Google+