With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
-To enable proper mobile styles, add the viewport meta tag to your <head>:
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">-
This meta tag improves rendering of sites on mobile devices and ensures proper touch-based zooming.
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
@@ -2234,76 +2233,12 @@ For example, <code><section></code> should be wrapped -For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.
-Responsive CSS requires the following meta tag in the <head> of your pages.
-<meta name="viewport" content="width=device-width, initial-scale=1.0"> -- -
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:
-| Label | -Layout width | -Column width | -Gutter width | -
|---|---|---|---|
| Large display | -1200px and up | -70px | -30px | -
| Default | -980px and up | -60px | -20px | -
| Portrait tablets | -768px and above | -42px | -20px | -
| Phones to tablets | -767px and below | -Fluid columns, no fixed widths | -|
| Phones | -480px and below | -Fluid columns, no fixed widths | -|
-/* Large desktop */
-@media (min-width: 1200px) { ... }
-
-/* Portrait tablet to landscape and desktop */
-@media (min-width: 768px) and (max-width: 979px) { ... }
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) { ... }
-
-/* Landscape phones and down */
-@media (max-width: 480px) { ... }
-
-
-
- For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).
| Label | -Layout width | -Column width | -Gutter width | -
|---|---|---|---|
| Large display | -1200px and up | -70px | -30px | -
| Default | -980px and up | -60px | -20px | -
| Portrait tablets | -768px and above | -42px | -20px | -
| Phones to tablets | -767px and below | -Fluid columns, no fixed widths | -|
| Phones | -480px and below | -Fluid columns, no fixed widths | -|
-/* Large desktop */
-@media (min-width: 1200px) { ... }
-
-/* Portrait tablet to landscape and desktop */
-@media (min-width: 768px) and (max-width: 979px) { ... }
-
-/* Landscape phone to portrait tablet */
-@media (max-width: 767px) { ... }
-
-/* Landscape phones and down */
-@media (max-width: 480px) { ... }
-
-
-
- {{! Responsive utility classes }}
- For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device).