[h2 class=”title”]Responsive design [small]Media queries for various devices and resolutions[/small][/h2]
[h5]What They Do[/h5]
Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around [code]min-width[/code] and [code]max-width[/code].
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||Layout width||Column width||Gutter width|
|Smartphones||480px and below||Fluid columns, no fixed widths|
|Smartphones to tablets||767px and below||Fluid columns, no fixed widths|
|Portrait tablets||768px and above||42px||20px|
|Default||980px and up||60px||20px|
|Large display||1200px and up||70px||30px|
Default grid system 12 columns with a responsive twist
The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid. It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.
[ row ] [ third_layout ]...[ /third_layout ] [ 23_layout ]...[ /23_layout ] [ /row ]
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.
[ row ] [ third_layout ]...[ /third_layout ] [ third_layout class="offset4"]...[ /third_layout ] [ /row ]
To nest your content, just add a new
.row and set of
.span* columns within an existing
.span* column. Nested rows should include a set of columns that add up to the number of columns of it’s parent. For example, two nested
.span3 columns should be placed within a
Level 1 of column
[ row ] [ full_width ] Level 1 of column [ inner_row ] [ half_width ]Level 2[ /half_width ] [ half_width ]Level 2[ /half_width] [ /inner_row ] [ /full_width ] [ /row ]
[h2 class=”title”]Responsive utility classes[/h2]
What are they
For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.
When to use
Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device’s presentation.
For example, you might show a
<select> element for nav on mobile layouts, but not on tablets or desktops.
Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in
|Class||Phones 480px and below||Tablets 767px and below||Desktops 768px and above|