CODEWITHSUNDEEP
htmlcsscss-floattext-align
user747291
user747291

Reputation: 821

Wrap text around with image on the right

I have the below html which has an image and text. I want to wrap the text around the image. I have tried float but it does not seem to work. How can I do this?

using bootstrap.min.css classes – panel-body, col-md-12

<div class="row"> 
  <div class="col-md-12">
    <div class="col-md-4 pull-right">
      <img class="img-responsive shadow"/>
      <p style="text-align:justify;float:left"> Text paragraph </p>
    </div>
  </div>
</div>

Upvotes: 3

Views: 7126

Answers (2)

slothluvchunk
slothluvchunk

Reputation: 402

edit : Cassidy's answer above is a more elegant, bootstrap-centric fix if that's a better fit for what you're doing.

With your img and p tags in the same container, you can control them relative to one another, using float to position them as you've described.

Using the markup you provided, I've created a jsfiddle with some additions. Of course I've had to make a couple assumptions about what you'd like to do, but in this example is a working "wrap" of some text, around an image.

Basically, I've put both elements as siblings inside of a div, and have floated both elements to the left, allowing the larger text on the right to wrap around the img.

Snippet:

img.float_text_left {
  float: left;
  clear: none;
  margin: 15px;
}
span.float_text_right p {
  width: 65%;
  height: auto;
  float: left;
}
<div class="row"> 
  <div class="col-md-12">
    <div class="col-md-4 pull-right">
       <div class="float_text_right">
       <img class="img-responsive shadow float_text_left" src="http://www.ducatithailand.com/cms-web/upl/MediaGalleries/549/1/MediaGallery_1549306/Color_M-1200S_Grey-01_1067x600.jpg" width="250"/>
     
     <span>
       <p class=".float_text_right">
      Lorem ipsum dolor amet microdosing authentic mlkshk ugh, ramps next level enamel pin air plant roof party. Fingerstache artisan art party offal church-key PBR&B subway tile letterpress drinking vinegar bespoke farm-to-table yr. Forage hot chicken artisan retro, migas enamel pin seitan sustainable. Bushwick VHS health goth, austin trust fund thundercats beard small batch green juice sartorial street art iPhone 3 wolf moon hashtag. Shabby chic kitsch brunch, lumbersexual narwhal celiac hot chicken vaporware enamel pin polaroid. Tbh neutra hammock organic master cleanse biodiesel franzen fam pour-over etsy heirloom migas roof party.

Messenger bag meditation forage, tumeric wayfarers pabst sartorial schlitz food truck selfies locavore normcore keffiyeh cray. Selfies dreamcatcher mumblecore jean shorts health goth lyft. Distillery blue bottle actually, coloring book PBR&B letterpress meggings single-origin coffee bespoke iPhone migas palo santo poutine cray vexillologist. Slow-carb leggings meggings, fashion axe scenester XOXO single-origin coffee. Deep v pug synth ramps, VHS hammock man bun intelligentsia single-origin coffee.
     </p>
     </span>
    
      </div>
    </div>
  </div> 
</div>

Upvotes: 0

Cassidy Pittman
Cassidy Pittman

Reputation: 21

Add the float-left class (Bootstrap 4) to the img :)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12">
    <div class="col-md-4 pull-right">

      <img data-src="holder.js/200x200" class="img-thumbnail img-responsive shadow float-left" alt="200x200" style="width: 200px; height: 200px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15fc706eff6%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15fc706eff6%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
        data-holder-rendered="true">

      <p class="text-justify"> 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. Lorem ipsum dolor sit amet, consectetur adipiscingelit, 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 essecillum 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>
</div>

https://getbootstrap.com/docs/4.0/utilities/text/

Upvotes: 2

Related Questions