Grid Reference
Standard Content Area Widths
We use a 12 column grid. Our navigation area on the left side of the page takes up 3 of these 12 columns. So we are left with 9 columns in our main content area on pages that have side navigation. Below are widths for the overall 9 column area at different viewport sizes:
| Label | Viewport width | 9 Column Width (Content) |
|---|---|---|
| Large display | 1200px and up | 870px |
| Default | 980px and up | 700px |
| Portrait tablets | 768px and above | 538px |
| Phones to tablets | 767px and below | Fluid columns, no fixed widths |
| Phones | 480px and below | Fluid columns, no fixed widths |
Small Content Area Widths
If your page has both left-navigation, and a portlet on the right side of the page, then you are left with only 6 column-widths for the main content area. You can use the table below to find out how wide the center content area is on these types of pages.
| Label | Viewport width | 6 Column Width (Content) |
|---|---|---|
| Large display | 1200px and up | 570px |
| Default | 980px and up | 460px |
| Portrait tablets | 768px and above | 352px |
| Phones to tablets | 767px and below | Fluid columns, no fixed widths |
| Phones | 480px and below | Fluid columns, no fixed widths |
Portlet Area Widths
Here are the sizes for the side columns (left navigation and optional right-side portlets.)
| Label | Viewport width | 3 Column Width (Portlets) |
|---|---|---|
| Large display | 1200px and up | 270px |
| Default | 980px and up | 220px |
| Portrait tablets | 768px and above | 116px |
| Phones to tablets | 767px and below | Fluid columns, no fixed widths |
| Phones | 480px and below | Fluid columns, no fixed widths |
Single Column Widths
Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
| Label | Viewport width | Column width | Gutter width |
|---|---|---|---|
| Large display | 1200px and up | 70px | 30px |
| Default | 980px and up | 60px | 20px |
| Portrait tablets | 768px and above | 42px | 20px |
| Phones to tablets | 767px and below | Fluid columns, no fixed widths | |
| Phones | 480px and below | Fluid columns, no fixed widths | |
