inline elements like span, block level elements like p, div.

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 .span12 h1{color:#FE6E4C; font-weight: bold; padding: 5px;} h3 {margin: 10px 0 10px 0;}  ## 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