twitter-bootstrap Grid system Bootstrap Rows & Columns

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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)



Got any twitter-bootstrap Question?