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.
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
/* 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"
<p> elements have no top margin and
1rem bottom margin for easy spacing. Similarly, all the headings have bottom margin of
Bootstrap 4 applies bolder font weight and an increased font size to HTML heading elements (
<h6>). Following is how headings appear in Bootstrap 4:
Bootstrap 4 also provides heading classes from
.h6 in case you want to use the font styling of a particular heading on other HTML elements.
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:
Lead & inline text elements
You can use
.lead class to make a paragraph stand out.
.small classes are also available to apply the same styles as
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
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
<ul> element and
.list-inline-item to inner list items.
More typography classes
Following are few more typography classes that can be used to style different HTML elements:
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.