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:

Align text center:

Align text right:

Align text justify:

Align text no-wrap:

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

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

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

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

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

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:

Output:

lowercased text.  

For uppercase text:

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

Syntax:

Output:

UPPERCASED TEXT.  

For capitalized text:

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

Syntax:

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:

Output:

   Bold text.  

For normal weight text:

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

Syntax:

Output:

   Normal weight text.  

For Italic text:

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

Syntax: