Typography

Typography describes the creative design of the text on your web pages.

Heading text

For headings you can use h1, h2, h3, h4, h5, h6 class for different heading sizes, check the below code.

Lorem ipsum is dummy text


<h1 class="h1 m-1">Lorem ipsum is dummy text used in laying out print</h1>

<h2 class="h2 m-1">Lorem ipsum is dummy text used in laying out print</h2>

<h3 class="h3 m-1">Lorem ipsum is dummy text used in laying out print</h3>

<h4 class="h4 m-1">Lorem ipsum is dummy text used in laying out print</h4>

<h5 class="h5 m-1">Lorem ipsum is dummy text used in laying out print</h5>

<h6 class="h6 m-1">Lorem ipsum is dummy text used in laying out print</h6>

Paragraph headings

To use paragraph headings use class p-lg, p-md, p-sm and p-xs.

Lorem ipsum is dummy text used in laying out print


<p class="p-lg m-1">Lorem ipsum is dummy text used in laying out print</p>

<p class="p-md m-1">Lorem ipsum is dummy text used in laying out print</p>

<p class="p-sm m-1">Lorem ipsum is dummy text used in laying out print</p>

<p class="p-xs m-1">Lorem ipsum is dummy text used in laying out print</p>

Text align examples

There are different align text like left, right and center align.

Text align left

Text align center

Text align right


<p class="p-sm m-1 text-left">Text align left</p>

<p class="p-sm m-1 text-center">Text align center</p>

<p class="p-sm m-1 text-right">Text align right</p>

Gray text

Add text-gray class to use gray heading.

Lorem ipsum is dummy text


<h2 class="h2 m-1 text-gray">Lorem ipsum is dummy text used in laying out print</h2>

<p class="p-md m-1 text-gray">Lorem ipsum is dummy text used in laying out print</p>