Affan - PWA Mobile HTML Template

Text alignment

Copy

<h6 class="text-start text-primary">Left aligned text</h6><h6 class="text-center text-success">Center aligned text</h6><h6 class="text-end text-info">Right aligned text</h6>

Left aligned text

Center aligned text

Right aligned text

Text wrapping

Copy

<div class="badge bg-primary text-wrap">This text should wrap.</div>

This text should wrap.

Text overflow

Copy

<div class="text-nowrap">This text should overflow the parent.</div>

This text should overflow the parent.

Text transform

Copy

<h6 class="text-lowercase">Lowercased text.</h6><h6 class="text-uppercase">Uppercased text.</h6><h6 class="text-capitalize">CapiTaliZed text.</h6>

Lowercased text.

Uppercased text.

CapiTaliZed text.

Font weight and italics

Copy

<p class="font-weight-bold">Bold text.</p><p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p><p class="font-weight-normal">Normal weight text.</p><p class="font-weight-light">Light weight text.</p><p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p><p class="font-italic">Italic text.</p><p class="font-normal">Text without font style</p>

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text without font style

Line height

Copy

<p class="lh-1">...</p><p class="lh-sm">...</p><p class="lh-base">...</p><p class="lh-lg">...</p>

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus.

Text decoration

Copy

<p class="text-decoration-underline">This text has a line underneath it.</p><p class="text-decoration-line-through">This text has a line going through it.</p><a class="text-decoration-none" href="#">This link has its text decoration removed</a>

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed