A collection of useful text utility classes to style your content.

Text styles

UIkit offers various text utlities to style your text.

ClassDescription
.uk-text-smallAdd this class to decrease the font size.
.uk-text-largeAdd this class to increase the font size.
.uk-text-boldAdd this class to create bold text.
.uk-text-mutedAdd this class to mute your text.
.uk-text-primaryAdd this class for additional text information.
.uk-text-successAdd this class to indicate success.
.uk-text-warningAdd this class to indicate a warning.
.uk-text-dangerAdd this class to indicate danger.
.uk-text-contrastAdd 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.

ClassDescription
.uk-text-leftAligns text to the left.
.uk-text-rightAligns text to the right.
.uk-text-centerCenters text horizontally.
.uk-text-center-smallCenters text horizontally only on small devices.
.uk-text-center-mediumCenters text horizontally on medium and small devices.
.uk-text-justifyJustifies 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.

ClassDescription
.uk-text-topAligns text to the top.
.uk-text-middleCenters text vertically.
.uk-text-bottomAligns text to the bottom.

Example

Lorem ipsum.
Lorem ipsum.
Lorem ipsum.

Text wrapping

Add one of these useful classes to wrap your text.

ClassDescription
.uk-text-truncatePrevents text from wrapping into multiple lines, truncating it instead.
.uk-text-breakBreaks strings if their length exceeds the width of their container.
.uk-text-nowrapPrevents 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