Mobile-first design for the Notes application

We've come a fair way already, learning about the basics of responsive design and Bootstrap, and we hooked the Bootstrap framework into our application. Now ,we're ready to launch into a redesign of the application so that it works well on mobiles and uses some Bootstrap components to make improvements.

Laying the Bootstrap grid foundation

Bootstrap uses a 12-column grid system to control layout, giving applications a responsive mobile-first foundation on which to build. It automatically scales components as the viewport changes size or shape. The method relies on <div> elements with classes to describe the role each <div> plays in the layout.

The basic layout pattern is as follows:

<div class="container-fluid"> ...

Get Node.js Web Development - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.