Example Try It

 <h1>h1. Bootstrap Heading <small>Additional text</small></h1>
 <h2>h2. Bootstrap Heading <small>Additional text</small></h2>
 <h3>h3. Bootstrap Heading <small>Additional text</small></h3>
 <h4>h4. Bootstrap Heading <small>Additional text</small></h4>
 <h5>h5. Bootstrap Heading <small>Additional text</small></h5>
 <h6>h6. Bootstrap Heading <small>Additional text</small></h6>

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.

 
<p class="h1">.h1 (Semibold 36px)</p>

Display Headings

Bootstrap also provides display headings that can be used when you need a heading to stand out. Display headings are displayed in larger font-size but lighter font-weight. Six different display headings are available. Here's is an example:

<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>
<h1 class="display-5">Display Heading 5</h1>
<h1 class="display-6">Display Heading 6</h1>

Working with Paragraphs

Bootstrap's global default font-size is 1rem (typically 16px), with a line-height of 1.5 (typically 24px), which is applied to the  element as well as all the paragraphs i.e. the 

 elements. In addition to that margin-bottom of 1rem is also applied to all the paragraphs. You can also make a paragraph stand out by adding the class .lead on it.

<p>This is how a normal paragraph looks like in Bootstrap.</p>
<p class="lead">This is how a paragraph stands out in Bootstrap.</p>

Text Formatting

You are free to use text formatting tags like.<strong>,<i>,<small> to make your text bold, italic, small and so on, in the same way you do in simple HTML page.

You can use the mark tag to <mark>highlight</mark> text.
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>
<ins>This line of text is meant to be treated as an addition to the document.
<u>This line of text will render as underlined.</u>
<small>This line of text is meant to be treated as fine print.</small>
<strong>This line rendered as bold text.</strong>
<em>This line rendered as italicized text.</em>

Text Alignment

You can easily align text to left, right, and center using the text alignment classes.

<p class="text-start">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">Right aligned text on all viewport sizes.</p>

Align text based on screen size:

We can also align text based on screen size using the responsive text alignment classes. These classes use the same viewport width breakpoints as the grid system.

Text Transformation

We can also transform the text to lowercase, uppercase or make them capitalize.

<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>

Text Coloring

Colors are the powerful method of conveying important information in website design. Bootstrap has handful of emphasis utility classes that can be used for this purpose such as showing success message in green color, warning or error message in red color, etc.

<p class="text-primary">Primary: Please read the instructions carefully before proceeding.</p>
<p class="text-secondary">Secondary: This is featured has been removed from the latest version.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Info: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Danger: An error has been occurred while submitting your data.</p>
<p class="text-muted">Muted: This paragraph of text is grayed out.</p>

Truncating Long Text

For longer text, you can use the class .text-truncate to truncate the text with an ellipsis. The display property value of the element must be inline-block or block. It is particularly helpful in a situation where you want to display a piece of text in a single line but there is no enough space available.

<!-- Block level element -->
<div class="row">
<div class="col-2 text-truncate">
        The quick brown fox jumps over the lazy dog.
</div>
</div>


<!-- Inline level element -->
<span class="d-inline-block text-truncate" style="max-width: 100px;">
    The quick brown fox jumps over the lazy dog.
</span>

Text wrapping and Overflow

You can use the class .text-wrap to wrap the text within an element by overwriting its white-space property if it is set to pre or nowrap, such as Bootstrap badge components. Similarly, you can use the class .text-nowrap to prevent text from wrapping within an element.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
    This text will wrap.
</div>
<div class="bg-warning text-nowrap" style="width: 6rem;">
    This text will overflow the element's box.
</div>

Wrapping Long Word

You can use the class .text-break to prevent long word from breaking your layout.

<div class="row">
<div class="col-2">
<p class="text-break">veryveryveryveryveryveryverylongword</p>
</div>
</div>

Text utilities

Change text alignment, transform, style, weight, line-height, decoration and color with our text utilities and color utilities.

Abbreviations

Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies. Add .initialism to an abbreviation for a slightly smaller font-size.

<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Blockquotes

For quoting blocks of content from another source within your document. Wrap around any HTML as the quote.

<blockquote class="blockquote">
 <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Naming a source

The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well.

<figure>
 <blockquote class="blockquote">
 <p>A well-known quote, contained in a blockquote element.</p>
 </blockquote>
 <figcaption class="blockquote-footer">
 Someone famous in <cite title="Source Title">Source Title</cite>
 </figcaption>
</figure>

Alignment

Use text utilities as needed to change the alignment of your blockquote.

<figure class="text-center">
 <blockquote class="blockquote">
 <p>A well-known quote, contained in a blockquote element.</p>
 </blockquote>
 <figcaption class="blockquote-footer">
 Someone famous in Source Title</cite>
 </figcaption>
</figure>

<figure class="text-end">
 <blockquote class="blockquote">
 <p>A well-known quote, contained in a blockquote element.</p>
 </blockquote>
 <figcaption class="blockquote-footer">
 Someone famous in <cite title="Source Title">Source Title</cite>
 </figcaption>
</figure>