Updated April 4, 2014 with Foundation 5.2.2

Responsive CSS Framework Comparison

Bootstrap vs. Foundation vs. Skeleton

@vermiliondesignRead the blog post

Overview

  Bootstrap 3 Bootstrap 2 Foundation v5 New Foundation v4 Foundation v3 Skeleton
Summary
  • Grids: Fluid
  • UI tools: Lots of widgets; good for rapid prototyping
  • History: Mobile-first update to the style guide for internal tools developed by Twitter
  • Grids: Fluid and fixed
  • UI tools: Lots of widgets; good for rapid prototyping
  • History: Built by Twitter as a style guide for internal tools
  • Grids: Fluid. Best in class grids across all viewports.
  • UI tools: Powerful and modular set of tools. More style agnostic than Bootstrap.
  • History: Performance and efficiency improvements to v4
  • Grids: Fluid. Best in class grids across all viewports.
  • UI tools: Powerful and modular set of tools. More style agnostic than Bootstrap.
  • History: Mobile-first update to the boilerplate developed by ZURB for client projects
  • Grids: Fluid. More robust grid tools than Bootstrap and Skeleton.
  • UI tools: Good for rapid prototyping, but not as expansive as Bootstrap
  • History: Built by ZURB as boilerplate for client projects
  • Grids: Fixed
  • UI tools: Limited
  • History: Style agnostic and intentionally lightweight
Version 3.1.1 2.3.2 5.2.2 4.3.2 3.2.5 1.2
Last Released February 13, 2014 May 17, 2013 April 4, 2014 September 23, 2013 January 26, 2013 June 20, 2012
Website getbootstrap.com getbootstrap.com
/2.3.2
foundation.zurb.com foundation.zurb.com
/docs/v/4.3.2
foundation.zurb.com
/docs/v/3.2.5
getskeleton.com
GitHub github.com/
twbs/bootstrap
github.com/twbs/
bootstrap/releases/
tag/v2.3.2
github.com/zurb/
foundation
github.com/zurb/
foundation/
releases/tag/v4.3.2
github.com/zurb/
foundation/
releases/tag/v3.2.5
github.com/
dhgamache/
Skeleton
Creator Twitter Twitter ZURB ZURB ZURB Dave Gamache
License MIT 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 MIT License
Browser Support Chrome (Mac, Windows, iOS, and Android)
Safari (Mac and iOS only)
Firefox (Mac, Windows)
Opera (Mac and Windows)
IE8+
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, 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 3 is the most recent major release. It focuses on mobile first and has a number of major and minor improvements since version 2.

Major additions include a single fluid grid with classes for phones, tablets, desktops, and large desktop devices (.col-xs-, .col-sm-, .col-md-, and .col-lg-). The nested column syntax also now adds up to 12 columns instead of the column number of the parent element.

All styles (including mobile) are now in one file and have been optimized for performance.

Some new UI elements include list groups and panels.

Support for IE7 and Safari on Windows has been dropped. Also, there are some things to look out for in IE8 and IE9. See here for more info.
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 some time 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 5 is similar to version 4, with some performance improvements and developer tools. In conjunction with v5, ZURB also announced an official enterprise consulting service.

Version 5 switches to jQuery 2, removing support for Zepto, which was added in v4. This change, along with the addition of fastclick.js, should make performance better for both desktop and mobile users.

New templates were also released with v5 for faster prototyping.

On the Sass side, ZURB added Libsass to improve compilation performance.

Finally, the developer docs have been significantly improved.

You can read more here
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 3 Bootstrap 2 Foundation v5 New Foundation v4 Foundation v3 Skeleton
Reset normalize.css normalize.css normalize.css normalize.css normalize.css Inspired by Eric Meyer's reset
LESS Y Y N N N N
Sass/Scss Y N Y Y Y N

Grids and Responsiveness

  Bootstrap 3 Bootstrap 2 Foundation v5 New Foundation v4 Foundation v3 Skeleton
