Open In App

How to Wrap Text Around Image in Bootstrap ?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
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.

Approach

  • The 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:


G

gauravggeeksforgeeks
Improve
Article Tags :

Explore

Lightbox