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