CSS Utility Classes

Suit includes a handful of helpful utility classes to add certain behaviors to your elements.

Float Classes

You can change the float behavior of an element by adding .left or .right to an HTML element. To clear floats, add the class .clearfix to the parent element.

Radius and Rounded

The .radius and .round classes allow you to easily apply a border-radius to a UI element. Adding the class to a button group will apply the border radius only to the outside corners.

Radius Alert ×
Radius Button
radius label

Radius Tooltip
Round Alert ×
Round Button
round label

Round Tooltip

Hide An Element

You can add the class .hide to an element to hide it. This will add the property display: none to the element.

<div class="hide"></div>

Text Align Classes

You cange the text alignment of an element by adding .text-left, .text-right, .text-center, or .text-justify to an element.

This text is left aligned. PLAYBAR performs 24 million calculations per second, allowing each driver to add or subtract its output for perfect balance. It contains six woofers and three...


This text is right aligned. PLAYBAR performs 24 million calculations per second, allowing each driver to add or subtract its output for perfect balance. It contains six woofers and three...

This text is center aligned. PLAYBAR performs 24 million calculations per second, allowing each driver to add or subtract its output for perfect balance. It contains six woofers and three...

This text is justified. PLAYBAR performs 24 million calculations per second, allowing each driver to add or subtract its output for perfect balance. It contains six woofers and three...

Align Left Align Right Align Center Justify
.text-left .text-right .text-center .text-justify
.small-text-left .small-text-right .small-text-center .small-text-justify
.small-only-text-left .small-only-text-right .small-only-text-center .small-only-text-justify
.medium-text-left .medium-text-right .medium-text-center .medium-text-justify
.medium-only-text-left .medium-only-text-right .medium-only-text-center .medium-only-text-justify
.large-text-left .large-text-right .large-text-center .large-text-justify
.large-only-text-left .large-only-text-right .large-only-text-center .large-only-text-justify
.xlarge-text-left .xlarge-text-right .xlarge-text-center .xlarge-text-justify
.xlarge-only-text-left .xlarge-only-text-right .xlarge-only-text-center .xlarge-only-text-justify
.xxlarge-text-left .xxlarge-text-right .xxlarge-text-center .xxlarge-text-justify

Left Aligned Examples

This text will be left aligned on small viewports and up.

This text will be left aligned on small viewports only.

This text will be left aligned on medium viewports and up.

This text will be left aligned on medium viewports only.

This text will be left aligned on large viewports and up.

This text will be left aligned on large viewports only.

This text will be left aligned on xlarge viewports and up.

This text will be left aligned on xlarge viewports only.

This text will be left aligned on xxlarge viewports.

Right Aligned Examples

This text will be right aligned on small viewports and up.

This text will be right aligned on small viewports only.

This text will be right aligned on medium viewports and up.

This text will be right aligned on medium viewports only.

This text will be right aligned on large viewports and up.

This text will be right aligned on large viewports only.

This text will be right aligned on xlarge viewports and up.

This text will be right aligned on xlarge viewports only.

This text will be right aligned on xxlarge viewports.

Centered Examples

This text will be centered on small viewports and up.

This text will be centered on small viewports only.

This text will be centered on medium viewports and up.

This text will be centered on medium viewports only.

This text will be centered on large viewports and up.

This text will be centered on large viewports only.

This text will be centered on xlarge viewports and up.

This text will be centered on xlarge viewports only.

This text will be centered on xxlarge viewports.

Justified Examples

This text will be justified on small viewports and up.

This text will be justified on small viewports only.

This text will be justified on medium viewports and up.

This text will be justified on medium viewports only.

This text will be justified on large viewports and up.

This text will be justified on large viewports only.

This text will be justified on xlarge viewports and up.

This text will be justified on xlarge viewports only.

This text will be justified on xxlarge viewports.