Text Utility

Dashlite includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Text alignment

Easily realign text to components with text alignment classes.

Class Reference Value Note
left | right | justify | center Alignment the text
Use {screen} as sm, md, lg, xl, xxl. Please note, {screen} related with breakpoint and will apply from the {screen} to above. For example, .m-sm-2 sets padding on sm screen and continue to above screens.
Uses Example
<p class="text-center">...</p>
<p class="text-center text-lg-left">...</p>

Text transform

Transform text in components with text capitalization classes.

Class Reference Note
.lcap, .text-lowercase lowercased text.
.ucap, .text-uppercase UPPERCASED TEXT.
.ccap, .text-capitalize Capitalized Text.
Uses Example
<p class="text-uppercase">...</p>

Fixed Font Size

Quickly set the fixed size of text.

Class Reference Value
.fs-{value}px 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16
Uses Example
<p class="fs-9px">...</p>

Font Family & Style

Quickly change the weight (boldness) of text or italicize text or font family.

Class Reference Preview

Base Font Family


Alter Font Family


Mono Font Family


Italic text line.


Bold text.


Medium weight text.


Normal weight text.


Light weight text.

Uses Example
<p class="fw-bold">...</p>
<p class="ff-mono">...</p>

Additional Classes

Here is few more classes that will helps you style the text.

Class Reference Note

Reset a text color


Muted text with a reset link


Remove a text decoration


Ellipsis text & auto dot end


Wrapping any text


Prevent text from wrapping.


To break long string

Uses Example
<p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a></p>