Content styling

As already noted, one of Bootstrap’s core objectives is to allow the development of consistent user interfaces. This means that using Bootstrap, one should be able to build web pages that look and feel the same, regardless of which browser is being used to view them. Alternatively, in other words, and as noted in the official Bootstrap 4 documentation:

"part of Bootstrap’s job is to provide an elegant, consistent, and simple baseline to build upon."

As different browsers ship with different element styles, Bootstrap overrides all the default browser styles, hence ensuring the consistent rendering of elements across different browsers. The overriding is achieved using a collection of Bootstrap CSS rules collectively known as Reboot. These rules are the Bootstrap team's own modification of Normalize—a third-party library (used by Bootstrap 3) for resetting default element styles.

Building on top of this clean slate, Bootstrap 4 provides a set of basic styles that allow you to effectively improve the general look and feel of the most commonly-used elements used to construct user interfaces. Examples of the elements that Bootstrap allows you to style are buttons (figure 1.2), input fields, headings (figure 1.3), paragraphs, special inline texts, figures, tables, and navigation controls.

Figure 1.2: The six button styles that come with Bootstrap 4 are btn-primary, btn-secondary, btn-success, btn-danger, btn-link, btn-info, and btn-warning. Additional button styles not shown here include btn-light, btn-dark, and outline button styles in the form of btn-outline-*.

In addition, Bootstrap offers state styles for all input controls—for example, styles for disabled buttons or toggle buttons:

Figure 1.3: Bootstrap's typography styles. In the above example, we see styling for different display headers

It should be noted that the default font size in Bootstrap 4 is now 2 px bigger than in its predecessor, having increased from 14 px to 16 px. Naturally, this makes textual content, such as body text and headings, appear slightly larger without being too obtrusive. The display of text is now also controlled by your native font stack (also known as the system font stack; the native font stack refers to the default collection of fonts used by your operating system) as opposed to the default web fonts. Using the native font stack has the following advantages:

Improved overall rendering speed of text as the web browser no longer needs to download any font files
Allows for a more consistent look and feel as a page's text content matches that of the operating system the browser is running on

Table of Contents for Content styling

Create new playlist

Sign In

Sign Up

Table of Contents for
Content styling