Cheat Sheet for Comparing Bootstrap and Foundation CSS Classes

We’ve been talking a lot this week about ZURB’s Foundation 5. It’s a great front-end framework that is a solid alternative to the awesome Bootstrap and deserves at least a look at the features before being dismissed. It does have a few features that Bootstrap doesn’t.

This will be a simple article that will help alleviate moving from Bootstrap over to Foundation. We’ll be comparing the classes for the main parts of both frameworks. For the most part, both frameworks can build out components of your site for you (grid, buttons, forms, tables), so here’s the cheat sheet to see side-by-side classes:

Element Class Comparison

Element Bootstrap Foundation
Alert .alert
.alert-success
.alert-danger
.alert-info 		.alert-box
.success
.warning
.info
.round
.radius
.secondary
Buttons .btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
.btn-lg
.btn-sm
.btn-xs
.btn-block 		.button
.tiny
.small
.large
.secondary
.success
.alert
.radius
.round
.disabled
.expand
Lists .list-unstyled
.list-inline 		.inline-list (will unstyle it also)
Labels .label
.label-default
.label-primary
.label-success
.label-info
.label-warning
.label-danger 		.label
.success
.alert
.secondary
.round
.radius
Tables .table
.table-striped
.table-hover
.table-bordered
.table-condensed
.active
.success
.info
.warning
.danger 		Tables are automatically formatted with borders, stripes, and headers. No extra style classes given.
Panels .panel
.panel-default
.panel-primary
.panel-success
.panel-info
.panel-warning
.panel-danger 		.panel
.callout
.radius
No other colors provided and no syntax for having a header and body of the panel.
Progress Bars .progress-bar
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
.progress-bar-striped
.active 		.progress
.small-#
.large-#
.secondary
.success
.alert
.radius
.round
Text Utilities .text-left
.text-center
.text-right
.text-justify
.text-nowrap
.text-lowercase
.text-uppercase
.text-capitalize
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger 		.text-left
.text-right
.text-center
.text-justify
.small-text-left (also works for medium, large, xlarge)
.small-only-text-left (also works for medium, large, xlarge)
.small-text-center (also works for medium, large, xlarge)
.small-only-text-center (also works for medium, large, xlarge)
.small-text-right (also works for medium, large, xlarge)
.small-only-text-right (also works for medium, large, xlarge)
.small-text-justify (also works for medium, large, xlarge)
.small-only-text-justify (also works for medium, large, xlarge)
Visiblity Classes .visible-*-block
.visible-*-inline
.visible-*-inline-block
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg 		.show-for-small-only (medium, large, xlarge, xxlarge)
.show-for-small-up (medium, large, xlarge, xxlarge)
.hide-for-small-only (medium, large, xlarge, xxlarge)
.hide-for-small-up (medium, large, xlarge, xxlarge)
.show-for-landscape
.show-for-portrait
.show-for-touch
.hide-for-touch
.hidden-for-small-only (medium, large, xlarge, xxlarge)
.hidden-for-medium-up (large, xlarge, xxlarge)
.visible-for-small-only (medium, large, xlarge, xxlarge)
.visible-for-medium-up (large, xlarge, xxlarge)

Conclusion

It’s interesting to see how each accomplishes certain tasks. Foundation uses universal classes like .secondary, .success, .alert, .radius, and .round while Bootstrap prefixes its classes with the element like .btn-, .alert-, and .panel-.

This could act as a cheat sheet and also a comparison chart for what features are supported. Foundation has a lot of visibility classes compared to Bootstrap while Bootstrap has more flexibility in its table creation.

This should serve as an easy guide to moving between the two front-end frameworks. If you need help finding the correct classes for a certain element, let this little cheat sheet be your guide.

Want More Foundation?

Here are some more articles to get you going with Foundation: