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-left-small
|
Aligns text to the left only on small devices. |
.uk-text-left-medium
|
Aligns text to the left on medium and small devices. |
.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-left
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-right
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-center
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-center-small
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-center-medium
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-text-justify
Vertical 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-truncate
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit
.uk-text-break
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac.
.uk-text-nowrap
