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
.text-{value}
.text-{screen}-{value}
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-start">...</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
.ff-base

Base Font Family

.ff-alt

Alter Font Family

.ff-mono

Mono Font Family

.ff-italic

Italic text line.

.fw-bold

Bold text.

.fw-medium

Medium weight text.

.fw-normal

Normal weight text.

.fw-light

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
.text-reset

Reset a text color

.text-muted

Muted text with a reset link

.text-decoration-none

Remove a text decoration

.text-ellipsis

Ellipsis text & auto dot end

.text-wrap

Wrapping any text

.text-nowrap

Prevent text from wrapping.

.text-break

To break long string

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