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.