Typography
Change the size, weight, and other font properties of the text
Heading
Use .heading-1 to .heading-6 to create a heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
<h1 class="heading-1">Heading 1</h1>
<h2 class="heading-2">Heading 2</h2>
<h3 class="heading-3">Heading 3</h3>
<h4 class="heading-4">Heading 4</h4>
<h5 class="heading-5">Heading 5</h5>
Paragraph
Control the font size of an element using the .text-{size} utilities.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
<p class="text-xl">Lorem Ipsum</p>
<p class="text-lg">Lorem Ipsum</p>
<p class="text-md">Lorem Ipsum</p>
<p class="text-base">Lorem Ipsum</p>
<p class="text-sm">Lorem Ipsum</p>
Font Weight
Change the font weight of an element using the .font-{weight} utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="font-weight-light ...">The quick brown fox ...</p>
<p class="font-weight-regular ...">The quick brown fox ...</p>
<p class="font-weight-medium ...">The quick brown fox ...</p>
<p class="font-weight-semi-bold ...">The quick brown fox ...</p>
<p class="font-weight-bold ...">The quick brown fox ...</p>
<p class="font-weight-black ...">The quick brown fox ...</p>
Text Alignment
Control the text alignment of an element using the .text-{align} utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="text-left">The quick brown fox ...</p>
<p class="text-center">The quick brown fox ...</p>
<p class="text-right">The quick brown fox ...</p>
<p class="text-justified">The quick brown fox ...</p>
Text Decoration
Control the text decoration with the .text-{decoration} utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="text-underline ...">The quick brown fox ...</p>
<p class="text-overline ...">The quick brown fox ...</p>
<p class="text-line-through ...">The quick brown fox ...</p>
<p class="text-decoration-none ...">The quick brown fox ...</p>
Text Transform
Control the text transform with the .text-{transform} utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="text-normal-case ...">The quick brown fox ...</p>
<p class="text-uppercase ...">The quick brown fox ...</p>
<p class="text-lowercase ...">The quick brown fox ...</p>
<p class="text-capitalize ...">The quick brown fox ...</p>