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.
|
||
<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. |
<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 |
<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. |
|
|
Light weight text. |
<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 |
|
|
Prevent text from wrapping. |
.text-break |
To break long string |
<p class="text-muted">Muted text with a <a href="#" class="text-reset">reset link</a></p>