Bootstrap 5 Typography
Bootstrap includes styles that define how text elements appear.
This page shows how certain text elements are rendered when using Bootstrap (often without using any classes). Generally, any page that links to the Bootstrap 5 style sheet will render these elements in the same way (unless overridden by other styles).
Body Text
Bootstrap 5 uses the browser's default root font-size
(typically 16px
).
Bootstrap uses a "native font stack" (user's system fonts), that selects the best font-family for each OS and device.
You are completely free to change any of these values to suit your own project. For example, you can:
- Use the
$font-family-base
,$font-size-base
, and$line-height-base
attributes as the typographic base applied to thebody
element. - Set the global link color via
$link-color
. - Use
$body-bg
to set a background-color on thebody
element (this is#fff
by default).
Headings
Here's a sample of heading elements as they appear in Bootstrap 5:
Heading Classes
Bootstrap also includes heading classes from .h1
to .h6
in case you need to render some inline text in the style of a particular heading.
Sub-Headings
You can create a sub-heading or secondary text by placing text inside a <small>
element within the heading. You can also apply Bootstrap classes to that element.
Display Headings
Display headings are designed to stand out more than the normal headings. Bootstrap 5 includes six sizes of display heading (.display-1
, .display-2
, .display-3
, .display-4
, .display-5
, and .display-6
).
So for example, a <h1>
element could be rendered in six different sizes using display heading classes.
To create a display heading, add one of the above classes to the heading element.
Lead Text
You can make a paragraph stand out by using Bootstrap's .lead
class.
Marked Text
The HTML <mark>
element represents text as marked or highlighted for reference purposes, due to its relevance in another context.
Here's an example of Bootstrap's rendering of this element:
Abbreviations
In HTML, the <abbr>
represents an abbreviation or acronym. The title
attribute can be used to provide an expansion of the abbreviation.
In Bootstrap, abbreviations with a title
attribute are rendered with a light dotted bottom border and a help cursor on hover.
Initialism
You can add the Bootstrap .initialism
class to render the abbreviation in a slightly smaller font size.
Blockquotes
To apply Bootstrap's styles to the <blockquote>
element, use the .blockquote
class.
Blockquotes — Source
When providing attribution, wrap the <blockquote>
in a <figure>
element, and use either a <figcaption>
or another block element such as <p>
with the .blockquote-footer
class.
Also be sure to wrap the name of the actual source in a <cite>
element.
Blockquotes — Alignment
You can use the Bootstrap text utilities to specify the alignment of a blockquote. For example, .text-center
:
And .text-end
:
Lists
Bootstrap applies various styles and has a number of classes specifically for lists.
Lists — Unstyled
You can use the Bootstrap .list-unstyled
class to render lists without their default list-style
and left-margin
:
Lists — Inline
You can use the Bootstrap .list-inline
and .list-inline-item
classes to render lists as display: inline-block
and to apply some padding:
Description Lists
In Bootstrap, description lists are rendered like this:
Description Lists — Horizontal
You can make the terms and descriptions line up horizontally by adding Bootstrap's .row
class to the dl
tag, then any of the grid system's predefined classes to the dt
and dd
tags.
Code
In Bootstrap, the <code>
element is rendered like this:
Keyboard Input
In Bootstrap, the <kbd>
element is rendered like this:
Preformatted Text
In Bootstrap, the <pre>
element is rendered like this:
Sample Text
In Bootstrap, the <samp>
element is rendered like this:
Variables
In Bootstrap, the <var>
element is rendered like this: