How to Wrap Text Around Image in Bootstrap ?

Last Updated : 30 Jul, 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/[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:

How to align images in Bootstrap 4 ?

gauravggeeksforgeeks

Improve

Article Tags :

How to Wrap Text Around Image in Bootstrap ?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?