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> <!-- 25% -->
    <div class="col-sm-9">Column 2 content</div> <!-- 75% -->
  </div> 
  <div class="row"> 
    <div class="col-sm-3">Column 1 content</div> <!-- 25% -->
    <div class="col-sm-6">Column 2 content</div> <!-- 50% -->
    <div class="col-sm-3">Column 3 content</div> <!-- 25% -->
  </div>
</div>

The outermost layer is the .container or .container-fluid element. Containers provide a means to center or horizontally pad the content. Containers marked as .container-fluid act as if they have width: 100%, meaning they expand to fill the horizontal space.

A .row is what it sounds like, a "row". Technically, a row is a wrapper for columns. Containers are wrappers for rows, and rows are wrappers for columns, and columns contain the stuff displayed to our users. Got that?

Columns are marked with variations of the .col class. With the basic column class, .col, the columns divide equally into the available space. You can specify a numerical column count to assign different widths to each column. Bootstrap supports up to 12 numbered columns, hence each row in the example adds up to 12 columns. 

You can also specify a breakpoint to which the column applies: 

• Using col-xs targets extra-small devices (smartphones, <576px)
• Using col-sm targets small devices (>= 576px)
• Using col-md targets medium devices (>= 768px)
• Using col-lg targets large devices (>= 992px)
• Using col-xl targets extra-large devices (>= 1200px)

Specifying a breakpoint, for example col-sm, means that it applies to devices matching that breakpoint, or larger. Hence, in the example shown earlier, the column definitions applied to col-sm, col-md, col-lg, and col-xl devices, but not to col-xs devices.

The column count is appended to the class name. That means using col-# when not targeting a breakpoint, for example, col-4,  or col-{breakpoint}-# when targeting a breakpoint, for example, col-md-4. If the columns add up to more than 12, the columns beyond the twelfth column wrap around to become a new row. The word auto can be used instead of a numerical column count to size the column to the natural width of its content.

It's possible to mix and match to target multiple breakpoints:

<div class="container-fluid"> 
  <div class="row"> 
    <div class="col-xs-9 col-md-3 col-lg-6">Column 1 content</div> 
    <div class="col-xs-3 col-md-9 col-lg-6">Column 2 content</div> 
  </div> 
  ...
</div>

This declares three different layouts, one for extra-small devices, another for medium devices, and the last for large devices. This gives us enough to start modifying the Notes application. The grid system can do a lot more. For details, see the documentation: http://getbootstrap.com/docs/4.0/layout/grid/.