Error
Documentation and examples for typography, headings, body text, lists, and more.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
<p class="text-left">Left aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-right">Right aligned text on all viewport sizes.</p>
Styling for common inline HTML5 elements.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<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>
Utilities for controlling the transformation of text.
This is lowercase text (.text-lowercase).
This is uppercase text (.text-uppercase).
This text is capitalized (.text-capitalize).
text-lowercase
text-transform: lowercase;
text-uppercase
text-transform: uppercase;
text-capitalize
text-transform: capitalize;
Utilities for controlling the font weight of an element.
This is text-light.
This is text-normal.
This is text-semibold.
This is text-bold.
text-light
font-weight: 300;
text-normal
font-weight: 400;
text-semibold
font-weight: 700;
text-bold
font-weight: 900;
text-decoration-none
text-decoration: none;
text-linethrough
text-decoration: line-through;
Utilities for controlling the leading (line height) of an element.
.leading-tight
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
.leading-snug
.leading-normal
.leading-relaxed
.leading-loose
leading-tight
line-height: 1.25;
leading-snug
line-height: 1.375;
leading-normal
line-height: 1.5;
leading-relaxed
line-height: 1.625;
leading-loose
line-height: 2;