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