❮ Bootstrap V2 Forms Bootstrap Typography ❯

Bootstrap Grid System

Introduction

In this tutorial, you will learn how to use Bootstrap to create a grid system.

As you may know, in graphic design, a grid system is a two-dimensional structure consisting of intersecting horizontal and vertical axes used to organize content. It is widely applied in layout design and content structure in graphic design. In web design, it is an effective method to create consistent layouts quickly and efficiently using HTML and CSS. Therefore, the grid system has become an important component/module of the framework or workflow in web design.

Simply put, in web design, we use HTML and CSS to create rows and columns to form a grid, and the columns contain the actual content.

Starting from version 2.3.2, Bootstrap offers two types of grids. The default grid system is 940px wide with 12 columns. You can add responsive stylesheets to adjust its width to 724px and 1170px as the viewport changes.

There is also a fluid grid system, which is percentage-based rather than pixel-based. It can be extended to be as responsive as the default fixed grid. In this tutorial, we will discuss the default grid through some examples, and the fluid grid system will be explained in a separate tutorial.

Please download the latest version of Bootstrap files from "http://twitter.github.io/bootstrap/assets/bootstrap.zip". You can learn about the file structure in our Getting Started tutorial.

Getting Started with the Default Grid

Let's start with a basic HTML structure and see how to apply the default grid on it.

<!DOCTYPE html>
<html>
<head>
    <title>Example of Bootstrap Fixed Layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

Bootstrap uses the CSS class "row" to create horizontal rows and the CSS class "spanx" (where x ranges from 1 to 12) to create vertical columns. Using these, you can create a three-column grid (each column containing some text content) as shown in the following HTML:

<!DOCTYPE html>
<html>
<head>
<title>Example of Bootstrap Fixed Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">

</div>
</div>
</body>
</html>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> <div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>
</div>  
</div>
</body>
</html>

Below is a graphical representation of the grid system

In this way, we have created a three-column grid by using the "span4" class for each column. The "container" class is used to hold the entire structure. You can view an online example here. From this point, we can derive the general syntax for creating CSS classes for a given number of columns.

General Syntax for Creating a Grid:

<div class="row">
<div class="spanx">
inline elements like span, block-level elements like p, div.
</div>
repeat <div class="spanx"> y times.

Where y is the number of columns you want to create and x equals the sum of 12 (which is the maximum number of columns you can create). x must be a positive integer and the value must range from 1 to 12.

For example, if you have three equal-width columns, each with class="span4", but if you want the first column to be larger than the other two, the first column can use class="span6" and the other two columns can use class="span3".

How to Create Rows in a Fixed Grid

Next, before we move on to other examples, let's look at the CSS rules used to create rows and columns in a fixed grid.

The row class looks like this

.row {
    margin-left: -20px;
    *zoom: 1;
}

Setting the left margin to negative 20px and setting "zoom: 1;". The "" indicates that the zoom property is set to 1 for all elements, used to fix bugs in IE6/7. Setting the zoom property to 1, which sets an internal property called hasLayout, is used to fix many scaling/rendering issues in IE6/7.

.row:before,
.row:after {
    display: table;
    line-height: 0;
    content: "";
}

Bootstrap uses the preceding CSS code to create rows. It uses the ":before" and ":after" CSS properties. These are pseudo-elements. ":before" is used to insert some content before the target element, and ":after" is used to insert some content after the target element. "display:table;" makes the element render as a table. By setting "line-height: 0;" to ensure that each row does not have its own line height, and using 'content: ""' to ensure that no content is inserted before or after the element.

Then use the following rule to ensure that there are no floating elements on either side of the given element.

.row:after {
    clear: both;
}

How to Create Columns in a Fixed Grid

