Bootstrap 4 Text/Typography

Admin
Posted by May 8, 2020 May 8, 2020 10 Views Add Comment

Bootstrap 4 Default Settings

Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.

The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.

In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).

<h1> – <h6>

Bootstrap 4 styles HTML headings (<h1> to <h6>)  with a bolder font-weight and an increased font-size:

Example

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: .display-1, .display-2, .display-3, .display-4

Example

Display 1

Display 2

Display 3

Display 4

<small>

In Bootstrap 4 the HTML <small> element is used to create a lighter, secondary text in any heading:

Example

h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text

<mark>

Bootstrap 4 will style the HTML <mark> element with a yellow background color and some padding:

Example

Use the mark element to highlight text.

<abbr>

Bootstrap 4 will style the HTML <abbr> element with a dotted border bottom:

Example

The WHO was founded in 1948.

<blockquote>

Add the .blockquote class to a <blockquote> when quoting blocks of content from another source:

Example

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.


From WWF's website

<dl>

Bootstrap 4 will style the HTML <dl> element in the following way:

Example

Coffee
- black hot drink
Milk
- white cold drink

<code>

Bootstrap 4 will style the HTML <code> element in the following way:

Example

The following HTML elements: span, section, and div defines a section in a document.

<kbd>

Bootstrap 4 will style the HTML <kbd> element in the following way:

Example

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrap 4 will style the HTML <pre> element in the following way:

Example

Text in a pre element is displayed in a fixed-width font, and it preserves both      spaces and line breaks.