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;"
<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.
<div class="col-sm-1 col-xs-1"> </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
<div class="row">
<div class="col-sm-1 col-xs-1 nopadding" style="padding-left:30px;"
<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.
<div class="col-sm-1 col-xs-1"> </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
BootstrapCSS
Last Comment
Rob
can you provide your url?
ASKER
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.
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.
<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>
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.
ASKER
Slick812,
I need to use Bootstrap to cause responsiveness on phones, etc.
I need to use Bootstrap to cause responsiveness on phones, etc.
ASKER
I've requested that this question be deleted for the following reason:
No correct answer given.
No correct answer given.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
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.
ASKER
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!
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