Default 940px grid

{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}

{{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

{{_i}}As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.{{/i}}

Offsetting columns

4 offset 4

3 offset 3

8 offset 4

{{_i}}Nesting columns{{/i}}

{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.{{/i}}

{{_i}}Example{{/i}}

{{_i}}Level 1 of column{{/i}}

{{_i}}Level 2{{/i}}

<div class="row">
  <div class="span12">
    {{_i}}Level 1 of column{{/i}}
    <div class="row">
      <div class="span6">{{_i}}Level 2{{/i}}</div>
      <div class="span6">{{_i}}Level 2{{/i}}</div>
    </div>
  </div>
</div>

{{_i}}Grid customization{{/i}}

{{_i}}Variable{{/i}}	{{_i}}Default value{{/i}}	{{_i}}Description{{/i}}
`@gridColumns`	12	{{_i}}Number of columns{{/i}}
`@gridColumnWidth`	60px	{{_i}}Width of each column{{/i}}
`@gridGutterWidth`	20px	{{_i}}Negative space between columns{{/i}}
`@siteWidth`	{{_i}}Computed sum of all columns and gutters{{/i}}	{{_i}}Counts number of columns and gutters to set width of the `.fixed-container()` mixin{{/i}}

{{_i}}Variables in LESS{{/i}}

{{_i}}Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.{{/i}}

{{_i}}How to customize{{/i}}

{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.{{/i}}

{{_i}}Staying responsive{{/i}}

{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.{{/i}}

{{_i}}Fixed layout{{/i}}

{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}

<body>
  <div class="container">
    ...
  </div>
</body>

{{_i}}Fluid layout{{/i}}

{{_i}}<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}

<body>
  <div class="fluid-container sidebar-left">
    <div class="fluid-sidebar">
      ...
    </div>
    <div class="fluid-content">
      ...
    </div>
  </div>
</body>

{{_i}}Supported devices{{/i}}

{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

{{_i}}Label{{/i}}	{{_i}}Layout width{{/i}}	{{_i}}Column width{{/i}}	{{_i}}Gutter width{{/i}}
{{_i}}Smartphones{{/i}}	480px and below	{{_i}}Fluid columns, no fixed widths{{/i}}
{{_i}}Portrait tablets{{/i}}	480px to 768px	{{_i}}Fluid columns, no fixed widths{{/i}}
{{_i}}Landscape tablets{{/i}}	768px to 940px	44px	20px
{{_i}}Default{{/i}}	940px and up	60px	20px
{{_i}}Large display{{/i}}	1210px and up	70px	30px

{{_i}}What they do{{/i}}

{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

{{_i}}Modify the width of column in our grid{{/i}}
{{_i}}Stack elements instead of float wherever necessary{{/i}}
{{_i}}Resize headings and text to be more appropriate for devices{{/i}}

{{_i}}Using the media queries{{/i}}

{{_i}}Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:{{/i}}

{{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}}
{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
{{_i}}Compile responsive.less as a separate file and include that{{/i}}

{{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}

  // {{_i}}Landscape phones and down{{/i}}
  @media (max-width: 480px) { ... }

  // {{_i}}Landscape phone to portrait tablet{{/i}}
  @media (min-width: 480px) and (max-width: 768px) { ... }

  // {{_i}}Portrait tablet to landscape and desktop{{/i}}
  @media (min-width: 768px) and (max-width: 940px) { ... }

  // {{_i}}Large desktop{{/i}}
  @media (min-width: 1210px) { .. }

{{_i}}Scaffolding{{/i}}

{{_i}}Grid system 12 columns with a responsive twist{{/i}}