Text Utilities

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Text Justify

.text-justify

Normal Paragraph

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum optio ex nam dolor vel nisi ipsum ab adipisci debitis tempora ratione quia, reiciendis est doloribus perferendis. Cupiditate adipisci fugit incidunt tempora iste porro repudiandae! Consequuntur repellat doloremque commodi quis fugiat iure ullam unde, amet magnam, praesentium tenetur sit. Illum, voluptatem dolore. Non accusamus nam adipisci numquam? Error, totam vel mollitia enim labore voluptatem dolor accusamus esse nostrum natus harum magnam molestias ea ducimus exercitationem quibusdam voluptate? Fuga hic doloremque provident quis nisi omnis eveniet, odio magni natus possimus rem suscipit similique, aliquid laborum voluptates beatae accusamus commodi quas obcaecati culpa?

Justify Paragraph

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum optio ex nam dolor vel nisi ipsum ab adipisci debitis tempora ratione quia, reiciendis est doloribus perferendis. Cupiditate adipisci fugit incidunt tempora iste porro repudiandae! Consequuntur repellat doloremque commodi quis fugiat iure ullam unde, amet magnam, praesentium tenetur sit. Illum, voluptatem dolore. Non accusamus nam adipisci numquam? Error, totam vel mollitia enim labore voluptatem dolor accusamus esse nostrum natus harum magnam molestias ea ducimus exercitationem quibusdam voluptate? Fuga hic doloremque provident quis nisi omnis eveniet, odio magni natus possimus rem suscipit similique, aliquid laborum voluptates beatae accusamus commodi quas obcaecati culpa?

Text Alignment

.text-left or .text-center or .text-right

Left aligned on all viewport sizes

Center aligned on all viewport sizes

Right aligned on all view port sizes

Text Alignment with Breakpoints

.text-{sm, md, lg, xl}-left or .text-{sm, md, lg, xl}-center or .text-{sm, md, lg, xl}-right

Left aligned on all viewport sizes

Center aligned on all viewport sizes

Right aligned on all view port sizes

Text Wrapping and Overflow

.text-nowrap
This text should overflow the parent.

Text Transform

.text-lowercase or .text-uppercase or .text-capitalize

Text Lowercase

text uppercase

text capitalize

teXt capiTaLize

Font Weight & Italics

.font-weight-bold or .font-weight-normal or .font-italic

Bold text.

Normal weight text. No emphasis

Italic text.