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

<div class="panel clearfix"> <a class="button right">Float Right</a> <a class="button left">Float Left</a> </div>

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

<div class="alert-box [radius round]" data-alert>Alert<a href="#" class="close">&times;</a></div> <div class="progress [radius round]"> <span class="meter" style="width:70%;"></span> </div> <a href="#" class="button [radius round]">Button</a> <span class="label [radius round]">Label</span> <span data-tooltip class="[radius round]" title="Tooltip">Tooltip</span>

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

<p class="text-left"><!-- text goes here --></p> <p class="text-right"><!-- text goes here --></p> <p class="text-center"><!-- text goes here --></p> <p class="text-justify"><!-- text goes here --></p>

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.

<div class="hide"></div>
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »