Avatar of Richard Korts
Richard Korts
Flag for United States of America asked on

Bootstrap wrap text around image

I cannot figure out how to do this. I foound several references on the web, none work. Here's one:

<div class="row">
      <div class="col-sm-1 col-xs-1 nopadding" style="padding-left:30px;">&nbsp;</div>            
      <div class="col-sm-10 col-xs-10 text-left">
            <p>All Autowater Irrigation systems are custom designed to each property.  
                  If you choose an installation, our process will be customized for your specific property and needs.</p>

                  <p>Basically, the installation of a new system starts directly at the water meter in order to take advantage of the highest gallons per minute (GPM).</p>

                   <p>If you choose the "separate meter option" (where applicable), this "high volume" water source will be plumbed in automatically.</p>

                  <p>In order to simplify future preventative maintenance, we determine the most convenient location (usually the garage) for the timer.  
                  Once the electric and hydraulic sources have been determined, we  design a system with head-to-head coverage, which will guarantee
                  even distribution and create a complete and efficient system.</p>

                  <p>Our expert installation team professionally installs each system to be completely undetectable when it is not in use.</p>

                  <p>In order to ensure satisfaction, each new system comes with a one-year guarantee  from the date of installation.</p>
      <div class="col-sm-3 col-xs-3"><img src="images/elmer_mach_sm.jpg" class="img-responsive"></div></div>
      <div class="col-sm-1 col-xs-1">&nbsp;</div>

Note the inclusion of the div with 3 col width within the one of 10 col width.

This was suggested here: https://teamtreehouse.com/community/q-bootstrap-wrapping-text-around-images

I tried several others, none worked.

It produces the attached, of course NOT wrapped.


Avatar of undefined
Last Comment

8/22/2022 - Mon

can you provide your url?
Richard Korts

Richard Korts

An someone address this question, please?
Your help has saved me hundreds of hours of internet surfing.

greetings Richard Korts, , I have used images and wrapped TEXT around then by using the float left or right . I hope I am understanding your problem, and since you have just one image near text on that page, here is some code I would use to do this, Although bootstrap has a class for float left as "pull-left" , I have to set the width of the image anyway so I just use the image style for the float and the width. Make sure to clear the the float with a  "clearfix" where you need the TEXT to stop wrapping.

<p><img src="images/elmer_mach_sm.jpg" style="float: left; width: 170px;" />
In order to ensure satisfaction, each new system comes with a one-year guarantee  from the date of installation.
<span class="clearfix"></span></p>

Open in new window

and I guess I should say that you may be able to use the bootstrap div thing with col-sm-3  BUT in order to have any WRAP effect  the FLOAT element needs to GO before the TEXT to float around it , NOT after it, and if you use a float element, it is best to have a  "clearfix" somewhere to clear the float.
Richard Korts


I need to use Bootstrap to cause responsiveness on phones, etc.
Richard Korts

I've requested that this question be deleted for the following reason:

No correct answer given.
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Richard Korts

I'm not sure why you put the image after the 2nd line of text, but it works perfectly.

Bootstrap is great BUT sometimes things like this are VERY elusive. I searched high & low & could not find the simple solution you have.


No problem and there was no logic to where I put it in the text *grin*, other than to show you that it could be done