How to Wrap Text Around Image in Bootstrap ? Last Updated : 30 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report To wrap text around an image in Bootstrap 5, you can apply the 'float' utility classes along with the 'img-fluid' class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it. ApproachThe code uses Bootstrap 5 classes like container, row, and col-lg class to structure the layout.The float-end class is used to float the image to the right, allowing the text to wrap around it.The imgshadow class adds a shadow effect to the image using CSS.The img-fluid class ensures the image is responsive and adjusts its size based on the screen size.Example: This example describes wrapping text around an image in Bootstrap 5 using Float Class. HTML <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Wrap Text</title> <style> .imgshadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } </style> </head> <body> <section id="about" class="about py-5"> <div class="container"> <div class="row"> <div class="col-lg-7 pt-4 pt-lg-0"> <h1 class="text-success">GeeksforGeeks</h1> <h3>Using Bootstrap 5 Float Class</h3> <br /> <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" class="float-end imgshadow me-3 mb-3" alt="GeeksforGeeks"> <p> GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts, along with interview and exam preparations for upcoming aspirants. With a strong emphasis on enhancing coding skills and knowledge, it has become a trusted destination for over 12 million plus registered users worldwide. The platform offers a vast collection of tutorials, practice problems, interview tutorials, articles, and courses, covering various domains of computer science. </p> </div> </div> </div> </section> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html> Output:Example: This example also describes wrapping text around an image. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Wrapping Around Image</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .content img { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } </style> </head> <body> <div class="container py-5"> <div class="row"> <div class="col-md-8"> <div class="content"> <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="Placeholder Image" class="img-fluid float-md-end me-md-3 mb-3"> <p> How many times were you frustrated while looking out for a good collection of programming/algorithm interview questions? What did you expect and what did you get? This portal has been created to provide well-written, well-thought, and well explained solutions for selected questions. </p> <p> An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in the most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. It is a good platform to learn programming. It is an educational website. Prepare for the Recruitment drive of product-based companies like Microsoft, Amazon, Adobe, etc., with a free online placement preparation course. </p> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to wrap text around circular carousel in Bootstrap 4 ? G gauravggeeksforgeeks Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to wrap text around circular carousel in Bootstrap 4 ? Wrapping up a circular carousel is quite hectic compare to wrapping up a circular image or any shape of the image. In this article first, we have to create a carousel to make that circular, then we can use the text to wrap the carousel. First, you have to create Bootstrap Carousel. To make that caro 2 min read How to align images in Bootstrap 4 ? We know that adding images to a website makes it more attractive and presentable. Sometimes, we need to align the images either at the right or to the left. Most of the time, we place an image at the center. With traditional CSS, we had to write a bunch of code to accomplish this specific task. Boot 4 min read How to Make an Image Rounded in Bootstrap ? In Bootstrap, you can make an image rounded by applying the rounded class to it. This class sets the border-radius property, giving the image rounded corners for a softer and more visually appealing appearance. Below are the approaches to make an image rounded in Bootstrap: Table of Content Using ro 2 min read How to Arrange Images and Text in HTML? In HTML, arranging images and text is essential for creating visually appealing and readable web pages. We can position images in various ways to achieve the desired layout, including the inline with text, above, below, or beside it. Understanding how to align and arrange these elements helps to enh 5 min read How to Align Text in Bootstrap Column ? In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl 3 min read How to make Text Responsive in Bootstrap ? Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices. Below are the approaches to making text responsive in Bootstrap: 3 min read Like