Base width Fluid (480px, 768px, 992px, 1200px) Fluid and fixed (724px, 940px, 1170px; below 768px are single column and vertically stacked) Fluid (max-width 62.5em default) Fluid (max-width 62.5em default) Fluid (max-width 100%) 960px
Columns 12 12 1-16 with customizer (12 default) 1-16 with customizer (12 default) 12-24 with customizer 16
Single column class syntax .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .span1 .small-1.columns .medium-1.columns .large-1.columns .small-1.columns .medium-1.columns .large-1.columns .one.column .one.column
Two column class syntax .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .span2 .small-2.columns .medium-2.columns .large-2.columns .small-2.columns .medium-2.columns .large-2.columns .two.columns .two.columns
Container syntax <div class="container"> <div class="container"> or <div class="container-fluid"> Not available Not available <div class="container"> <div class="container">
Row syntax <div class="row"> <div class="col-xs-2 col-sm-8 col-md-6 col-lg-5">...</div> <div class="col-xs-10 col-sm-4 col-md-6 col-lg-7">...</div> </div> <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> <div class="row"> <div class="small-8 medium-6 large-4 columns">...</div> <div class="small-4 medium-6 large-8 columns">...</div> </div> <div class="row"> <div class="small-8 medium-6 large-4 columns">...</div> <div class="small-4 medium-6 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 Not available <div class="row collapse"> <div class="row collapse"> <div class="row collapse"> Not available
Nested column syntax <div class="row"> <div class="col-md-6"> <div class="row"> <!-- nested columns add up to 12 --> <div class="col-md-2">...</div> <div class="col-md-4">...</div> </div> </div> </div> <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="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="col-lg-4">...</div> <div class="col-lg-4 col-lg-offset-4">...</div> </div> <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="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 Not available <div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> <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 <div class="row"> <div class="col-lg-9 col-lg-push-3">...</div> <div class="col-lg-3 col-lg-pull-9">...</div> </div> 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="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 <div class="row"> <div class="col-xs-3">...</div> <div class="col-xs-9">...</div> </div> Not available <!-- Now done through small- column prefixes: --> <div class="row"> <div class="small-3 columns">...</div> <div class="small-9 columns">...</div> </div> <!-- 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 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> <!-- 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 Screen size based: .visible-xs .visible-sm .visible-md .visible-lg .hidden-xs .hidden-sm .hidden-md .hidden-lg Print based: .visible-print .hidden-print 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-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 /* Small devices - Tablets (>768px) */ @media (min-width: 768px) @media screen and (min-width: 768px) @media (min-width: 768px) and (max-width: 991px) /* Medium devices - Desktops (>992px) */ @media (min-width: 992px) /* Large devices - Desktops (>1200px) */ @media (min-width: 1200px) /* 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) { ... } /* 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 3 Bootstrap 2 Foundation v5 New Foundation v4 Foundation v3 Skeleton
Alerts Y Y Y Y Y N
Badges Y Y Y — .label.round Y — .label.round Y N
Breadcrumbs Y Y Y Y Y N
Buttons Y Y Y Y Y Y
Carousel Y Y Y — Orbit Y — Orbit Y — Orbit N
Collapse/Accordion Y — Panel Y Y — Sections Y — Sections Y N
Dropdown Y Y Y Y Y N
Forms Y Y Y Y Y Y
Form Validation N N Y — Abide Y — Abide N N
Grids Y Y Y Y Y Y
Icons Y — Glyphicons Y — Glyphicons Y — with download Y — with download Y — with download N
Labels Y Y Y Y Y N
Lists Y Y Y Y Y N
Lists (horizontal) Y N Y Y Y N
Media Object Y — Media Object N N N N N
Modal window Y Y Y — Reveal Y — Reveal Y — Reveal N
Navigation Y Y Y Y Y N
Navigation - Sticky Y — Affix Y — Affix Y — Magellan Y — Magellan Y — Magellan N
Navigation - Off Canvas N N Y N N N
Pagination Y Y Y Y Y N
Panels Y N Y Y Y N
Popovers Y — Popover Y — Popover Y — Tooltips Y — Tooltips N N
Pricing tables N N Y Y Y N
Print styles Y Y Y Y Y N
Progress bars Y Y Y Y Y N
Responsive media N N Y — Interchange Y — Interchange N N
Right-to-Left N — bumped to v3.2 N Y — Right-to-Left Support Y — Right-to-Left Support N N
Scrollspy Y Y Y — Magellan Y — Magellan Y — Magellan N
Tables Y Y Y Y Y N
Tabs Y Y Y Y Y Removed in v1.2
Thumbnails Y Y Y Y Y N
Tooltips Y Y Y Y Y N
Tour N N Y — Joyride Y — Joyride Y — Joyride N
Typeahead N Y N N Y N
Typography Y Y Y Y Y Y
Video scaling N N Y Y Y N