- 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>
- 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>
- 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>
- 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>
- Save the file and run harp server. Navigate to localhost:9000/recipe6 in your browser and view the result.