Text CSS Classes
UIkit offers various text utilities to style your text. You can use those classes in our Extensions to style your text.
Text Alignment
| Class | Description |
|---|---|
uk-text-left | Aligns the text to the left. |
uk-text-center | Aligns the text to the center. |
uk-text-right | Aligns the text to the right. |
uk-text-justify | Justifies the text. |
Text Wrapping
| Class | Description |
|---|---|
uk-text-nowrap | Prevents the text from wrapping. |
uk-text-truncate | Truncates the text with an ellipsis. |
Text Transform
| Class | Description |
|---|---|
uk-text-lowercase | Converts the text to lowercase. |
uk-text-uppercase | Converts the text to uppercase. |
uk-text-capitalize | Capitalizes the text. |
uk-text-lead | Increases the font size of the text. |
Text Styling
| Class | Description |
|---|---|
uk-text-muted | Applies a muted color to the text. |
uk-text-emphasis | Applies an emphasis color to the text. |
uk-text-primary | Applies a primary color to the text. |
uk-text-secondary | Applies a secondary color to the text. |
uk-text-success | Applies a success color to the text. |
uk-text-warning | Applies a warning color to the text. |
uk-text-danger | Applies a danger color to the text. |
uk-text-meta | Applies a meta color to the text. |
uk-text-italic | Add this class to apply an italic styling |
Text Size
| Class | Description |
|---|---|
uk-text-small | Decreases the font size of the text. |
uk-text-large | Increases the font size of the text. |
uk-text-xlarge | Increases the font size of the text. |
Text Weight
| Class | Description |
|---|---|
uk-text-light | Add this class to apply a font-weight of 300 |
uk-text-normal | Add this class to apply a font-weight of 400 |
uk-text-bold | Add this class to apply a font-weight of 700 |
uk-text-lighter | Add this class to apply a lighter font weight |
uk-text-bolder | Add this class to apply a bolder font weight |