[class*="span"] {
    float: left;
    min-height: 1px;

This is the CSS rule to be used. '[class*="span"]' selects all elements whose class attribute value starts with 'span'. Now use "float: left;" to position each column next to each other. Use "min-height: 1px;" to give all columns a minimum height of 1px, and "margin-left: 20px;" to set the left margin to 20px.

Use separate CSS rules to set column widths. Specifically as shown in the table below:

| CSS Code | Explanation |
| --- | --- |
| .span12 {<br>    width: 940px;<br>} | If the row has a single column, the column width is 940px. |
| .span11 {<br>    width: 860px;<br>} | If the row has a column merged from 11 columns, the column width is 860px. |
| .span10 {<br>    width: 780px;<br>} | If the row has a column merged from 10 columns, the column width is 780px. |
| .span9 {<br>    width: 700px;<br>} | If the row has a column merged from 9 columns, the column width is 700px. |
| .span8 {<br>    width: 620px;<br>} | If the row has a column merged from 8 columns, the column width is 620px. |
| .span7 {<br>    width: 540px;<br>} | If the row has a column merged from 7 columns, the column width is 540px. |
| .span6 {<br>    width: 460px;<br>} | If the row has a column merged from 6 columns, the column width is 460px. |
| .span5 {<br>    width: 380px;<br>} | If the row has a column merged from 5 columns, the column width is 380px. |
| .span4 {<br>    width: 300px;<br>} | If the row has a column merged from 4 columns, the column width is 300px. |
| .span3 {<br>    width: 220px;<br>} | If the row has a column merged from 3 columns, the column width is 220px. |
| .span2 {<br>    width: 140px;<br>} | If the row has a column merged from 2 columns, the column width is 140px. |
| .span1 {<br>    width: 60px;<br>} | The single column width is 60px. |

## Bootstrap Default Grid Example

This example demonstrates how to create 1 column, 2 columns, 6 columns, 12 columns, and 4 columns (in that order).

It's also worth noting that all created columns are surrounded by the "container" class, which is used to create a fixed layout with Bootstrap.

## Example

<html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap Grid System Example - w3cschool Bootstrap Tutorial</title> <meta name="description" content="Creating a 16 columns Grid with Bootstrap. Learn with examples to create a Grid System in Bootstrap."> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <style> .span12 h1{color:#FE6E4C; font-weight: bold; padding: 5px;} h3 {margin: 10px 0 10px 0;} </style> </head> <body> <div class="container"> <div class="row"> <div class="span12"> <h1>w3cschool.cc is a web design and development tutorial.</h1> </div> </div> <div class="row"> <div class="span12">

W3Cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content. With 3000+ unique content pages and thousands of examples, we are comprehensive. We have online practice editors to play around with the example codes.

Some of the topics and more...:

Social networking sites to share:
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/orkut.png" width="50" height="55" alt="Orkut logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/ipad.png" width="50" height="53" alt="iPad logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/digo.png" width="50" height="54" alt="Digo logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/zapface.png" width="51" height="53" alt="Zapface logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/facebook.png" width="48" height="53" alt="Facebook logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/netvibes.png" width="51" height="53" alt="Netvibes logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/linkedin.png" width="49" height="54" alt="LinkedIn logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/newsvine.png" width="48" height="53" alt="Newsvine logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/blogger.png" width="51" height="53" alt="Blogger logo" /></p> 
</div>
<div class="span1">
    <p><img decoding="async" loading="lazy" src="images/reditt.png" width="48" height="57" alt="Reddit logo" /></p> 
</div>
</div>
<div class="row">
<div class="span3">
    <h3>Frontend Development:</h3> 
    <p>HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript</p>
</div>
<div class="span3">
    <h3>Backend Development:</h3> 
    <p>PHP, Ruby, Python, Java, ASP.NET, SCALA</p>
</div>

<div class="span3"> <h3>Database Management:</h3> <p>SQL, MySQL, PostgreSQL, NoSQL, MongoDB</p> </div> <div class="span3"> <h3>APIs, Tools, and Tips:</h3> <p>Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG</p> </div> </div> </div> </body> </html>


## What You Will Create

## View Online

[View the example above in a different browser window.](../try/tryit.php?filename=bootstrap-example-grid-system)

[Click here to download all HTML, CSS, JS, and image files for the example above.](https://www.tutorialpro.org/try/bootstrap/twitter-bootstrap-gridsystem-example.zip)

## Adding Responsiveness to the Default Grid

If you want to add responsive capabilities to Bootstrap's default grid, simply add the following after the native CSS in your HTML file:


To see the default grid with responsiveness, [click here to view the online demo](../try/tryit.php?filename=bootstrap-example-grid-system-with-responsive-features). [Click here to download the code](https://www.tutorialpro.org/try/bootstrap/twitter-bootstrap-grid-system-with-responsive-features-example.zip).

The default grid system becomes responsive under two conditions. When the viewport (the available space for rendering the grid) is greater than 1200px [obtained through @media (min-width: 1200px)], and when the viewport is greater than 768px but less than 979px [set through @media (min-width: 768px) and (max-width: 979px)].

## Offset Columns: Default Grid

By using offsets, you can move columns to the right of their original positions. This is achieved by adding left margins to the columns. With Bootstrap, you can use the "offsetx" (where x is a positive integer) class along with the "spany" (where y is a positive integer) class. Depending on the value of 'x' in 'offsetx', the relevant column moves to the right by 'x' times the width of a column.

The widths of the offsets are defined in the Bootstrap CSS. The highest left margin for offset12 is 980px, and the lowest left margin for offset1 is 100px.

Since the default grid system is pixel-based, when applying offsets, you must know the pixels you want to use for the offset and the pixels you want to use for the column. The sum of these two must not exceed the number of pixels in your horizontal viewport.

In the following example, we will create a two-column grid. Here, we move the left column to the right by 4 columns. The HTML code is shown below:

## Example


You can add responsive CSS by appending native CSS, or you can add responsiveness to the default grid by using offset columns.

## Nested Columns: Default Grid

With Bootstrap's default grid, columns can be nested. You simply need to create a row within a column and create the number of columns you want nested within that row. At the same time, you must remember the total number of columns used to nest other columns, ensuring it does not exceed the number of columns mentioned when creating the parent column.

The following example demonstrates how to nest columns within Bootstrap's default grid.

## Example

<div class="container"> <div class="row"> <div class="span7"> <div class="row"> <div class="span4"> ``` In the example above, within the container, there are two columns defined as 'class="span7"' and 'class="span5"', making a total of 12 columns. Now, we add a row within the left column and create two more columns, defined as 'class="span4"' and 'class="span3"'. Thus, it adheres to the total number of columns stipulated by its parent column (7=4+3).

You can also add responsive capabilities here.

Conclusion

In this tutorial, we have discussed the default grid system of Bootstrap. This tutorial is based on Bootstrap V2.3.2. Below is a summary of the key points covered in this tutorial:

Bootstrap's default grid system is 940px wide and includes 12 columns.
In the grid, rows are created with 'class="row"', and columns are created with 'class="spanx"', where x is a positive integer. The sum of all columns x must not exceed 12.
By adding Bootstrap's responsive CSS, you can add responsiveness to the default grid.
Use offsets to create extra space in columns. By using 'class="offsetx"', where x is a positive integer. If you use offsets, the total number of columns, including the offsets used, must not exceed 11.
Columns can be nested. If nested columns are used, when calculating the total number of columns in the grid (a row in the container), nested columns must also be included.
Offsets can also be used in nested columns.

❮ Bootstrap V2 Forms Bootstrap Typography ❯