Join Ray Villalobos for an in-depth discussion in this video Understanding the mobile-first approach, part of Bootstrap 3: New Features and Migration.
- View Offline
One of the biggest Bootstrap 3 announcements is not a new feature but a new approach to building websites called Mobile First. Mobile First is an approach coined by Luke Wroblewski and it means thinking of how websites should be designed for a mobile device first, before you consider how it should work for a desktop. Doing this, makes you focus on the critical information users are looking for on your site and suggests that your design focus on that information first. So how does Bootstrap 3 do this? In the old version of Bootstrap, to activate the responsive features, you had to add a different CSS document. In the new version of Bootstrap, there is a single CSS file that is responsive by default.
There's a single fluid-grid system which uses percentages over pixels and is mobile first. That means that it starts out stacked and scales up instead of starting with a 940-pixel width and scaling up and down, as before. Responsiveness has also been added to modals, which are the pop-up dialogue boxes. The height class is no longer necessary on modals, they also show up larger on bigger displays than the current version. Form input fields also default to 100% width, which means your forms automatically look great on mobile devices.
With the mobile focus, Bootstrap also gains a few additions, including two new components, Panels and List Groups. Panels let you encapsulate an element into a box and easily add a heading. Whereas List Groups are for creating mobile-like lists with chevrons, badges, and other mobile-like sections. With these new additions and changes, Bootstrap 3 changes its focus from a desktop-centric to a mobile-first approach, and although there aren't a lot of new components, List Groups and Panels do add some well needed mobile features.
- Installing Bootstrap 3
- Using the new grid systems
- Working with typography
- Understanding the responsive class updates
- Using panels and list groups
- Migrating from Bootstrap 2.3 to Bootstrap 3.0