How to do it...

1. In workspace/app/index.ejs, at the bottom of the file, let's comment out the EJS code. The current code looks like this:

      <%- partial("partial/_defaultGrid") %>

We will comment it out by replacing the third character from - to #:

      <%# partial("partial/_defaultGrid") %>

If you save your index.ejs file now (and if the harp server command is running), when you refresh your Cloud9 users page, the grid that is called by the _defaultGrid partial will be gone.

1. Add another line to index.ejs, and reference another include:

      <%- partial("partial/_chapter2-5-html") %>

1. In main-02-05.scss, add the following code:

      // Recipe 2-5
      $enable-rounded: false;
      $white: whitesmoke;
      $border-width: 1px;
      $font-size-base: 1rem;

      @import "./bower_components/bootstrap/scss/bootstrap.scss";

      $grid-columns: 5;
      $grid-gutter-width-base: 0;
      .img-fluid {margin: 0;}

1. In app/partial, create the _chapter2-5-html.ejs partial, and c9 into it:

      cd && cd workspace/app/partial && touch _chapter2-5.ejs && c9  
      _chapter2-5.ejs

1. Add the following code to the file:

      <div class="container-fluid">
       <div class="row">
       <div class="col-md-1">
       <img class="img-fluid"  
       src="http://placehold.it/767x767/613d7c/ffffff?text=COL-MD-1">
       </div>
       <div class="col-md-1">
       <img class="img-fluid"  
       src="http://placehold.it/767x767/5bc0de/ffffff?text=COL-MD-1">
       </div>
       <div class="col-md-1">
       <img class="img-fluid" 
       src="http://placehold.it/767x767/0275d8/ffffff?text=COL-MD-1">
       </div>
       <div class="col-md-1">
       <img class="img-fluid"   
       src="http://placehold.it/767x767/f0ad4e/ffffff?text=COL-MD-1">
       </div>
       <div class="col-md-1">
       <img class="img-fluid"  
       src="http://placehold.it/767x767/d9534f/ffffff?text=COL-MD-1">
       </div>
       </div>
      </div>

1. Save the changes and preview them in your web page.