How to do it...

1. In workspace/app/index.ejs, at the end of the file, add a call to another partial:

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

1. Create and open _defaultGrid.ejs:

      cd && cd workspace/app/partial && touch _defaultGrid.ejs && c9  
      _defaultGrid.ejs

1. Add the following code to _defaultGrid.ejs:

      <!--
      Recipe 201 - Classes used: container-fluid, container, bg-*, p-*,
      m-*, mt-*, mb-*, lead, text-center, text-white
      -->

      <div class="container-fluid bg-info p-5" id="one"
       data-toggle="tooltip"
       data-placement="bottom"
       data-html="true"

      ></div>

      <div class="container-fluid bg-info p-5 m-5" id="two"
       data-toggle="tooltip"
       data-placement="bottom"
       data-html="true"

      ></div>

      <div class="container-fluid bg-info">
       <div class="container bg-warning p-5" id="three"
       data-toggle="tooltip"
       data-placement="top"
       data-html="true"

       ></div>
      </div>

      <div class="container bg-warning p-5 mt-5 mb-2" id="four"
       data-toggle="tooltip"
       data-placement="top"
       data-html="true"

      ></div>

      <div class="container-fluid bg-inverse p-5" id="five">
       <p class="lead text-center text-white"> This bottom div is here 
       just to help visualise the difference between .mt-5 and .mb-2  
       used on the above div.container</p>
      </div>

1. In app/_layout.ejs, add this code at the very bottom:

       <script>

       $('#one').tooltip('toggle');
       $('#two').tooltip();
       $('#three').tooltip();
       $('#four').tooltip();

       </script>
      </body>
      </html>

1. Add this code to the bottom of main.scss:

       .tooltip-inner {
         text-align: left;
       }

1. Save everything, run grunt and harp server. View your layout in the browser. Resize it to see the behavior of the layout at different resolutions.