Responsive CSS Framework Comparison

Updated December 7, 2015 with Foundation 6

Overview

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2
Summary Updates in version 4.0.0-alpha:
  • Dropped Less in favor of Sass
  • Better grid system for mobile
  • Opt-in flexbox support - use Sass boolean to toggle
  • Wells, Thumbnails, and Panels have been replaced by Cards
  • New reset called Reboot (combination of normalize.css and Bootstrap base styles)
  • Dropped IE8 support
  • Moved from px to rem and em units
  • All JS plugins rewritten in ES6
  • Completely rewritten and improved documentation
Blog post here
  • 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
Version 4.0.0-alpha 3.2 2.3.2
Last Released August 19, 2015 June 26, 2014 May 17, 2013
Website v4-alpha.getbootstrap.com getbootstrap.com getbootstrap.com
/2.3.2
GitHub github.com/
twbs/bootstrap
github.com/twbs/
bootstrap/releases/
tag/v3.3.5
github.com/twbs/
bootstrap/releases/
tag/v2.3.2
Creator Mark Otto and Jacob Thornton at Twitter Mark Otto and Jacob Thornton at Twitter Mark Otto and Jacob Thornton at Twitter
License MIT License MIT License Code: Apache License v2.0
Documentation: CC BY 3.0
Icons: CC BY 3.0 from Glyphicons Free
Browser Support Mobile
  • Chrome - Android and iOS
  • Firefox - Android
  • Safari - iOS
  • Android Browser & WebView - Android
Desktop
  • Chrome - Mac/Win
  • Firefox - Mac/Win
  • IE9+ - Win (IE9 limitations)
  • Opera - Mac/Win
  • Safari - Mac
“Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 8 and below, though they are not officially supported.” -Bootstrap 4 Docs
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"
Vermilion Commentary Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable.

In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com.

Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3.

You can read more here.
Unlike the release from 2 to 3, Bootstrap 3.2 has no major changes from 3.1. Changelog can be found here.

New features include: 1.) Responsive Embeds - classes to proportionately scale down iframes or embeds, 2.) Responsive Utility Classes - now greater control over visibility and hidden classes for block, inline-block, and inline, so now the old .visible-xs can be .visible-xs-block, and 3.) Copy Docs Snippets - usage of 3rd party service ZeroClipboard, to allow for faster copying and pasting for developers of code snippets.

Additional backend/administrative changes of bootstrap were made, including 1.) "LMVTFY" - bootstrap now validates code automatically before adding it in the GitHub repo, 2.) What Bootstrap is calling the "Wall of Browser Bugs" - see more about it at http://getbootstrap.com/browser-bugs/, and 3.) Docs have been updated to be easier to follow.

Many bug fixes were made, among them include: improved progress bar for flexibility, css repaint performance (most notably through scrolling), keyboard navigation added to carousel, modal fix from shifting left upon open.
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.

CSS

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2
Reset reboot.css (_reboot.scss) normalize.css normalize.css
LESS N Y Y
Sass/Scss Y Y N

Grids and Responsiveness

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2
Base width Fluid (0, 34em, 48em, 62em, 75em) Fluid (480px, 768px, 992px, 1200px) Fluid and fixed (724px, 940px, 1170px; below 768px are single column and vertically stacked)
Columns 12 12 12
Single column class syntax .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .col-xl-1 .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .span1
Two column class syntax .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .col-xl-2 .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 .span2
Container syntax <div class="container"> or <div class="container-fluid"> <div class="container"> <div class="container"> or <div class="container-fluid">
Row syntax <div class="row"> <div class="col-xs-2 col-sm-4 col-md-6 col-lg-7 col-xl-8">...</div> <div class="col-xs-10 col-sm-8 col-md-6 col-lg-5 col-xl-4">...</div> </div> <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>
Gutter-free row syntax Not available Not available Not available
Nested column syntax <div class="row"> <div class="col-sm-9"> <div class="row"> <!-- nested columns add up to 12 --> <div class="col-xs-8 col-sm-6">...</div> <div class="col-xs-4 col-sm-6">...</div> </div> </div> </div> <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>
Offset column syntax <div class="row"> <div class="col-md-4">...</div> <div class="col-md-4 col-md-offset-4">...</div> </div> <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>
Centered syntax Not available Not available Not available
Ordering syntax <div class="row"> <div class="col-md-9 col-md-push-3">...</div> <div class="col-md-3 col-md-pull-9">...</div> </div> <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
Four column mobile syntax <div class="row"> <div class="col-xs-3">...</div> <div class="col-xs-9">...</div> </div> <div class="row"> <div class="col-xs-3">...</div> <div class="col-xs-9">...</div> </div> Not available
Block grids syntax Not available Not available Not available
Visibility class syntax Viewport-based: .hidden-xs-down .hidden-sm-down .hidden-md-down .hidden-lg-down .hidden-xl-down .hidden-xs-up .hidden-sm-up .hidden-md-up .hidden-lg-up .hidden-xl-up Print-based: .visible-print-block .visible-print-inline .visible-print-inline-block .hidden-print Viewport-based: .visible-xs .visible-sm .visible-md .visible-lg .hidden-xs .hidden-sm .hidden-md .hidden-lg Can be combined with block, inline-block, and inline, ex: .visible-xs-block .visible-xs-inline-block .visible-xs-inline Print-based: .visible-print .hidden-print Device-based: .visible-desktop .visible-tablet .visible-phone .hidden-desktop .hidden-tablet .hidden-phone
Media queries syntax // Extra small devices (portrait phones, less than ???px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 34em and up) @media (min-width: 34em) { ... } // Medium devices (tablets, 48em and up) @media (min-width: 48em) { ... } // Large devices (desktops, 62em and up) @media (min-width: 62em) { ... } // Extra large devices (large desktops, 75em and up) @media (min-width: 75em) { ... } // Sass mixins @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... } /* 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) {}

UI and Widgets

  Bootstrap 4.0.0-alpha Bootstrap 3 Bootstrap 2
Alerts Y Y Y
Badges N Y Y
Breadcrumbs Y Y Y
Buttons Y Y Y
Carousel Y Y Y
Collapse/Accordion Y — Collapse Y — Panel Y
Dropdown Y Y Y
Forms Y Y Y
Form Validation Y N N
Grids Y Y Y
Icons N Y — Glyphicons Y — Glyphicons
Labels Y Y Y
Lists Y Y Y
Lists (horizontal) N Y N
Media Object Y — Media Object Y — Media Object N
Modals Y Y Y
Navigation Y Y Y
Navigation - Sticky Y — .navbar-fixed- Y — Affix Y — Affix
Navigation - Off Canvas Y — Collapsible content N N
Pagination Y Y Y
Panels Y — now Cards Y N
Popovers Y Y — Popover Y — Popover
Print styles Y Y Y
Progress bars Y Y Y
Responsive media N N N
Right-to-Left Unknown as of Aug 29, 2015. See also: RTL-Bootstrap N — bumped to next version N
Scrollspy Y Y Y
Tables Y Y Y
Tabs Y Y Y
Thumbnails Y — now Cards Y Y
Tooltips Y Y Y
Tour N N N
Typeahead N N Y
Typography Y Y Y
Video scaling Y Y N