Wrap text around an image on bootstrap 3
When using 2 columns the text will never get wrapped around the image.
You should put the image and text in one column and give it full with. Then wrap the text and image in a div and float them to the left. Something in the line of this (code is an example and not tested):
<div class="col-md-12">
<div class="pull-left"><img src="YourImage.png"/></div>
<div class="pull-left">Your text goes here......</div>
</div>
You might need some margin on the image so the text doesn't stick to close to the image
Bootstrap 3 wrap text around image
I propose to duplicate the image. We will place the first instance before the text. This one will be float: right; on the wide screen. The second instance will be placed after the text. It will be visible on the narrow screen.
.img-clone-1 { max-width: 60%; margin: 18px 0 18px 18px;}.img-clone-2 { width: 100%; margin: 12px 0;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container"> <div class="row"> <div class="col-xs-12 col-magic"> <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-1 hidden-xs pull-right"> <h2 class="blue-header">Test Project</h2> <p class="first-para">Marshmallow donut wafer oat cake chocolate bar jelly beans dragée. Donut macaroon lollipop. Chocolate cake dragée pastry donut cupcake dragée danish jelly-o. Jelly-o marzipan pastry cotton candy pudding halvah pastry pastry. Tart lemon drops bear claw sugar plum wafer. Icing icing gummies donut pie topping toffee muffin. Danish macaroon cookie toffee bear claw. Icing cheesecake pie cake pie fruitcake brownie. Gummi bears chocolate bar marshmallow chupa chups. Tart pudding tiramisu tootsie roll cake icing chocolate pie. Marshmallow donut cheesecake. Brownie halvah toffee ice cream powder lollipop wafer liquorice. Pudding dessert carrot cake pastry oat cake dessert toffee topping cheesecake. Lemon drops jelly-o chupa chups dragée. Pie muffin liquorice tiramisu icing oat cake brownie bear claw. Cake halvah soufflé caramels tiramisu.</p> <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97300&w=600&h=300" class="img-clone-2 visible-xs img-responsive"> </div> </div></div>Wrap text around bootstrap image
<div class="row">
<div class="col-xs-12 col-sm-5">
<img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
</div>
<div class="col-xs-12 col-sm-7">
<div class="row">
<div class="col-sm-6">
<h2>{!!$blogPost->title!!}</h2>
</div>
<div class="col-sm-6">
<h3 class="pull-right">
{{$blogPost->created_at}}
</h3>
</div>
</div>
</div>
{!! Purifier::clean($blogPost->message) !!}
<div class="col-xs-12">
<hr />
</div>
</div>
Wrapping the title and created at date in a new column to compliment the width of the image and setting all the other text outside any column did the trick for me.
A small downside is that the margins don't line up but I am sure I'll find a fix for that using some custom CSS.
Wrapping Text Around in Image Within A Bootstrap Column
I am providing solutions for both Bootstrap 4 and Bootstrap 5. For more detailed information, I recommend you to review the documents about clearfix and w-100 from Bootstrap's web site.
This is Bootstrap 4 solve:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<section class="row">
<div class="col background-white py-3">
<div class="clearfix">
<img src="https://picsum.photos/100/100" class="col-md-2 w-25 rounded float-left" alt="...">
<p class="d-inline"> <!--have to figure out how to wrap this-->
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
</p>
</div>
</div>
<div class="col-md-4">
<!--Space Holder-->
</div>
</section>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>Bootstrap - Wrap text around image not working
Try adding pull-left along with imagePost in your jade/pug file if you are using bootstrap 3.3. You can also remove the last wrapper div with float none. Final code will looks like this.
div.col-md-6
img.imagePost.pull-left(src=`/{{{blogPost['feature-image-2']}}}`)
| {{#if blogPost['feature-image-3'] == ""}}
video.postVideo(controls)
source(src=`/{{{blogPost['video']}}}`)
| {{else}}
img.imagePost.pull-left(src=`/{{{blogPost['feature-image-3']}}}`)
| {{/if}}
| {{#if blogPost['feature-image-4'] != ""}}
img.imagePost.pull-left(src=`/{{{blogPost['feature-image-4']}}}`)
| {{/if}}
| {{{blogPost['post']}}}
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>Trying to wrap text around an image in Bootstrap 4
Are you looking for something like this -
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<section id="ourStory">
<div class="container-fluid">
<div>
<div class="col-md-6 m-3">
<img src="https://www.w3schools.com/css/img_mountains.jpg" class="img-fluid float-left mr-4" alt="stray dog lying down">
</div>
<!--column-->
<div class="col-md-12">
<h1>Our Story</h1>
<p>Eget mi proin sed libero enim. Sit amet volutpat consequat mauris nunc congue nisi. Mattis ullamcorper velit sed ullamcorper. Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin
libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. Pellentesque massa placerat duis ultricies.<br><br> Bibendum neque egestas congue quisque egestas. Enim
blandit volutpat maecenas volutpat. Urna porttitor rhoncus dolor purus. Ac turpis egestas sed tempus urna. Pellentesque id nibh tortor id aliquet lectus proin. Sit amet massa vitae tortor condimentum lacinia quis. Adipiscing elit ut aliquam
purus sit amet luctus. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Quis lectus
nulla at volutpat diam ut venenatis. Sed risus ultricies tristique nulla aliquet.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing
tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.
Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.
</p>
</div>
<!--column-->
</div>
<!--row-->
</div>
<!--container-->
</section>Bootstrap - How to make text wrap around an image on small devices?
why you dont use this? its also smarter ;)
http://getbootstrap.com/components/#thumbnails-custom-content
EDIT
include code from bootstrap doc
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
Related Topics
Different Timing Functions for Different Parts of CSS3 Keyframe Animation? (Accurate Bounce)
How to Use Both Rel="Preload" and Rel="Stylesheet" for the Same Tag
Angular 6 Material - Hues and How to Change the Color of Mat Radio Button
Change Link Color on Div Hover
Change Colour Navbar Header Ionic 2
Internet Explorer 11 Rgba Refuses to Work
How to Set Height Property for Span
Select First Descendant with CSS
Jquery-Ui Datepicker CSS Problem
IE9 Not Applying Linked Style Sheets
CSS Difference Between 0 and 0Em
Using Two CSS Files in the Same HTML File
Unset Width to Revert Back to Inline HTML Attribute "Width=Xx"