Bootstrap 4 provides basic styling for text elements including headings, lists, body text, blockquotes and more. You are free to change these values to meet your own project requirements.

Body text

Global default font-size of Bootstrap 4 is 16px (applied to <html> element) and the <body> element also has the same font-size. Starting from version 4, Bootstrap uses native font stack that selects the best available font-family for each operating system and device with a fallback to "Helvetica Neue", Arial, and sans-serif.

/* Default Bootstrap 4 native font stack */ 
font-family: 
	/* Safari for OS X and iOS (San Francisco) */
  -apple-system,
  /* Chrome < 56 for OS X (San Francisco) */
  BlinkMacSystemFont,
  /* Windows */
  "Segoe UI",
  /* Android*/
  "Roboto",
  /* Basic web fallback */
  "Helvetica Neue", Arial, sans-serif,
  /* Emoji fonts */
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Moreover, all <p> elements have no top margin and 1rem bottom margin for easy spacing. Similarly, all the headings have bottom margin of .5rem.

Headings

Bootstrap 4 applies bolder font weight and an increased font size to HTML heading elements (<h1> to <h6>). Following is how headings appear in Bootstrap 4:

Live Example

Bootstrap 4 also provides heading classes from .h1 to .h6 in case you want to use the font styling of a particular heading on other HTML elements.

Display headings

Display headings are designed to stand out more than the normal headings—use larger font size and lighter font weight. There are four types of display heading: .display-1, .display-2, .display-3 and .display-4.

Live Example

Lead & inline text elements

You can use .lead class to make a paragraph stand out. .mark and .small classes are also available to apply the same styles as <mark> and <small>.

Live Example

Abbreviations & blockquotes

Bootstrap 4 styles the HTML <abbr> with a default dotted bottom border. You can add .initialism to an abbreviation for a slightly smaller font-size.

If you want to quote blocks of content from another source, add the .blockquote class to a <blockquote> element.

Live Example

Lists

Bootstrap 4 provides a number of classes for lists styling. Use .list-unstyled to remove the default list-style and left margin on list items. If you want to create an inline list (without bullet points and with light margin), apply class .list-inline to <ul> element and .list-inline-item to inner list items.

Live Example

More typography classes

Following are few more typography classes that can be used to style different HTML elements:

Live Example

Conclusion

In this tutorial, we look into Bootstrap 4 typography classes with live examples. Bootstrap 4 is a powerful framework which provides a number of classes to style all most every HTML element. In next tutorial, we will learn about Bootstrap 4 color scheme and how to customize it.