How to Wrap Text Around Image in Bootstrap ?

Last Updated : 05 Mar, 2024

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/bootstrap@5.3.0/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">
        <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>
                    <h3></h3>
                    <br />
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                         class="float-end imgshadow me-3" alt="">
                    <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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
      </script>
</body>
 
</html>

Output:

dfr

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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
 
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <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>
</body>
 
</html>