Text

Heading sizes with native heading tags

{{< example >}}

<h1>h1 heading</h1> <h2>h2 heading</h2> <h3>h3 heading</h3> <h4>h4 heading</h4> <h5>h5 heading</h5> <h6>h6 heading</h6> {{< /example >}}

Heading sizes with heading classes

tip: you can use heading classes to style a native heading tag differently.

{{< example >}}

<p class="h1">h1 heading</p> <p class="h2">h2 heading</p> <h1 class="h3">h3 heading</h1> <p class="h4">h4 heading</p> <p class="h5">h5 heading</p> <p class="h6">h6 heading</p> {{< /example >}}

Native text tags

{{< example >}}

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

Custom text tags

{{< example >}}

<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="fw-bold">Bold text.</p> <p class="fw-normal">Normal weight text.</p> <p class="fst-italic">Italic text.</p> <p class="text-muted"> Muted text with a <a href="#" class="text-reset">reset link</a>. </p> {{< /example >}}

For screenreaders

<h2 class="visually-hidden">Title for screen readers</h2> <a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Text truncation

<!-- Block level --> <div class="row"> <div class="col-2 text-truncate"> Praeterea iter est quasdam res quas ex communi. </div> </div> <!-- Inline level --> <span class="d-inline-block text-truncate" style="max-width: 150px;"> Praeterea iter est quasdam res quas ex communi. </span>