A collection of useful text utility classes to style your content.
Text styles
UIkit offers various text utlities to style your text.
| Class | Description |
|---|---|
.uk-text-small | Add this class to decrease the font size. |
.uk-text-large | Add this class to increase the font size. |
.uk-text-bold | Add this class to create bold text. |
.uk-text-muted | Add this class to mute your text. |
.uk-text-primary | Add this class for additional text information. |
.uk-text-success | Add this class to indicate success. |
.uk-text-warning | Add this class to indicate a warning. |
.uk-text-danger | Add this class to indicate danger. |
.uk-text-contrast | Add this class to make the text color readable on flat color areas or pictures. It’s often white. |
Text alignment
Add one of these useful classes to align your text.
| Class | Description |
|---|---|
.uk-text-left | Aligns text to the left. |
.uk-text-right | Aligns text to the right. |
.uk-text-center | Centers text horizontally. |
.uk-text-center-small | Centers text horizontally only on small devices. |
.uk-text-center-medium | Centers text horizontally on medium and small devices. |
.uk-text-justify | Justifies text. |
Example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-leftLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-rightLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-centerLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-center-smallLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-center-mediumLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-justifyVertical alignment
Add one of these classes to vertically align text to an object.
| Class | Description |
|---|---|
.uk-text-top | Aligns text to the top. |
.uk-text-middle | Centers text vertically. |
.uk-text-bottom | Aligns text to the bottom. |
Example
Lorem ipsum.
Lorem ipsum.
Lorem ipsum.
Text wrapping
Add one of these useful classes to wrap your text.
| Class | Description |
|---|---|
.uk-text-truncate | Prevents text from wrapping into multiple lines, truncating it instead. |
.uk-text-break | Breaks strings if their length exceeds the width of their container. |
.uk-text-nowrap | Prevents text from wrapping into multiple lines. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit
.uk-text-truncateLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit
.uk-text-breakAenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.
.uk-text-nowrap