YouTip LogoYouTip

Bootstrap V2 Grid System

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 composed of areas formed by the intersection of horizontal and vertical axes, used to construct content. It is widely used in layout design and content structuring in graphic design. In web design, it is a very effective method for quickly and efficiently creating consistent layouts using HTML and CSS. Therefore, the grid system has become an important component/module of frameworks or workflows in web design. Simply put, in web design, we use HTML and CSS to create rows and columns to implement a grid. And the columns contain the actual content. Since version 2.3.2, Bootstrap provides two types of grids. The default grid system is 940px wide and has 12 columns. You can add a responsive stylesheet to make it adjust its width to 724px and 1170px depending on the viewport. There is also a fluid grid system, which is percentage-based instead of pixel-based. It can be extended to be responsive just like the default fixed grid. In this tutorial, we will discuss the default grid through some examples, and the fluid grid system will be covered 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 related file structure in our (#). Let's start with a basic HTML and see how to apply the default grid to it. Example of Using Bootstrap Fixed Layout Bootstrap uses the CSS class "row" to create horizontal rows and the CSS class "spanx" (where x is a value from 1 to 12) to create vertical columns. Using these two, you can create a three-column grid (each column containing some text content), with the HTML as follows: Example of Using Bootstrap Fixed Layout

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.

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.

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.

Below is a graphical representation of the grid system: ![Image 1: Bootstrap Grid System](#) Thus, 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. (#). From this, we can derive the general syntax for the CSS classes used to create a given number of columns. **General Syntax for Creating a Grid:**
inline elements like span, block level elements like p, div.
repeat
y times. Where y is the number of columns you want to create, and x is the sum that equals 12 (the maximum number of columns you can create). x must be a positive integer, and its value must be between 1 and 12. For example, if you have three equal-width columns, each column would be class="span4". However, if you want the first column to be larger than the other two, the first column could use class="span6", and the other two columns use class="span3". Next, before we proceed to other examples, let's look at the CSS rules used to create rows and columns in the fixed grid. The row class is as follows: .row {margin-left: -20px;*zoom: 1;} This sets the left margin to -20px and sets "*zoom: 1;". Here, "*" means the zoom property is set to 1 for all elements, which is used to fix bugs in IE6/7. Setting the zoom property to 1 sets an internal property called hasLayout, which is used to fix many zoom/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. Setting "line-height: 0;" ensures that each row has no line height of its own, and using 'content: ""' ensures that no content is inserted before or after the element. Then, the following rule is used to ensure that there are no floating elements on the left and right sides of a given element: .row:after {clear: both;}[class*="span"] {float: left;min-height: 1px;margin-left: 20px;} These are the CSS rules to use. '[class*="span"]' selects all elements whose class attribute value starts with 'span'. Now, "float: left;" is used to position each column next to each other. "min-height: 1px" gives all columns a minimum height of 1px, and "margin-left: 20px;" sets the left margin to 20px. Separate CSS rules are used to set the column widths. Specifically, as shown in the table below: | CSS Code | Explanation | | --- | --- | | .span12 {width: 940px;} | If the row has a single column, the column width is 940px. | | .span11 {width: 860px;} | If the row has a column formed by merging 11 columns, the column width is 860px. | | .span10 {width: 780px;} | If the row has a column formed by merging 10 columns, the column width is 780px. | | .span9 {width: 700px;} | If the row has a column formed by merging 9 columns, the column width is 700px. | | .span8 {width: 620px;} | If the row has a column formed by merging 8 columns, the column width is 620px. | | .span7 {width: 540px;} | If the row has a column formed by merging 7 columns, the column width is 540px. | | .span6 {width: 460px;} | If the row has a column formed by merging 6 columns, the column width is 460px. | | .span5 {width: 380px;} | If the row has a column formed by merging 5 columns, the column width is 380px. | | .span4 {width: 300px;} | If the row has a column formed by merging 4 columns, the column width is 300px. | | .span3 {width: 220px;} | If the row has a column formed by merging 3 columns, the column width is 220px. | | .span2 {width: 140px;} | If the row has a column formed by merging 2 columns, the column width is 140px. | | .span1 {width: 60px;} | A single column width is 60px. | This example demonstrates how to create 1 column, 2 columns, 6 columns, 12 columns, and 4 columns (in that order). Also note that all created columns are wrapped by the "container" class, which is used to create a fixed layout using Bootstrap. ## Example Bootstrap Grid System Example - w3cschool Bootstrap Tutorial .span12 h1{color:#FE6E4C; font-weight: bold; padding: 5px;} h3 {margin: 10px 0 10px 0;}

w3cschool.cc is a web design and development tutorial.

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

html5 logo

javascript logo

JSON logo

PHP logo

MySQL logo

Browser Statistics logo

Social networking sites to share:

GPlus logo

Twitter logo

Orkut logo

iPad logo

Digo logo

Zapface logo

facebook logo

Netvibes logo

LinkedIn logo

Newsvine logo

Blogger logo

Reddit logo

Fontend Development:

HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript

Backend Developemt:

PHP, Ruby, Python, Java, ASP.NET, SCALA

Database Management:

SQL, MySQL POstgreSQL, NoSQL, MongoDB

APIs, Tools and Tips:

Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG

![Image 2: Bootstrap Grid Example](#) ## View Online [View the above example in different browser windows.](#) [Click here to download all HTML, CSS, JS, and image files for the above example.](#) If you want to add responsiveness to Bootstrap's default grid, simply add the following after the native CSS in your HTML file: To view the default grid with responsiveness, (#). (#). The default grid system becomes responsive under two conditions: when the viewport (the available space where the grid renders) is greater than 1200px [obtained via @media (min-width: 1200px)], and when the viewport is greater than 768px but less than 979px [set via @media (min-width: 768px) and (max-width: 979px)]. By using offsets, you can move a column to the right of its original position. This is achieved by adding a left margin to the column. With Bootstrap, you can use the "offsetx" class (where x is a positive integer) along with the "spany" class (where y is a positive integer). Depending on the value of 'x' in 'offsetx', the relevant column is moved to the right by 'x' column widths. The offset widths are defined in the Bootstrap CSS. The maximum left margin for offset12 is 980px, and the minimum left margin for offset1 is 100px. Since the default grid system is pixel-based, when applying offsets, you must know the number of pixels you want to use for the offset and the number of pixels 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 where we move the left column to the right by 4 columns. The HTML code is as follows: ## Example

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.

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.

← Bootstrap V2 LayoutAtt Area Nohref β†’

YouTip © 2024-2026 | Home | Learn Technology, Build Dreams!

All content is for educational and learning purposes only.