20Feb
Text
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
