I’m trying to wrap a text around the image. The image is on the left side and text in the right.
I’m using bootstrap latest version and both sides are col-3 and col-9. Why the text doesn’t go below the image when it is longer than the image and why the image seems to take whole height of the page?
This is how my code looks like
<div class="row intext">
<div class="col-sm-3 img-hover">
<figure class="figure">
<p class="lead fw-bold text-center">"TTTTTTTTTTT"</p>
<p style="text-align: center;">Some text</p>
<img src="http://placekitten.com/g/600/400" class="card-img-top" alt="">
<figcaption>Copyright</figcaption>
</figure>
<p style="text-align: center;"><a href="" class="btn btn-primary">Click to Learn More</a></p>
</div>
<div class="col-sm-9">
<p>Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem </p>
... more text
</div>
</div>
Here is working demo: https://jsfiddle.net/ymbnx7w6/1/
2
Answers
I think you want something like this instead of row, column just use float-start class of bootstrap I just removed your col-9, row and add float-start instead of col-3
Your image just needs a float value – in this case "float: left;" so the text knows how to deal with the image. This deals with the image only, not sure what you want to do wit the "copyright" area.
https://jsfiddle.net/jasonbruce/akv34wus/1/