Bootstrap Typography Classes

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

images/coding/coding07.webp

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as default font.

Typography Classes

1. Headings

The .h1 through .h6 classes are available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

2. Display Headings

When you need a heading to stand out, you can use a display heading - a larger, slightly more opinionated heading style.

The .display-1 to .display-6 headings are available.

3. Lead

You can make a paragraph stand out by adding .lead class.

4. Inline Text Styling

  • .mark: Represents text which is marked or highlighted for reference or notation purposes. It will apply the same styles as <mark>.
  • .small: Represents side-comments and small print, like copyright and legal text. It will apply the same styles as <small>.
  • .text-decoration-underline: It will apply the same styles as <u>.
  • .text-decoration-line-through: It will apply the same styles as <s>.

5. Lists

.list-unstyled

Use this class to remove the default list-style and left margin on list items. This applies to immediate children list items only.

.list-inline and .list-inline-item

Use this to remove a list's bullets and apply some light margin. The list will display horizontally.