Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Jen Kramer | Wednesday, August 21, 2013

Bootstrap 3: What You Need to Know

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 gridPrevious 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 themeBootstrap 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

Start your free 10-day trial

Begin learning software, business, and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start your free trial

Share this article:

Tags: , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Start your free trial

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.