In this recipe, we will align text around images using default Bootstrap classes.
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.
- 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...