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 ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!
Note the lack of the <meta name="viewport" content="width=device-width, initial-scale=1.0">, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.
Note the lack of the <meta name="viewport" content="width=device-width, initial-scale=1">, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.
As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar.