<pclass="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <ahref="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <ahref="#grid-less">mixins for generating more semantic layouts</a>.</p>
<pclass="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <ahref="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <ahref="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3id="grid-media-queries">Media queries</h3>
<h3id="grid-media-queries">Media queries</h3>
<p>We use the following media queries to create our the key breakpoints in our grid system.</p>
<p>We use the following media queries to create the key breakpoints in our grid system.</p>
{% highlight css %}
{% highlight css %}
/* Extra small devices (phones, up to 480px) */
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* No media query since this is the default in Bootstrap */
...
@@ -98,7 +98,7 @@ base_url: "../"
...
@@ -98,7 +98,7 @@ base_url: "../"
/* Large devices (large desktops, 1200px and up) */
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... }
@media (min-width: @screen-large-desktop) { ... }
{% endhighlight %}
{% endhighlight %}
<p>We ocassionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
<p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
{% highlight css %}
{% highlight css %}
@media (max-width: @screen-phone-max) { ... }
@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... }
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { ... }