All for Joomla All for Webmasters

Bootstrap Grid

Wikipedia says:

“In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.”


Bootstrap Grid System

The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns individually or you can groups the columns together to create wider columns.

 

Bootstrap Grid System is responsive and the columns are re-arranged automatically according to the screen size.


Grid Classes:

There are four classes in Bootstrap Grid System:

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

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>

Follow the below instructions while creating a Bootstrap Grid:

  • Create a row (<div class=”row”>).
  • Add the number of columns, you want in the grid (tags with appropriate .col-*-* classes).
  • Note that numbers in .col-*-* should always add up to 12 for each row.

Bootstrap Grid Example

For equal columns:

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Grid Example</h1>
  10. <div class=“row”>
  11.   <div class=”col-md-3″style=”background-color:lavender;”>Rahul</div>
  12.   <div class=”col-md-3″style=”background-color:lavenderblush;”>Vijay</div>
  13.   <div class=”col-md-3″style=”background-color:lavender;”>Kartik</div>
  14.   <div class=”col-md-3″style=”background-color:lavenderblush;”>Ajeet</div>
  15. </div>
  16. </div>
  17.  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  18.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  19.   </body>
  20. </html>

For unequal columns:

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3.   <head>
  4.      <title>Job</title>
  5.      <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>
  6.   </head>
  7.   <body>
  8. <div class=“container”>
  9.   <h1>Grid Example</h1>
  10. <div class=“row”>
  11.   <div class=”col-md-1″style=”background-color:lavender;”>Rahul</div>
  12.   <div class=”col-md-2″style=”background-color:lavenderblush;”>Vijay</div>
  13.   <div class=”col-md-4″style=”background-color:lavender;”>Kartik</div>
  14.   <div class=”col-md-5″style=”background-color:lavenderblush;”>Ajeet</div>
  15. </div>
  16. </div>
  17. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
  18.   <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
  19.   </body>
  20. </html>
PinIt
submit to reddit

Leave a Reply

Top