twitter-bootstrap Grid system Bootstrap Rows & Columns
Example
Bootstrap's grid system has 12 units known as Columns that can be used to layout content horizontally across the viewport.
The reason for a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of layouts much easier. Bootstrap’s grid columns are identified by different col-{breakpoint}-{units} CSS classes. Learn more about viewport width and breakpoints (A.K.A. Tiers)
So for example, col-md-3 represents a column that takes up 3 of the 12 units (or 25%) across a medium (md) width viewport. To use a column width in your layout, simply use the appropriate col-{breakpoint}-{units} class in your HTML markup.
<div class="col-{breakpoint}-{units}">
Column width is fluid (not fixed width), so the columns consume a percentage of their container.
Column units in Bootstrap 3
col-*-1: 1 of 12 (8.33333333% width)col-*-2: 2 of 12 (16.66666667% width)col-*-3: 3 of 12 (25% width)col-*-4: 4 of 12 (33.3333333% width)col-*-5: 5 of 12 (41.66666667% width)col-*-6: 6 of 12 (50% width)col-*-7: 7 of 12 (58.33333333% width)col-*-8: 8 of 12 (66.66666667% width)col-*-9: 9 of 12 (75% width)col-*-10: 10 of 12 (83.33333333% width)col-*-11: 11 of 12 (91.66666667% width)col-*-12: 12 of 12 (100% width)
Demo - Bootstrap's 12 column units
The Bootstrap Row
The Bootstrap .row class is used to contain the Columns. Columns should always be placed in Rows, and Rows should always be placed inside of a Container (container or container-fluid). The Row uses negative margins (-15px) to ensure proper spacing between the column's content and the edge of the browser. Rows are used to group columns horizontally.
<div class="container">
<div class="row">
<!-- one more columns -->
<div class="col-{breakpoint}-{units}">..</div>
</div>
</div>
Columns will fill the .row horizontally left-to-right, and will wrap to a new line every 12 column units. Therefore, you can use .rows to create horizontal breaks, or you can add more than 12 column units in a single .row element to have columns that wrap (or stack) vertically down the viewport.
When using column wrapping (more than 12 units in a .row), you'll need to use responsive resets (or clearfixes) to ensure even wrapping of uneven column content. This is essential when the content of the columns varies in height.
More on Bootstrap Grid Columns & Rows
Bootstrap 3 fluid grid layout issues?
Bootstrap 3 - nested row can I have columns add up to more then 12?
Bootstrap row and col explanation
How the Bootstrap Grid Works (Medium)
