Menu
I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
Here my code:
<article class="row single-post mt-5 no-gutters">
<div class="image-wrapper col-md-6">
<?php the_post_thumbnail(); ?>
</div>
<div class="single-post-content-wrapper p-3">
<?php the_content(); ?>
</div>
</article>
Here what I have now:
Here what I need to have:
481
text-break to set word-wrap: break-word and word-break: break-word . We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.
If you want the text to wrap around the image, then it makes no sense to put them into separate columns to begin with. And for float to work, the element that you apply float to, must come before the content that you want to flow around it. Welcome to Stack Overflow!
Wrap text around a picture or drawing objectSelect the picture or object. Select Format and then under Arrange, select Wrap Text. Choose the wrapping option that you want to apply.
What you did here is use the CSS "float" property, which will pull the image from normal document flow (the way that image would normally display, with the text aligned beneath it) and it will align it to the left side of its container. The text that comes after it in the HTML markup with now wrap around it.
I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
No, in this case, you must use the float-left class for the image. But you don't have to use any wrapper for the image. You can get rid of that wrapper div entirely and add your classes to the image.
Another thing you absolutely must do:
Put all of your content into Bootstrap columns because only Bootstrap columns may be the direct children of Bootstrap rows.
Here's a working code snippet (note: I left the image wrapper div in there but I recommend you get rid of it because that's totally unnecessary code. Add your classes directly to the image):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<article class="row single-post mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-left pr-3">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
</div>Updated for Bootstrap 5.0
<div class="container">
<article class="row mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-start pe-4 ">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
