Typography

Typography provides some utilities to add additional styles to texts.

These utilities are:

• Text alignment
• Text transform
• Font weight and italics

Text Alignment

Text alignment is used to easily realign text to components with text alignment classes.

Syntax:

Align text left:

<p class="text-left">Left aligned text.</p>  

Align text center:

<p class="text-center">Center aligned text.</p>  

Align text right:

<p class="text-right">Right aligned text.</p>  

Align text justify:

<p class="text-justify">Justified text.</p>  

Align text no-wrap:

<p class="text-nowrap">No wrap text.</p>  

You can align text on viewports according to their size also.

Left aligned text on viewports sized SM (small) or wider.

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>  

Left aligned text on viewports sized MD (medium) or wider.

<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>     

Left aligned text on viewports sized LG (large) or wider.

<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>  

Left aligned text on viewports sized XL (extra-large) or wider.

<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>  

Text transform

The text capitalization classes are used to transform text in components.

For lowercase text:

Use “text-lowercase” class to make the text appear in lowercase.

Syntax:

<p class="text-lowercase">Lowercased text.</p>  

Output:

lowercased text.

For uppercase text:

Use “text-uppercase” class to make the text appear in uppercase.

Syntax:

<p class="text-uppercase">Uppercased text.</p>  

Output:

UPPERCASED TEXT.

For capitalized text:

Use “text- capitalize” class to make the text’s first letter appear in uppercase.

Syntax:

<p class="text-capitalize">CapiTaliZed text.</p>  

Output:

CapiTaliZed Text.

Font weight and italics

It is used to quickly change the weight (boldness) of text or italicize text.

For bold text:

Use “font-weight-bold” class to make the text weight bold.

Syntax:

<p class="font-weight-bold">Bold text.</p>  

Output:

Bold text.

For normal weight text:

Use “font-weight-normal” class to make the text normal weight.

Syntax:

<p class="font-weight-normal">Normal weight text.</p>  

Output:

Normal weight text.
 

For Italic text:

Use “font-italic” class to make the text italic.

Syntax:

<p class="font-italic">Italic text.</p>