Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Typography

The typography feature creates headings, paragraphs, lists and other inline elements.

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

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

In this chapter, we will look at some HTML elements that will be styled a little bit differently by Bootstrap 4 than browser defaults.


Bootstrap 4 Headings

By default, Bootstrap 4 will style the HTML headings <h1> to <h6> in the following way:

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)

Run code

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

Run code

Customizing Headings

Use the included utility classes to recreate the small secondary heading text.

The following example creates secondary heading text using .text-muted utility class:

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)

Run code

Display Headings

Traditional heading elements are designed to work best in the meat of your page content.

When you need a heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style.

There are four classes to choose from: .display-1, .display-2, .display-3, .display-4:

Display 1

Display 2

Display 3

Display 4

Run code

Keep in mind display headings are not responsive by default.



Inline Text Elements

By default, Bootstrap 4 will style HTML inline elements in the following way:

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Run code

Abbreviations

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

Add .initialism class to an abbreviation for a slightly smaller font-size:

WWW stands for world wide web.

HTML

HTML

Run code

Blockquotes

For quoting blocks of content from another source within your document, wrap <blockquote class="blockquote"> around any HTML as the quote, and add a <footer class="blockquote-footer"> for identifying the source.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in mental hospital
Run code

The <code> Tag

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

The function selectAll() highlights all the text in the input field.

Run code

The <kbd> Tag

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

Use ctrl + c to copy and ctrl + v to paste.

Run code

The <pre> Tag

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

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

More Typography Classes

The table below shows all typography classes available in Bootstrap 4:

Class Description Example
.font-weight-bold Bold text Demo
.font-weight-bolder Bolder text Demo
.font-italic Italic text Demo
.font-weight-light Light weight text Demo
.font-weight-lighter Lighter weight text Demo
.font-weight-normal Normal text Demo
.lead Makes a paragraph stand out Demo
.small Indicates smaller text (set to 85% of the size of the parent) Demo
.text-left Indicates left-aligned text Demo
.text-*-left Indicates left-aligned text on small, medium, large or xlarge screens Demo
.text-break Prevents long text from breaking layout Demo
.text-center Indicates center-aligned text Demo
.text-*-center Indicates center-aligned text on small, medium, large or xlarge screens Demo
.text-decoration-none Removes the underline from a link Demo
.text-right Indicates right-aligned text Demo
.text-*-right Indicates right-aligned text on small, medium, large or xlarge screens Demo
.text-justify Indicates justified text Demo
.text-monospace Monospaced text Demo
.text-nowrap Indicates no wrap text Demo
.text-lowercase Indicates lowercased text Demo
.text-reset Resets the color of a text or a link (inherits the color from its parent) Demo
.text-uppercase Indicates uppercased text Demo
.text-capitalize Indicates capitalized text Demo
.list-inline Removes a list's bullets and apply some light margin Demo
.list-inline-items Places all list items on a single line Demo
.list-unstyled Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) Demo
.pre-scrollable Makes a <pre> element scrollable Demo

Complete Bootstrap 4 CSS Reference

For a complete reference of all CSS classes available in Bootstrap 4, visit our Bootstrap 4 All Classes Reference.