Updated March 1, 2013 with Foundation 4 and Bootstrap 2.3.1
Responsive CSS Framework Comparison
Bootstrap vs. Foundation vs. Skeleton
Overview
| Bootstrap UPDATED | Foundation v4 NEW | Foundation v3 | Skeleton | |
|---|---|---|---|---|
| Summary |
|
|
|
|
| Version | 2.3.1 | 4.0 | 3.2 | 1.2 |
| Last Released | Mar 1, 2013 | Feb 28, 2013 | Oct 26, 2012 | Jun 20, 2012 |
| Website | twitter.github.com/bootstrap | foundation.zurb.com | foundation.zurb.com/old-docs/f3 | getskeleton.com |
| GitHub | github.com/twitter/bootstrap | github.com/zurb/foundation | github.com/zurb/foundation | github.com/dhgamache/Skeleton |
| Creator | ZURB | ZURB | Dave Gamache | |
| License | Code: Apache License v2.0 Documentation: CC BY 3.0 Icons: CC BY 3.0 from Glyphicons Free |
MIT License | MIT License | MIT License |
| Browser Support | Desktop: Chrome, Firefox, Safari, Opera, IE7+ Mobile: "tablets and smartphones" |
Desktop: Chrome, Firefox, Safari, IE9+ Mobile: iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface |
Desktop: Chrome, Firefox, Safari, IE8+ Mobile: iOS (iPhone), iOS (iPad), Android 2 (Phone), Android 2 (Tablet), Windows Phone 7 |
Desktop: Chrome, Firefox, Safari, IE7+ Mobile: iPhone, Droid, iPad |
| Vermilion Commentary | Bootstrap 2.3x is the last release cycle before 3.0. Bootstrap is a full featured solution for making a responsive website. Out of the box, styling is minimal but elegant for making prototypes. The default bootstrap UI can be modified by using LESS. The process of setting up LESS with Bootstrap is vague in documentation and took sometime to figure out. In the long run, using variables in LESS works great for updating properties efficiently, especially for larger websites. The component and plugin library is large enough and community support continues to grow. Overall, Bootstrap is a great framework to streamline the process of development. |
Foundation 4 was rewritten as a mobile-first implementation, and has a slightly different grid syntax.
This version provides access to both a small and large grid, so your HTML syntax may become more verbose, but also more flexible. IE8 is no longer supported and the typography has changed from px- to em-based. A detailed migration guide is available. |
Foundation 3 is not quite a drop-in upgrade for v2.
Important changes include removing .container elements, adding modular scale typography, and dropping IE7 support (v3 uses box-sizing: border-box). Visibility classes moved from device-based to feature-based names (.show-on-phones is gone, but .show-on-touch was added). |
Its bag of tricks is very light. That seems to be its purpose, thus the name is fitting.
Responsive considerations seem like a bit of an afterthought. Examples: tabs do not stack for mobile versions; 1-column images (tiny, since it's a 16-column grid) go to full-width (huge) in the two narrow layouts. Documentation on nested columns is wrong: use .row to contain multiple .columns (documentation says to use .columns for everything). And yet, .row does not automatically apply a clearfix for its nested junk, which seems like a natural step. Syntactically similar to 960.gs. |
CSS
| Bootstrap UPDATED | Foundation v4 NEW | Foundation v3 | Skeleton | |
|---|---|---|---|---|
| Reset | normalize.css | normalize.css | normalize.css | Inspired by Eric Meyer's reset |
| LESS | Y | N | N | N |
| SASS/SCSS | N | Y | Y | N |
Grids and Responsiveness
| Bootstrap UPDATED | Foundation v4 NEW | Foundation v3 | Skeleton | |
|---|---|---|---|---|
| Base width | Fluid and fixed (724px, 940px, 1170px; below 767px are single column and vertically stacked) | Fluid (max-width 62.5em default) | Fluid (max-width 100%) | 960px |
| Columns | 12 | 1-16 with customizer (12 default) | 12-24 with customizer | 16 |
| Single column class syntax | .span1 |
.small-one.columns
.large-one.columns |
.one.column |
.one.column |
| Two column class syntax | .span2 |
.small-two.columns
.large-two.columns |
.two.columns |
.two.columns |
| Container syntax | <div class="container>
or
<div class="container-fluid"> |
Not available | <div class="container"> |
<div class="container"> |
| Row syntax | <div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div> |
<div class="row">
<div class="small-4 large-4 columns">...</div>
<div class="small-8 large-8 columns">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="eight columns">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="eight columns">...</div>
</div> |
| Gutter-free row syntax | Not available | <div class="row collapse"> |
<div class="row collapse"> |
Not available |
| Nested column syntax | <div class="row">
<div class="span6">
<div class="row">
<!-- nested columns add up to parent total -->
<div class="span3">...</div>
<div class="span3">...</div>
</div>
</div>
</div> |
<div class="row">
<div class="small-6 columns">
<div class="row">
<!-- nested columns add up to 12 -->
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
</div>
</div>
</div> |
<div class="row">
<div class="six columns">
<div class="row">
<!-- nested columns add up to 12 -->
<div class="six columns">...</div>
<div class="six columns">...</div>
</div>
</div>
</div> |
<div class="row">
<div class="six columns clearfix">
<!-- nested columns add up to parent total -->
<div class="three columns alpha">...</div>
<div class="three columns omega">...</div>
</div>
</div> |
| Offset column syntax | <div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div> |
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="four columns offset-by-four">...</div>
</div> |
<div class="row">
<div class="four columns">...</div>
<div class="four columns offset-by-four">...</div>
</div> |
| Centered syntax | Not available | <div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div> |
<div class="row">
<div class="three columns centered">...</div>
</div> |
Not available |
| Ordering syntax | Not available | <div class="row">
<div class="small-2 push-10 columns">first in mobile/last in desktop</div>
<div class="small-10 pull-2 columns">first in desktop/last in mobile</div>
</div> |
<div class="row">
<div class="two columns push-ten">first in mobile/last in desktop</div>
<div class="ten columns pull-two">first in desktop/last in mobile</div>
</div> |
Not available |
| Four column mobile syntax | Not available | <!-- Now done through small- column prefixes: -->
<div class="row">
<div class="small-3 columns">...</div>
<div class="small-9 columns">...</div>
</div> |
<div class="row display">
<div class="three mobile-one columns">...</div>
<div class="nine mobile-three columns">...</div>
</div> |
Not available |
| Block grids syntax | Not available | <!-- Using only the small-block-grid -->
<ul class="small-block-grid-2">
<li>...</li>
<li>...</li>
</ul>
<!-- Using only the large-block-grid -->
<ul class="large-block-grid-4">
<li>...</li>
<li>...</li>
</ul>
<!-- Using both block grids together for different layouts -->
<ul class="small-block-grid-2 large-block-grid-4">
<li>...</li>
<li>...</li>
</ul> |
<ul class="block-grid two-up">
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
</ul> |
Not available |
| Visibility class syntax | Device based:
.visible-desktop
.visible-tablet
.visible-phone
.hidden-desktop
.hidden-tablet
.hidden-phone |
Screen size based:
.show-for-small
.show-for-medium-down
.show-for-medium
.show-for-medium-up
.show-for-large-down
.show-for-large
.show-for-large-up
.hide-for-small
.hide-for-medium-down
.hide-for-medium
.hide-for-medium-up
.hide-for-large-down
.hide-for-large
.hide-for-large-up
Orientation based:
.show-for-landscape
.show-for-portrait
.hide-for-landscape
.hide-for-portrait
Device based:
.show-for-touch
.hide-for-touch |
Screen size based:
.show-for-xlarge
.show-for-large
.show-for-large-up
.show-for-medium
.show-for-medium-down
.show-for-small
.hide-for-xlarge
.hide-for-large
.hide-for-large-up
.hide-for-medium
.hide-for-medium-down
.hide-for-small
Landscape based:
.show-for-landscape
.show-for-portrait
Touch based:
.show-for-touch
.hide-for-touch
Print based:
.print-only
.hide-on-print |
Not available |
| Media queries syntax | /* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... } |
/* Styles for screens that are at least 768px; */
@media only screen and (min-width: 48em) { ... }
/* Medium Displays: 768px - 1279px */
@media only screen and (min-width: 48em) { ... }
/* Large Displays: 1280px - 1440px */
@media only screen and (min-width: 80em) { ... }
/* X-Large Displays: 1400px and up */
@media only screen and (min-width: 90em) { ... }
/* Orientation: landscape */
@media screen and (orientation: landscape) { ... }
/* Orientation: portrait */
@media screen and (orientation: portrait) { ... }
/* Foundation Block Grids for above small breakpoint */
@media only screen and (min-width: 48em) { ... }
/* Top bar */
@media only screen and (min-width: 58.75em) { ... } |
/* Very large display targeting */
@media only screen and (min-width: 1441px) { ... }
/* Medium display targeting */
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }
/* Small display targeting */
@media only screen and (max-width: 767px) { ... }
/* Small display targeting */
@media only screen and (max-width: 767px) { ... }
/* Landscape orientation targeting */
@media screen and (orientation: landscape) { ... }
/* Portrait orientation targeting */
@media screen and (orientation: portrait) { ... }
/* Mobile styles */
@media only screen and (max-device-width: 1280px) { ... }
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... } |
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { ... }
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) { ... }
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { ... } |
UI and Widgets
| Bootstrap UPDATED | Foundation v4 NEW | Foundation v3 | Skeleton | |
|---|---|---|---|---|
| Alerts | Y | Y | Y | N |
| Badges | Y | Y — .label.round | Y | N |
| Breadcrumbs | Y | Y | Y | N |
| Buttons | Y | Y | Y | Y |
| Carousel | Y | Y — Orbit | Y — Orbit | N |
| Collapse/Accordion | Y | Y — Sections | Y | N |
| Dropdown | Y | Y | Y | N |
| Forms | Y | Y | Y | Y |
| Grids | Y | Y | Y | Y |
| Icons | Y | Y — with download | Y — with download | N |
| Labels | Y | Y | Y | N |
| Lists | Y | Y | Y | N |
| Lists (horizontal) | N | Y | Y | N |
| Modal window | Y | Y — Reveal | Y — Reveal | N |
| Navigation | Y | Y | Y | N |
| Pagination | Y | Y | Y | N |
| Panels | N | Y | Y | N |
| Popovers | Y — Popover | Y — Tooltips | N | N |
| Pricing tables | N | Y | Y | N |
| Print styles | Y | Y | Y | N |
| Progress bars | Y | Y | Y | N |
| Scrollspy | Y | Y — Magellan | N | N |
| Tables | Y | Y | Y | N |
| Tabs | Y | Y | Y | Removed in v1.2 |
| Thumbnails | Y | Y | Y | N |
| Tooltips | Y | Y | Y | N |
| Tour | N | Y — Joyride | Y — Joyride | N |
| Typeahead | Y | N | Y | N |
| Typography | Y | Y | Y | Y |
| Video scaling | N | Y | Y | N |