What’s New in Bootstrap 3

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.