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.
`.uk-text-capitalize`	Add this class to capitalize the text.
`.uk-text-lowercase`	Add this class to make the text lowercase.
`.uk-text-uppercase`	Add this class to make the text uppercase.

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