Bootstrap wrap text around image

Richard Korts
Richard Korts used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
can you provide your url?
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
An someone address this question, please?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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 KortsBusiness Owner / Chief Developer

Author

Commented:
Slick812,

I need to use Bootstrap to cause responsiveness on phones, etc.
Richard KortsBusiness Owner / Chief Developer

Author

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

No correct answer given.
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
Is there an issue just putting the image inside the <p> element?  And change the bootstrap classes to full width for the <p> element?

<p class="col-sm-12 col-xs-12">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.<br><br>

			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).<img src="images/elmer_mach_sm.jpg" class="col-sm-4 col-xs-4 img-responsive pull-right"><br><br>

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

			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.<br><br>

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

			In order to ensure satisfaction, each new system comes with a one-year guarantee  from the date of installation.<br><br>
</p>

Open in new window

Richard KortsBusiness Owner / Chief Developer

Author

Commented:
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!
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial