Bootstrap is made to not only look and behave great in the latest desktop browsers, but in tablet and smartphone browsers too. It's packed with features; a 12-column responsive grid, dozens of components, plugins and more!.
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 |
The default grid system is a 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.
<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns defined as part of the grid system.
<div class="row"> <div class="span4">...</div> <div class="span4 offset4">...</div> </div>
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 .span6.
<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>
For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.
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 responsive.less.
| Class | Phones 480px and below | Tablets 767px and below | Desktops 768px and above |
|---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |