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">
  <div class="row">
    <div class="col-sm-3">Column 1 content</div>
    <div class="col-sm-9">Column 2 content</div>
  </div>
  <div class="row">
    <div class="col-sm-3"&gt...