How to do it...

1. Open chapter3/start/app/recipe6.ejs and insert the following code:

      <div class="container mt-5">
       <h1>Chapter 3, Recipe 6:</h1>
       <p class="lead">Align Text Around Images</p>
      <section class="bg-success text-white clearfix mb-3">
       <img src="http://placehold.it/150x150" alt="" class="img-fluid  
       rounded-circle float-left float-sm-right float-md-left float-lg- 
       right float-xl-left p-5">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui  
       temporibus aliquid dignissimos dolor aut at, libero est   
       obcaecati atque culpa, sequi reiciendis nostrum cumque magnam  
       nulla in molestias nesciunt illo?/p>
      </section>

1. In the same file, the closing </section> tag, add another section as per this code snippet:

      <section class="bg-warning clearfix mb-3">
       <img src="http://placehold.it/150x150" alt="" class="img-fluid  
       rounded-circle p-5">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
       Fugit iusto quis inventore. Sint ipsum consectetur molestias   
       consequuntur veritatis earum voluptates officia pariatur, saepe  
       quae illum ipsam omnis ab deleniti, eum.</p>
      </section>

1. Follow it up by adding the third <section> element:

      <section class="bg-danger clearfix mb-3">
       <img src="http://placehold.it/150x150" alt="" class="img-fluid    
       rounded-circle p-5">
       <p class="d-inline">Lorem ipsum dolor sit amet, consectetur        
       adipisicing elit. Fugit iusto quis inventore. Sint ipsum 
       consectetur molestias consequuntur veritatis earum voluptates  
       officia pariatur, saepe quae illum ipsam omnis ab deleniti, eum. 
      </p>
      </section>

1. Finally, let's wrap up this recipe by adding the fourth <section> and then closing </div> for the wrapping container:

      <section class="bg-info text-white clearfix mb-3">
       <img src="http://placehold.it/150x150" alt="" class="img-fluid  
       rounded float-left float-sm-none float-md-left float-lg-none   
       float-xl-left p-5">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
       Voluptate illum praesentium quam aliquam adipisci in ullam,   
       accusantium itaque rem quasi consequatur esse suscipit  
       consequuntur est ad vel enim omnis quibusdam!</p>
      </section>

      </div>

1. Save the file and run harp server. Navigate to localhost:9000/recipe6 in your browser and view the result.