Typography

Typography can be used to get different size and styles for the text.

Text Size

Use the class .h1, .h2, .h3, .h4, .h5, .h6, .text-small, to get different sizes of text.

This is H1 text.

This is H2 text.

This is H3 text.

This is H4 text.

This is H5 text.

This is H6 text.

This is small text.


<p class="h1">This is H1 text.</p>

<p class="h2">This is H2 text.</p>

<p class="h3">This is H3 text.</p>

<p class="h4">This is H4 text.</p>

<p class="h5">This is H5 text.</p>

<p class="h6">This is H6 text.</p>
            
<p class="text-small">This is small text.</p>

Text Alignment

Use the class .text-center to center the text, .text-left to align left the text, .text-right to align right the text.

This is center text.

This is left text.

This is right text.


<p class="text-center">This is center text.</p>

<p class="text-left">This is left text.</p>

<p class="text-right">This is right text.</p>

Text Style

Use the class .text-bold to get bold text, .text-italic to get italic text, .text-underline to underline the text, .text-slashed to get slashed text.

This is bold text.

This is italic text.

This is underline text.

This is slashed text.


<p class="text-bold">This is bold text.</p>

<p class="text-italic">This is italic text.</p>

<p class="text-underline">This is underline text.</p>

<p class="text-slashed">This is slashed text.</p>

Text Color

Use the class .gray-text to get gray text.

This is gray text.


<p class="gray-text">This is gray text.</p>