Cheat sheet for comparing Twitter Bootstrap and Zurb Foundation classes

Zurb Foundation is a cool front-end framework that is a worthy alternative to the bootstrap, and you should at least take a look at the possibilities of the Foundation before rejecting it. Foundation has some features not found in Bootstrap.

This short article is essentially a cheat sheet designed to help developers get started with Foundation after working with Bootstrap. We will compare the main classes for both frameworks. For the most part, both frameworks have a set of main components (grid, buttons, forms, tables), under the cut there is a table of classes comparison for these components.
')

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 (also zeroes styling)
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 stylized without the ability to change styles. using additional framework classes.
Panels	.panel .panel-default .panel-primary .panel-success .panel-info .panel-warning .panel-danger	.panel .callout .radius There are no other colors and no classes to add the panel headings.
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
Utilities for working with text	.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)
Classes for hide / show items	.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)

Comparing classes to build a grid

Bootstrap	Foundation
.container .container-fluid .row .col-xs- # .col-sm- # .col-md- # .col-lg- # .col-xs-offset- # .col-sm-offset- # .col-md-offset- # .col-lg-offset- #	.row .columns .small- # .medium- # .large- # .small-offset- # .medium-offset- # .large-offset- #

Conclusion

It is interesting to see how each framework solves certain tasks. Foundation uses generic classes such as .secondary , .success , .alert , .radius , and .round , while Bootstrap adds prefixes to the classes with the element name: .btn- , .alert- , and .panel- .

This cheat sheet can also be used as a tool for comparing these two frameworks. For example, Foundation has many classes for working with the visibility of an element, and Bootstrap is more flexible in terms of building tables.

This article should serve as a simple guide to migrating from one framework to another. If you need help finding the right class, then let this cheat sheet help you.