Bootstrap 5 Text/Formatting

Bootstrap 5 default settings

Bootstrap 5 default font-size is set to 1rem (default is 16px),line-height is set to 1.5.

In addition, all <p> elements are all set margin-top: 0 and margin-bottom: 1rem )(default is 16px).

<h1> - <h6>

Bootstrap 5 considers HTML headings (<h1> to <h6>style with a heavier font-weight and responsive font-size.

Example

Try It Yourself

If needed, you can also use .h1 to .h6 class can also be used on other elements to make them appear as headings:

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 for more prominent (larger font-size and finer font-weight) than regular headings, with six classes available for selection:.display-1 to .display-6:

Example

Try It Yourself

<small>

In Bootstrap 5, HTML <small> element (and .small This class (and others) is used to create smaller auxiliary text within any heading:

Example

Try It Yourself

<mark>

Bootstrap 5 will set the background color to yellow and some inner padding to <mark> and .mark as:

Example

Try It Yourself

<abbr>

Bootstrap 5 will set the style of HTML <abbr> element to have a dashed bottom border and a question mark cursor on hover:

Example

Try It Yourself

<blockquote>

. When quoting content blocks from other sources, please set the style of .blockquote class to add to <blockquote>. When naming sources, such as 'from the website of the World Wide Fund for Nature', please use .blockquote-footer Class:

Example

Try It Yourself

<dl>

Bootstrap 5 will set HTML <dl> Element Styles:

Example

Try It Yourself

<code>

Bootstrap 5 will set HTML <code> Element Styles:

Example

Try It Yourself

<kbd>

Bootstrap 5 will set HTML <kbd> Element Styles:

Example

Try It Yourself

<pre>

Bootstrap 5 will set HTML <pre> Element Styles:

Example

Try It Yourself

More Formatting Classes

The following Bootstrap 5 classes can be further added to the styles of HTML elements:

Class Description Example
.lead Highlight paragraphs. Try It
.text-left Define text aligned to the left. Try It
.text-break Prevent long text from breaking the layout. Try It
.text-center Define text aligned to the center. Try It
.text-decoration-none Remove the underline from links. Try It
.text-end Define text aligned to the right. Try It
.text-nowrap Define text that does not wrap. Try It
.text-lowercase Define lowercase text. Try It
.text-uppercase Define uppercase text. Try It
.text-capitalize Define uppercase text. Try It
.initialism Display text within <abbr> elements in a slightly smaller font. Try It
.list-unstyled Remove the default list-style and left margin for list items (applicable to <ul> and <ol>).
This class is only applicable to direct child list items.
If you need to remove the default list style from any nested lists, also apply this style to nested lists.		 Try It
.list-inline Place all list items on a single line.
Use it together with each <li> element's .list-inline-item.		 Try It