Link to home
Create AccountLog in
Avatar of Richard Korts
Richard KortsFlag 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>
</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.

Thanks
Avatar of carloselfaite
carloselfaite

can you provide your url?
Avatar of Richard Korts

ASKER

An someone address this question, please?
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.
Slick812,

I need to use Bootstrap to cause responsiveness on phones, etc.
I've requested that this question be deleted for the following reason:

No correct answer given.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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.

Thanks!
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