What’s New in Bootstrap 3

Ivaylo Gerchev
Tweet

After months of hard work and joint effort, the brand new version of Bootstrap, a framework of choice for many web designers/developers, has finally come out. It comes with lots of exciting changes and new features, and has been completely rewritten and redesigned to satisfy the latest web trends and user needs. With more than 56,000 stars and over 19,000 forks on GitHub, Bootstrap is still the most popular front-end development framework out there. So, it’s worth checking out.

Let’s see what are the major changes in this release.

  • At first glance you can easily spot that Bootstrap now has a new flat design on all elements and components. Cool! But, as we know, not everyone is a fan of this particular trend, so for this reason there is also an optional theme.
  • In this release, Bootstrap follows the mobile-first approach and makes your site always responsive by default. It’s redesigned and rebuilt to start from your handheld devices and scale up. Responsive CSS is no longer separate and all responsive features are now included into the main file. That can be great for most people, but not everyone needs or wants an adaptive web site or application. If you don’t need an adaptive site you can “turn off” this feature by adding some extra CSS. You can find how to do this in the documentation plus an example that disables the adaptive or responsive features.
  • New powerful grid system. The new grid is significantly simplified and combined into one single grid system: the separate fluid grid system, container, and layout are removed, as they’re down to one grid. It’s now one responsive, mobile-first, fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. And the four tiers of grid classes – phones, tablets, desktops, and large desktops – allow you to create complex and adaptive layouts with ease.
  • More consistent base and sizing classes. Buttons, tables, forms, alerts, and more are now updated to have more consistent classes for easier customization and extensibility.
  • New Glyphicons icon font! The icons which were images in version 2.x, are now in font format and include 40 new glyphs. This makes total of 180 glyphs in font format from the Glyphicon Halflings set.
  • JavaScript plugins are rewritten and all events are now namespaced to prevent any conflicts that may occur.
  • There are two new components. The first one, list group, is for creating simple and complex series of components. Perfect for more complex implementations like email inboxes, or simple ones like a list of options. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. The second, panel, is for easily containing content within a box with an optional heading. It can have a header and/or a footer. Also there are contextual state classes for success, warning, danger, and info.
  • Improved components. Navbar is now always responsive and mobile first and comes with some super handy and re-arrangable subcomponents. Modals are way more responsive on mobile devices and scroll the entire viewport instead of having a max-height. There is also added support for responsive utility classes on table elements.
  • Some components are removed. These are submenus, typeahead, and accordion. Instead of typeahead you can use Twitter’s typeahead.js plugin and accordion can be replaced with the panel component which can be extended to provide the same functionality.
  • Brand new customizer. Now the customizer can save your customizations to an anonymous Gist for easy reuse, sharing, and modifications. It’s been redesigned, is now compiled in the browser instead of Heroku, has better dependency support, and even has built-in error handling.
  • Smallest file size. With the changes made in this release a reduction of over 20% is achieved in the minified CSS file.
  • Dropped Internet Explorer 7 and Firefox 3.6 support.
  • Extended documentation. A lot of new documentation is added, not only for the components, but also for browser support (including gotchas and bugs), third party support (and workarounds), license FAQs, accessibility. Also you can find a section with best practices for customizing Bootstrap. Plus how to migrate from version 2.x to 3.0 and how to disable responsiveness.
  • Updated and new examples. There are new examples added and also one for the Bootstrap’s optional theme.
  • New Bootstrap showcase. If you are curious about what can be done with Bootstrap, you can visit the new Bootstrap Expo website. It’s a web gallery where you can find a collection of different websites built with Bootstrap.

OK. The new version is great, but what about Bootstrap 2.3.2? No problem. If you use this version you can still get to the old documentation. Just head to http://getbootstrap.com/2.3.2/ and you’ll find everything you need including the old customizer.

As you can see, Bootstrap has some nice new features and abilities for you you to play with. When you’re done, you’re very welcome to share your experience in the comments section below.

Keep an eye out for a detailed Bootstrap 3 tutorial coming to SitePoint very soon.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    I still don’t see why someone would you Bootstrap.

  • Eoin

    Great! Thanks guys!

  • Damien

    Build a website wihthout bootstrap, then build one with it, and then you will know why people love it as I do.

  • Ok

    Build a site with bootstrap, then build a site with zurb foundation. And then you will know why people love the latter as I do. Much more meaningful syntax..

  • Darlington

    Thanks…great information

  • Eoin

    I have built with both, I’m leaning towards Bootstrap at the moment.

  • Suresh Ariya

    Nice Post.

  • Anonymous

    The thing is, I also take a look at Foundation but Bootstrap have a bigger community (for now) and bigger comunity means that is easy to get answers. cheers nice post

  • Anonymous

    Could you please let me know where I can find examples for complex forms with the new version. In the previous version we could use row-fluid but now it is not there anymore.
    Thanks

  • Cristiano Rastelli

    I think the most interesting thing in Bootstrap3 is the use of “box-sizing: border-box” in the layoout of elements, thing that make life way much easier if you are a front-end developer.

  • ireflexion

    Nice Post