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>
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">×</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
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>