Bootstrap5 Typography
Bootstrap 5 Default Settings
Bootstrap 5's defaultfont-sizeis 16px,line-heightis 1.5.
The defaultfont-familyis "Helvetica Neue", Helvetica, Arial, sans-serif.
In addition, all<p>elementsmargin-top: 0 、 margin-bottom: 1rem (16px)。
<h1> - <h6>
Bootstrap defines styles for all HTML headings (h1 to h6). See the example below:
Example
<div class="container">
<h1>h1 Bootstrap heading</h1>
<h2>h2 Bootstrap heading</h2>
<h3>h3 Bootstrap heading</h3>
<h4>h4 Bootstrap heading</h4>
<h5>h5 Bootstrap heading</h5>
<h6>h6 Bootstrap heading</h6>
</div>
Try it »
You can also use.h1to.h6classes to style elements:
Example
<div class="container">
<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>
</div>
Try it »
Display Heading Classes
Bootstrap also provides four Display classes to control heading styles: .display-1, .display-2, .display-3, .display-4.
Example
<div class="container">
<h1>Display heading</h1>
<p>Display headings can output larger and bolder font styles.</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
Try it »
<small>
In Bootstrap 5, the HTML<small>element is used to create smaller, lighter-colored text:
Example
<div class="container">
<h1>Smaller text heading</h1>
<p>The small element is used for smaller, lighter-colored text:</p>
<h1>h1 heading<small>Subheading</small></h1>
<h2>h2 heading<small>Subheading</small></h2>
<h3>h3 heading<small>Subheading</small></h3>
<h4>h4 heading<small>Subheading</small></h4>
<h5>h5 heading<small>Subheading</small></h5>
<h6>h6 heading<small>Subheading</small></h6>
</div>
Try it »
<mark>
Bootstrap 5 defines<mark>tag and.markclass with a yellow background and some padding:
Example
<div class="container">
<h1>Highlighted text</h1>
<p>Use the mark element to<mark>highlight</mark>text.</p>
</div>
Try it »
<abbr>
Bootstrap 5 defines HTML<abbr>element's style is displayed as a dashed border at the bottom of the text:
Example
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
Try it »
<blockquote>
For quoted content, you can<blockquote>add on.blockquoteclass:
Example
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
Try it »
<dl>
Bootstrap 5 defines HTML<dl>element's styles are as follows:
Example
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
Try it »
<code>
Bootstrap 5 defines HTML<code>element's styles are as follows:
Example
<div class="container">
<h1>Code snippet</h1>
<p>You can place some code elements inside the code element:</p>
<p>The following HTML elements:<code>span</code>, <code>section</code>, and<code>div</code>are used to define parts of the document content.</p>
</div>
Try it Yourself »
<kbd>
Bootstrap 5 defines the HTML<kbd>element's styles as follows:
Example
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
Try it Yourself »
<pre>
Bootstrap 5 defines the HTML<pre>element's styles as follows:
Example
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
Try it Yourself »
More Typography Classes
The following table provides examples of more Bootstrap 5 typography classes:
| Class name |
Description |
Example |
| .lead |
Make a paragraph stand out |
Try it Yourself |
| .small |
Specify smaller text (85% of the parent element) |
Try it Yourself |
| .text-start |
Left aligned |
Try it Yourself |
| .text-center |
Centered |
Try it Yourself |
| .text-end |
Right aligned |
Try it Yourself |
| .text-justify |
Set text alignment, text in a paragraph that exceeds the screen will automatically wrap. |
Try it Yourself |
| .text-nowrap |
Text in a paragraph that exceeds the screen does not wrap. |
Try it Yourself |
| .text-lowercase |
Set text to lowercase |
Try it Yourself |
| .text-uppercase |
Set text to uppercase |
Try it Yourself |
| .text-capitalize |
Capitalize the first letter of each word |
Try it Yourself |
| .initialism |
Text inside the <abbr> element is displayed in a smaller font and can convert lowercase letters to uppercase letters. |
Try it Yourself |
| .list-unstyled |
Removes the default list style, and list items are left-aligned (in <ul> and <ol>). This class only applies to direct child list items. (If you need to remove nested list items, you need to use this style on the nested list.) |
Try it Yourself |
| .list-inline |
Place all list items on the same line |
Try it Yourself |
Other extensions