logologo-dark

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 ReferenceValueNote
.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-left">...</p>

Text transform

Transform text in components with text capitalization classes.

Class ReferenceNote
.lcap, .text-lowercaselowercased text.
.ucap, .text-uppercaseUPPERCASED TEXT.
.ccap, .text-capitalizeCapitalized Text.
Uses Example
<p class="text-uppercase">...</p>

Fixed Font Size

Quickly set the fixed size of text.

Class ReferenceValue
.fs-{value}px9 | 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 ReferencePreview
.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 ReferenceNote
.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>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?