My Blog

Bootstrap Grid

—

by

Awais Farooq
in

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

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:

<div class="row">  

  <div class="col-*-*"></div>  

</div>  

<div class="row">  

  <div class="col-*-*"></div>  

  <div class="col-*-*"></div>  

  <div class="col-*-*"></div>  

</div>  

<div class="row">  

  ...  

</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:

    <!DOCTYPE html>  

<html lang="en">  

  <head>  

     <title>Job</title>  

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  

  </head>  

  <body>  

  

<div class="container">  

  <h1>Grid Example</h1>  

  

<div class="row">  

  <div class="col-md-3"style="background-color:lavender;">Rahul</div>  

  <div class="col-md-3"style="background-color:lavenderblush;">Vijay</div>  

  <div class="col-md-3"style="background-color:lavender;">Kartik</div>  

  <div class="col-md-3"style="background-color:lavenderblush;">Ajeet</div>  

</div>  

  

</div>  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

  </body>  

</html>

    For unequal columns:

    <!DOCTYPE html>  

<html lang="en">  

  <head>  

     <title>Job</title>  

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  

  </head>  

  <body>  

  

<div class="container">  

  <h1>Grid Example</h1>  

  

<div class="row">  

  <div class="col-md-1"style="background-color:lavender;">Rahul</div>  

  <div class="col-md-2"style="background-color:lavenderblush;">Vijay</div>  

  <div class="col-md-4"style="background-color:lavender;">Kartik</div>  

  <div class="col-md-5"style="background-color:lavenderblush;">Ajeet</div>  

</div>  

  

</div>  

  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  

  </body>  

</html> 

    Bootstrap 4 Grid Classes

    There are 5 classes in Bootstrap 4 grid system.

    • .col- (extra small devices – screen width less than 576px)
    • .col-sm- (small devices – screen width equal to or greater than 576px)
    • .col-md- (medium devices – screen width equal to or greater than 768px)
    • .col-lg- (large devices – screen width equal to or greater than 992px)
    • .col-xl- (xlarge devices – screen width equal to or greater than 1200px)

    You can also combine the above classes to create more dynamic and flexible layouts.

    Structure of Bootstrap 4 Grid

    See the basic structure of Bootstrap 4 grid:

    <!-- Control the column width, and how they should appear on different devices -->  

<div class="row">  

  <div class="col-*-*"></div>  

  <div class="col-*-*"></div>  

</div>  

<div class="row">  

  <div class="col-*-*"></div>  

  <div class="col-*-*"></div>  

  <div class="col-*-*"></div>  

</div>  

  

<!-- Or let Bootstrap automatically handle the layout -->  

<div class="row">  

  <div class="col"></div>  

  <div class="col"></div>  

  <div class="col"></div>  

</div> 

      First create a row (<div class=”row”>) then add the desired number of columns (tags with appropriate .col-*-* classes).

      Here: In .col-*-* , the first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should add up to 12 for each row.

      Equal Columns Example

      Let’s take an example to see how to create an equal width column on all devices and screen widths:

      Example

      <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap Example</title>  

  <meta charset="utf-8">  

  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  

</head>  

<body>  

  

<div class="container-fluid">  

  <h2>Three equal-width columns</h2>  

  <div class="row">  

    <div class="col" style="background-color:lavender;">.col</div>  

    <div class="col" style="background-color:orange;">.col</div>  

    <div class="col" style="background-color:lavender;">.col</div>  

  

  </div>  

</div>  

  

</body>  

</html> 

      Unequal Column Example

      Let’s take an example to see how to create an unequal width column which supports tablets and scaling to large extra desktops:

      Example:

      <!DOCTYPE html>  

<html lang="en">  

<head>  

  <title>Bootstrap Example</title>  

  <meta charset="utf-8">  

  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  

</head>  

<body>  

  

<div class="container-fluid">  

  <h1>Unequal Columns</h1>  

  <p>Resize the browser window to see the effect.</p>  

  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>  

  <div class="row">  

    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>  

    <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>  

  </div>  

</div>  

      

</body>  

</html> 

        Comments

        Leave a Reply

        Your email address will not be published. Required fields are marked *