Twitter Bootstrap Grid System tutorial
has average rating
7
out of 10.
Total 387 users rated.
Introduction
In this tutorial, you will learn how to use Twitter Bootstrap toolkit to create a Grid System.
The default Grid System in Twitter Bootstrap is 940px wide and 12 column. It has four responsive variations for phone, tablet portrait, table landscape and small desktops, and large wide screen desktops.
Explanation
On line number 123 to 133 and again from line number 207 to 260 of bootstrap.css (located under docs/assets/css) of Bootstrap v2.0.1 contains styles for a class defined as row.
Another set of classes as .span1, .span2, ..... , span12 are defined for creating columns from line number 134 to 173 of the same CSS.
Class .row creates rows where as .span classes create columns.
So, if you want to create a single column grid, following is the syntax. This column spans across all the of 12 columns of the Twitter Bootstrap Grid.
<div class="row">
<div class="span12">
inline elements like span, block level elements like p, div.
</div>
For building a two column grid, following is the syntax.
<div class="row">
<div class="span6">
inline elements like span, block level elements like p, div.
</div>
<div class="span6">
inline elements like span, block level elements like p, div.
</div>
General syntax for creating grid is :
<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 is 12/y.
Both y and x must be positive integers, their values must be 1 through 12.
Example of Twitter Bootstrap Grid
This example shows how to create 1 column, 2 columns, 6 columns, 12 columns and 4 columns (in that order).
Also note that, all of the columns created are wrapped with "container" class, which is used to create a fixed layout using Twitter Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Grid System Example - w3resource Twitter Bootstrap Tutorial</title>
<meta name="description" content="Creating a 16 columns Grid with Twitter Bootstrap. Learn with examples to create a Grid System in Twitter Bootstrap.">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<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>w3resource.com is a web design and development tutorial.</h1>
</div>
</div>
<div class="row">
<div class="span3">
<p><img src="/images/w3logo6.png" width="149" height="52" alt="w3resource logo" /></p>
</div>
<div class="span9">
<p>w3resource 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.</p>
</div>
</div>
<div class="row">
<div class="span12">
<h3>Some of the topics and more... :</h3>
</div>
<div class="span2">
<p><img src="images/html5_logo.png" width="140" height="86" alt="html5 logo" /></p>
</div>
<div class="span2">
<p><img src="images/javascript-logo.png" width="140" height="86" alt="javascript logo" /></p>
</div>
<div class="span2">
<p><img src="images/json.gif" width="140" height="86" alt="JSON logo" /></p>
</div>
<div class="span2">
<p><img src="images/php.png" width="140" height="86" alt="PHP logo" /></p>
</div>
<div class="span2">
<p><img src="images/mysql-logo.png" width="140" height="86" alt="MySQL logo" /></p>
</div>
<div class="span2">
<p><img src="images/browser-statistics.png" width="140" height="86" alt="Browser Statistics logo" /></p>
</div>
</div>
<div class="row">
<div class="span12">
<h3>Social networking sites to share:</h3>
</div>
</div>
<div class="row">
<div class="span1">
<p><img src="images/gplus.png" width="50" height="49" alt="GPlus logo" /></p>
</div>
<div class="span1">
<p><img src="images/twitter.png" width="50" height="38" alt="Twitter logo" /></p>
</div>
<div class="span1">
<p><img src="images/orkut.png" width="50" height="55" alt="Orkut logo" /></p>
</div>
<div class="span1">
<p><img src="images/ipad.png" width="50" height="53" alt="iPad logo" /></p>
</div>
<div class="span1">
<p><img src="images/digo.png" width="50" height="54" alt="Digo logo" /></p>
</div>
<div class="span1">
<p><img src="images/zapface.png" width="51" height="53" alt="Zapface logo" /></p>
</div>
<div class="span1">
<p><img src="images/facebook.png" width="48" height="53" alt="facebook logo" /></p>
</div>
<div class="span1">
<p><img src="images/netvibes.png" width="51" height="53" alt="Netvibes logo" /></p>
</div>
<div class="span1">
<p><img src="images/linkedin.png" width="49" height="54" alt="LinkedIn logo" /></p>
</div>
<div class="span1">
<p><img src="images/newsvine.png" width="48" height="53" alt="Newsvine logo" /></p>
</div>
<div class="span1">
<p><img src="images/blogger.png" width="51" height="53" alt="Blogger logo" /></p>
</div>
<div class="span1">
<p><img src="images/reditt.png" width="48" height="57" alt="Reddit logo" /></p>
</div>
</div>
<div class="row">
<div class="span3">
<h3>Fontend Development:</h3>
<p>HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript</p>
</div>
<div class="span3">
<h3>Backend Developemt:</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>
This is what you will create
View Online
View the above example in a different browser window.
You may download all the HTML, CSS, JS and image files used in our tutorials here.
