<pclass="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes <ahref="#grid-example">predefined classes</a> for this, as well as powerful <ahref="#grid-less">mixins for generating semantic layouts</a>.</p>
<h3id="grid-example">Grid example</h3>
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
</div>
<divclass="row show-grid">
<divclass="col-span-4">4</div>
<divclass="col-span-4">4</div>
<divclass="col-span-4">4</div>
</div>
<divclass="row show-grid">
<divclass="col-span-6">6</div>
<divclass="col-span-6">6</div>
</div>
</div>
{% highlight html linenos %}
<divclass="row">
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
<divclass="col-span-1">1</div>
</div>
<divclass="row">
<divclass="col-span-4">4</div>
<divclass="col-span-4">4</div>
<divclass="col-span-4">4</div>
</div>
<divclass="row">
<divclass="col-span-6">6</div>
<divclass="col-span-6">6</div>
</div>
{% endhighlight %}
<h3id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-offset-4</code> moves <code>.col-span-4</code> over four columns.</p>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<divclass="row show-grid">
<divclass="col-span-9">
Level 1: 9 columns
<divclass="row show-grid">
<divclass="col-span-6">
Level 2: 6 columns
</div>
<divclass="col-span-6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
{% highlight html linenos %}
<divclass="row">
<divclass="col-span-9">
Level 1: 9 columns
<divclass="row">
<divclass="col-span-6">
Level 2: 6 columns
</div>
<divclass="col-span-6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
{% endhighlight %}
<h3id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
<divclass="row show-grid">
<divclass="col-span-9 col-push-3">9</div>
<divclass="col-span-3 col-pull-9">3</div>
</div>
{% highlight html linenos %}
<divclass="row show-grid">
<divclass="col-span-9 col-push-3">9</div>
<divclass="col-span-3 col-pull-9">3</div>
</div>
{% endhighlight %}
<h3id="grid-less">LESS mixins and variables</h3>
<p>In addition to <ahref="#grid-example">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
<h4>Variables</h4>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
{% highlight css linenos %}
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
{% endhighlight %}
<h4>Mixins</h4>
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight css linenos %}
// Creates a wrapper for a series of columns
.make-row() {
// Negative margin the row out to align the content of columns
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
// Then clear the floated columns
.clear_float();
}
// Generate the columns
.make-column(@columns) {
@media (min-width: @grid-float-breakpoint) {
float: left;
// Calculate width based on number of columns available
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
<pclass="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes <ahref="#grid-example">predefined classes</a> for this, as well as powerful <ahref="#grid-less">mixins for generating semantic layouts</a>.</p>
<h3id="grid-example">Grid example</h3>
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.span*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.span*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row show-grid">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row show-grid">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
</div>
{% highlight html linenos %}
<divclass="row">
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
<divclass="span1">1</div>
</div>
<divclass="row">
<divclass="span4">4</div>
<divclass="span4">4</div>
<divclass="span4">4</div>
</div>
<divclass="row">
<divclass="span6">6</div>
<divclass="span6">6</div>
</div>
{% endhighlight %}
<h3id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.offset*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.offset4</code> moves <code>.span4</code> over four columns.</p>
<divclass="bs-docs-grid">
<divclass="row show-grid">
<divclass="span4">4</div>
<divclass="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<divclass="row show-grid">
<divclass="span3 offset3">3 offset 3</div>
<divclass="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<divclass="row show-grid">
<divclass="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
{% highlight html linenos %}
<divclass="row">
<divclass="span4">...</div>
<divclass="span4 offset4">...</div>
</div>
{% endhighlight %}
<h3id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<divclass="row show-grid">
<divclass="span9">
Level 1: 9 columns
<divclass="row show-grid">
<divclass="span6">
Level 2: 6 columns
</div>
<divclass="span6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
{% highlight html linenos %}
<divclass="row">
<divclass="span9">
Level 1: 9 columns
<divclass="row">
<divclass="span6">
Level 2: 6 columns
</div>
<divclass="span6">
Level 2: 6 columns
</div>
</div>
</div>
</div>
{% endhighlight %}
<h3id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.push*</code> and <code>.pull*</code> modifier classes.</p>
<divclass="row show-grid">
<divclass="span9 push3">9</div>
<divclass="span3 pull9">3</div>
</div>
{% highlight html linenos %}
<divclass="row show-grid">
<divclass="span9 push3">9</div>
<divclass="span3 pull9">3</div>
</div>
{% endhighlight %}
<h3id="grid-less">LESS mixins and variables</h3>
<p>In addition to <ahref="#grid-example">prebuilt grid classes</a> for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.</p>
<h4>Variables</h4>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
{% highlight css linenos %}
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
{% endhighlight %}
<h4>Mixins</h4>
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight css linenos %}
// Creates a wrapper for a series of columns
.make-row() {
// Negative margin the row out to align the content of columns
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
// Then clear the floated columns
.clear_float();
}
// Generate the columns
.make-column(@columns) {
@media (min-width: @grid-float-breakpoint) {
float: left;
// Calculate width based on number of columns available
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
<p>Built at Twitter by <ahref="http://twitter.com/mdo">@mdo</a> and <ahref="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <ahref="http://lesscss.org">LESS CSS</a>, is compiled via <ahref="http://nodejs.org">Node</a>, and is managed through <ahref="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
<p>Built at Twitter by <ahref="http://twitter.com/mdo">@mdo</a> and <ahref="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <ahref="http://lesscss.org">LESS CSS</a>, is compiled via <ahref="http://nodejs.org">Node</a>, and is managed through <ahref="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
<p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
<p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
<p>A 12-column responsive <ahref="./css/#grid-system">grid</a>, dozens of components, <ahref="./javascript/">JavaScript plugins</a>, typography, form controls, and even a <ahref="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
<p>A 12-column responsive <ahref="./css/#grid-system">grid</a>, dozens of components, <ahref="./javascript/">JavaScript plugins</a>, typography, form controls, and even a <ahref="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
...
@@ -50,22 +50,22 @@ title: Bootstrap
...
@@ -50,22 +50,22 @@ title: Bootstrap
<h1>Built with Bootstrap.</h1>
<h1>Built with Bootstrap.</h1>
<pclass="marketing-byline">For more sites built with Bootstrap, <ahref="http://expo.getbootstrap.com">visit the Expo</a> or <ahref="./getting-started/#examples">browse the examples</a>.</p>
<pclass="marketing-byline">For more sites built with Bootstrap, <ahref="http://expo.getbootstrap.com">visit the Expo</a> or <ahref="./getting-started/#examples">browse the examples</a>.</p>
