Reader small image

You're reading from  Bootstrap 4 Cookbook

Product typeBook
Published inJun 2017
Reading LevelBeginner
PublisherPackt
ISBN-139781785889295
Edition1st Edition
Languages
Right arrow
Author (1)
Ajdin Imsirovic
Ajdin Imsirovic
author image
Ajdin Imsirovic

Ajdin Imsirovic is a full-stack web developer who has published several courses on the subject of web design and web development. He has also authored three books, Bootstrap 4 Cookbook, Elm Web Development, and Vue.js Quick Start Guide. In his fourth book, Vue CLI 3 Quick Start Guide, he introduces readers to the rich ecosystem of frontend tooling and best practices.
Read more about Ajdin Imsirovic

Right arrow

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...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Bootstrap 4 Cookbook
Published in: Jun 2017Publisher: PacktISBN-13: 9781785889295

Author (1)

author image
Ajdin Imsirovic

Ajdin Imsirovic is a full-stack web developer who has published several courses on the subject of web design and web development. He has also authored three books, Bootstrap 4 Cookbook, Elm Web Development, and Vue.js Quick Start Guide. In his fourth book, Vue CLI 3 Quick Start Guide, he introduces readers to the rich ecosystem of frontend tooling and best practices.
Read more about Ajdin Imsirovic