Bootstrap 5 Text/Typography
Bootstrap 5 Default Settings
Bootstrap 5 uses a default
font-size of 1rem (16px by default), and its
line-height is 1.5.
In addition, all <p> elements have
margin-top: 0 and margin-bottom: 1rem (16px by default).
<h1> - <h6>
Bootstrap 5 styles HTML headings (<h1> to
<h6>) with a bolder font-weight and
a responsive font-size.
You can also use .h1 to .h6 classes on other elements to make them behave as headings if you want:
Example
<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap
heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4
Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p
class="h6">h6 Bootstrap heading</p>
Try it Yourself »
Display Headings
Display headings are used to stand out more than normal headings (larger
font-size and lighter font-weight), and there
are six classes to choose from: .display-1 to .display-6:
<small>
In Bootstrap 5 the HTML <small> element
(and the .small class) is used to create a smaller, secondary text in any heading:
<mark>
Bootstrap 5 will style <mark> and .mark
with a yellow background color and some padding:
<abbr>
Bootstrap 5 will style the HTML <abbr> element
with a dotted border bottom and a cursor with question mark on hover:
<blockquote>
Add the .blockquote class to a <blockquote>
when quoting blocks of content from another source. And when naming a source, like "from WWF's website", use the .blockquote-footer class:
<dl>
Bootstrap 5 will style the HTML <dl> element in the following way:
<code>
Bootstrap 5 will style the HTML <code> element in the following way:
<kbd>
Bootstrap 5 will style the HTML <kbd> element in the following way:
<pre>
Bootstrap 5 will style the HTML <pre> element in the following way:
More Typography Classes
The Bootstrap 5 classes below can be added to style HTML elements further:
| Class | Description | Example |
|---|---|---|
.lead |
Makes a paragraph stand out | Try it |
.text-start |
Indicates left-aligned text | Try it |
.text-break |
Prevents long text from breaking layout | Try it |
.text-center |
Indicates center-aligned text | Try it |
.text-decoration-none |
Removes the underline from a link | Try it |
.text-end |
Indicates right-aligned text | Try it |
.text-nowrap |
Indicates no wrap text | Try it |
.text-lowercase |
Indicates lowercased text | Try it |
.text-uppercase |
Indicates uppercased text | Try it |
.text-capitalize |
Indicates capitalized text | Try it |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
Try it |
.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) |
Try it |
.list-inline |
Places all list items on a single line (used together with
.list-inline-item on each <li> elements) |
Try it |
