Skip to main content

Bootstrap Grid System guidance

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
 span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:
  • xs (for phones - screens less than 768px wide)
  • sm (for tablets - screens equal to or greater than 768px wide)
  • md (for small laptops - screens equal to or greater than 992px wide)
  • lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.

Grid System Rules

Some Bootstrap grid system rules:
  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
  • Column widths are in percentage, so they are always fluid and sized relative to their parent element

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:
<div class="container">
  <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>
  <div class="row">
    ...
  </div>
</div>

So, to create the layout you want, create a container (<div class="container">). Next, create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Below we have collected some examples of basic Bootstrap grid layouts.

Three Equal Columns example:-


<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
</body>
</html>

Two Unequal Columns:-

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
</body>
</html>

We will create a basic grid system that starts out stacked on extra small devices, before becoming horizontal on larger devices.

Example: Stacked-to-horizontal

<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container">
      
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      firts column
    </div>
    <div class="col-sm-6" style="background-color:pink;">
       second column   
    </div>
  </div>
</div>
    
</body>
</html>
Tip: The numbers in the .col-sm-* classes indicates how many columns the div should span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns, .col-sm-6 spans 6 columns, etc.

Note: Make sure that the sum always adds up to 12!
Tip: You can turn any fixed-width layout into a full-width layout by changing the .container class to .container-fluid.

Bootstrap Grid - Small Devices
Tip: Small devices are defined as having a screen width from 768 pixels to 991 pixels.
For small devices we will use the .col-sm-* classes.

<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
    
</body>
</html>

Using Only Medium

In the example below, we only specify the .col-md-6 class (without .col-sm-*). This means that medium and large devices will split 50%/50% - because the class scales up. However, for small devices, it will stack vertically (100% width):-
<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-6" style="background-color:yellow;">
      first column
    </div>
    <div class="col-md-6" style="background-color:pink;">
      second column
    </div>
  </div>
</div>
    
</body>
</html>

Bootstrap Grid - Large Devices:-


Using Only Large

In the example below, we only specify the .col-lg-6 class (without .col-md-* and/or .col-sm-*). This means that large devices will split 50%/50%. However, for medium AND small devices, it will stack vertically (100% width):

<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-lg-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
    
</body>
</html>

The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices:


<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
    
</body>
</html>

Bootstrap Grid Examples for practice:-

Two Columns With Two Nested Columns


The following example shows how to get two columns starting at tablets and scaling to large desktops, with another two columns (equal widths) within the larger column (at mobile phones, these columns and their nested columns will stack):

<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-8" style="background-color:lavender;">.col-sm-8
      <div class="row">
        <div class="col-sm-6" style="background-color:lightcyan;">.col-sm-6</div>
        <div class="col-sm-6" style="background-color:lightgray;">.col-sm-6</div>
      </div>
    </div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
  </div>
</div>
    
    
</body>
</html>

Mixed: Mobile, Tablet And Desktop:-

<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="row">
  <div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
  <div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
    
    
</body>
</html>

Clear Floats

Clear floats (with the .clearfix class) at specific breakpoints to prevent strange wrapping with uneven content:
Example:-
<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>

Push And Pull - Change Column Ordering

Change the order of the grid columns with .col-md-push-* and .col-md-pull-* classes:

<!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/3.3.7/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">
  <h1>Push and Pull</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4 col-sm-push-8" style="background-color:lavender;">.col-sm-4 .col-sm-push-8</div>
    <div class="col-sm-8 col-sm-pull-4" style="background-color:lavenderblush;">.col-sm-8 .col-sm-pull-4</div>
  </div>
</div>
    
    
    
</body>
</html>



Labels

Labels:

Comments

  1. Suruchi Pandey9 June 2018 at 02:53

    Great deal of information been shared by you, I am very happy to see your article. Thank you for the post.
    Web Design Company | Web development Lucknow

    ReplyDelete
  2. Unknown9 June 2018 at 04:54

    great information about Web Designing Training In Chandigarh keep Share more
    Thank you for Sharing

    ReplyDelete
  3. Unknown15 September 2018 at 02:42

    Nice blog..! I really loved reading through this article. Thanks for sharing such a amazing post with us and keep blogging...
    it outsourcing companies in uae
    it solutions provider dubai

    ReplyDelete
  4. Unknown6 November 2018 at 00:58

    Thanks for sharing this information "Bootstrap Grid System"

    Website Designing Services in Delhi

    ReplyDelete

Post a Comment

Popular posts from this blog

XSLT QUICK GUIDE

E X tensible  S tylesheet  L anguage  T ransformation commonly known as XSLT is a way to transform the XML document into other formats such as XHTML. XSL Before learning XSLT, we should first understand XSL which stands for E X tensible  S tylesheet  L anguage. It is similar to XML as CSS is to HTML. Need for XSL In case of HTML document, tags are predefined such as table, div, and span; and the browser knows how to add style to them and display those using CSS styles. But in case of XML documents, tags are not predefined. In order to understand and style an XML document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet Language. An XSL document specifies how a browser should render an XML document. Following are the main parts of XSL − ·          XSLT  − used to transform XML document into various other types of document. ·       ...
8 comments
Read more

Important Javascript and Jquery Code for web development

Important  Javascript and Jquery  Code for web development: (1)how to make multiple preview of single  image: http://phpdevelopmenttricks.blogspot.in/2017/01/how-to-make-multiple-preview-of-single.html (2)javascript code  for confirmation before delte and update:  http://phpdevelopmenttricks.blogspot.in/2016/12/javascript-code-for-confirmation-before.html (3)how to pass image file  with text to php using Ajax: http://phpdevelopmenttricks.blogspot.in/2016/12/how-to-pass-image-file-with-text-to-php.html (4)how to preview  form entered  value  in text: http://phpdevelopmenttricks.blogspot.in/2016/12/preview-form-entered-value-in-text.html (5)Drag and Drop  file  upload  : http://phpdevelopmenttricks.blogspot.in/2016/12/drag-and-drop-file-upload-using.html (6)write jquery code for image preview as well as uploading of image with php code: http://phpdevelopmenttricks.blogspot.in/2017/...
7 comments
Read more

Javascript countdown-timer-reloading-again-on-refreshing page

(1)write code  timer.html  file: <html> <head> <title> timer example by om sir</title> </head> <body> <div id="divCounter"></div> <script> var hoursleft = 0; var minutesleft = 35; var secondsleft = 0; var finishedtext = "Countdown finished!"; var end; if(localStorage.getItem("end")) {     end = new Date(localStorage.getItem("end")); } else {     end = new Date();     end.setMinutes(end.getMinutes()+minutesleft);     end.setSeconds(end.getSeconds()+secondsleft); } var counter = function () {     var now = new Date();     var diff = end - now;     diff = new Date(diff);     var sec = diff.getSeconds();     var min = diff.getMinutes();     if (min < 10) {         min = "0" + min;     }     if (sec < 10) {         sec = "0" + sec; ...
1 comment
Read more