Aligning text around images

In this recipe, we will align text around images using default Bootstrap classes.

Getting ready

Navigate to the recipe6 page of the chapter 3 website, and preview the final result that we are trying to achieve. The key section of this recipe is the <img> HTML element, and its CSS classes, as specified in its class attribute.

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...