How to Wrap Text Around an Image Using Html/Css

Using CSS to wrap text around image and have it behave like a background image

the new overflow:clip applied to the container will do the job

.image {
  float: right;
  max-width: 200px;
  height: auto;
  shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}

.footer {
  width: 100%;
  height: 50px;
  border: 2px solid green
}


/* .text{ 
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
  } */

.container {
  overflow: clip;
}

<div class="container">
  <img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
    quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
  </div>
</div>
<div class="footer">

</div>

How to wrap text around image with CSS?

If it's only about one line and the width of the image is known you can consider the below trick with negative margin and pseudo element:

p:before {  content:"";  display:inline-block;  margin-right:-100px; /* Same as width */}img { float:left; margin-top:1.2em; margin-right:5px;}
/*Clear float*/p:after {  content:"";  display:table;  clear:both;}

<p style="font-size:25px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</p>
<p style="font-size:20px;"><img src="https://picsum.photos/id/0/100/100">lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem lorem ipsuem</p>

Wrapping text around an image in a grid

I achieved your goal without using grid. If you never mind removing grid, this snippet will help you. Otherwise just discard my answer.

<!DOCTYPE html>
<html>
<head>
    <title>
        Wrapping an Image with the text
    </title>
    <style>
        /* This div design part is
            used as an Image */
        .upper-right-cell {
            width: 400px;
            height: 100px;
            float: right;
        }
    </style>
</head>

<body>
    <div class="upper-right-cell">
        <img width="400" height="100" src="https://www.w3schools.com/Css/pineapple.jpg">
    </div>
    <div class="upper-left-cell">
        <span class="button">Button</span><br /><span class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
        </span>
      </div>
</body>
</html>

How to wrap text around image in Bootstrap 5

It need s to be in the same .col as the text, before the <p> and use .float-end

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<section id="about" class="about">
  <div class="container">

    <div class="row">
      <div class="col-lg-7 pt-4 pt-lg-0">
        <h3>Over mij</h3>
        <br />
        <img src="https://via.placeholder.com/100" class="float-end imgshadow" alt="Sample Image">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div style="text-align: left;" class="col-lg-5">

      </div>

    </div>

  </div>
</section>

wrap text around an image in html and css

Credits to Dudley Storey

You need shape-outside: circle();

Reference: https://developer.mozilla.org/en/docs/Web/CSS/shape-outside

@import url(http://fonts.googleapis.com/css?family=Open+Sans);#circle-shape-example {   font-family: Open Sans, sans-serif;   margin: 2rem; }#circle-shape-example p {   line-height: 1.8; }#circle-shape-example .curve {   width: 33%; height: auto;  min-width: 150px;  float: left;  margin-right:2rem;   border-radius: 50%;  -webkit-shape-outside:circle();  shape-outside:circle();}

<div id="circle-shape-example">  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/kiwifruit-on-a-plate.jpg" alt="A photograph of sliced kiwifruit on a while plate" class="curve">    <h1>KiwiFruit</h1>  <p>This is kiwifruit: originally called “yang tao”, “melonette” or Chinese gooseberry. Cultivated in its fuzzy variety from Chinese imports, the fruit proved popular with American military servicemen stationed in New Zealand during World War II, with commercial export to the United States starting after the end of the war. In California, the fruit was rebranded as “kiwifruit” due to its resemblance to New Zealand’s national bird. However, it is not a “kiwi”, which is also the demonym for native New Zealanders. Saying “I’m going to eat a kiwi” implies that you are either a cannibal or planning to dine on an endangered flightless bird.</div>