Wrapping text around rounded images
In this recipe, we will align text around images using default Bootstrap classes with the addition of the shape-outside CSS property. With shape-outside, we can change the shape of a float area for a floated element, from a square into a circle or even a polygon.
Note
For advanced uses of the shape-outside property, check out the Adobe Brackets editor extension at http://brackets.dnbard.com/extension/brackets-css-shapes-editor.
Getting ready
Navigate to the recipe6 page of the chapter 3 website, and preview the final result that we are trying to achieve. To get this look, we are combining Bootstrap's default .float-*, .img-fluid and .rounded-circle classes, with our custom .wrap-text-around, .circle-placed-right, and .circle-placed-left classes. We will create this look from the empty files readily available in our chapter3-start folder.
How to do it...
- Navigate to
chapter3/start/app/recipe7.ejsand add the following code to the currently empty file:
...
