--- title: Utility Classes ---

Foundation 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.

HTML

{{#markdown}} ```html ``` {{/markdown}}

Rendered HTML

***

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.

HTML

{{#markdown}} ```html
Alert×
Button Label Tooltip ``` {{/markdown}}

Rendered HTML

Radius Alert×
Radius Button
Radius Label

Radius Tooltip

Round Alert×
Round Button
Round Label

Round Tooltip

***

Text Align Classes

You can change the text alignment of an element by adding `.text-left`, `.text-right`, `.text-center` or `.text-justify` to an element. Adding a size to the front of a text alignment class will cause it to only be applied on that size screen or larger (ex. `.medium-text-center` will center text for everything except small screens). Adding a size and only will apply the text alignment just for that media query (ex. `.medium-only-text-center` will center text just for medium screens).

HTML

{{#markdown}} ```html

``` {{/markdown}}

Rendered HTML

This text is left aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This text is right aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This text is center aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This text is justified. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

Available Text Alignment Classes

`.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`
Align Left Align Right Align Center Justify
***

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. ```html
```