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.

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