Bootstrap 3: What you need to know

Published by | Wednesday, August 21st, 2013

Bootstrap 3 is out.

Bootstrap 3, the popular HTML5 front-end design framework (and top-starred project on GitHub), has finally been released—and what a release it is! With tons of new features and a revised API, there’s much to enjoy. Here are some of the new features and things to keep in mind when working with Bootstrap 3.

Mobile-first and fully responsive
The Bootstrap 3 framework has been entirely rewritten to follow mobile-first design principles, so you can more easily build responsive web experiences that adapt gracefully from smaller to larger screens.

A new layout grid
Previous versions of Bootstrap featured a simplistic grid system for layout, but designers now get full control of the CSS layout grid in Bootstrap 3. There are four new grid sizes to support phones, tablets, desktops, and large desktops—incredibly useful for laying out pages or thumbnail galleries. You can also now change the source ordering of your page elements, to better optimize your layouts.

A new way of working
Old conventions in Bootstrap have been revisited, and in many cases renamed. For example, the old Hero Unit is now called a Jumbotron. The layout grid classes have been completely overhauled. Many other changes have been made as well, so if you’re currently using Bootstrap 2.x, you’ll need to be careful. You can’t simply swap your old CSS stylesheets and JavaScript files for the new versions and have everything work as expected, but fortunately there are some great resources available for migrating your Bootstrap site. lynda.com members can watch Ray Villalobos’s course Bootstrap 3: New Features and Migration, refer to this automated migration method, or follow along with this migration guide to get started on upgrading your sites.

A built-in icon font
The previous releases of Bootstrap included icons in the form of image sprites, but Bootstrap 3 ships with an icon font and 40 glyphs that you can use in your site designs.

Bootstrap’s first theme
Bootstrap has gone to a flat design in version 3, but also includes an optional visual theme similar to the previous design, should you miss the look and feel of Bootstrap 2.x.

The excitement around Bootstrap 3 is just beginning!
Be sure to watch our Bootstrap courses at lynda.com, and keep a close eye on the Bootstrap project, because they’re already planning version 3.1, with many more great features on the way. Enjoy!

More Resources:

Get Bootstrap

All Jen Kramer’s courses on lynda.com

All Bootstrap courses on lynda.com

Share this:Share on Facebook49Tweet about this on Twitter19Share on Google+18Pin on Pinterest0Share on LinkedIn5

lynda.com - start learning today

Tags: , , , , ,


3 Responses to “Bootstrap 3: What you need to know”

  1. Jen Kramer says:

    Wondering whether Bootstrap or ZURB Foundation is right for your next project? Check out the slides from my recent talk at the Northeast PHP conference:

    http://www.slideshare.net/jen4web/comparing-bootstrap-and-foundation

  2. NM says:

    I haven’t seen the slides yet, but one reason why I went with BS instead of Foundation is because BS seems to be the most used framework in government agencies. So, to me, it wasn’t about which was a better fit for my project, it came down to what tool do I need to know if I want job stability within government agencies. I actually preferred Foundation over BS, although I haven’t yet used BS3 (only BS2). Thanks for your BS videos! I can’t wait to watch the new ones.

    • Jen Kramer says:

      That’s a potential reason for adopting one framework over the other as well. I’ve seen that with content management systems also, where an agency/institution adopts one CMS as the solution that all will use.

      Bootstrap 3 did close a big gap that existed between Bootstrap 2 and Foundation 4. The new grid system in Bootstrap 3 is a huge improvement, as is the mobile-first approach. However, Foundation comes with JavaScript that can be used for managing responsive images (Interchange) and Javascript for error-checking a form (Abide), neither of which is present in Bootstrap.

      I think Bootstrap and Foundation are both awesome frameworks, and they do address different issues and problems. I cover more of that in the link to my slides and spreadsheet.

Leave a Reply