bootstrap

Mobile First

Mobile First

Since the release of Bootstrap 3, the framework has shifted to a mobile-first approach. It means that instead of being in separate files,'mobile first' styles can be found throughout the entire library. To enable appropriate rendering and touch zooming on mobile devices, add the viewport meta tag to the <head> element.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Maximum-scale = 1.0 is commonly used in conjunction with user-scalable = no. As previously stated, using user-scalable = no may give users an experience similar to that of a native app, hence Bootstrap does not encourage it.

Responsive Images:

By adding the class.img-responsive to the img> tag in Bootstrap 3, you can make the images responsive. The picture is given the properties max-width: 100 percent; and height: auto; so that it scales well with the parent element.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Typography and Links

Bootstrap establishes a foundation for global display (background), typography, and link styles.

Basic Global Display: On the body> element, sets background-color: #fff;.

Typography: The typographic base is defined by the @font-family-base, @font-size-base, and @line-height-base properties.

Link Styles: Sets the global link colour via the @link-color attribute, and only applies link underlines on:hover.

Normalize: Normalize is used by Bootstrap to provide cross-browser uniformity.

Normalize.CSS resets have been replaced by css, a modern, HTML5-ready alternative. It's a simple CSS file that improves cross-browser uniformity in HTML element default styling.