Do you know the latest update of 2019? A overview of our is now available on YouTube

Components

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