CODEWITHSUNDEEP
htmlcssbootstrap-4
vanessam6
vanessam6

Reputation: 65

Trying to wrap text around an image in Bootstrap 4

I am having trouble wrapping text around my image at about 1355px. I tried using float-left on both the div container and the actual img tag, and nothing worked. I'm not sure if it's because of the column setup I have, and I should add a lg column setup to the classes? Or if I'm supposed to mess with width and height of the img? I wanted to include this change in a media query. Here is my code and a picture of what's happening. text not wrapping around the image

And this is my code

<section id="ourStory">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <img src="img/uf_5.png" class="img-fluid float-left" alt="stray dog lying down">
    </div><!--column-->
        <div class="col-md-6">
            <h1>Our Story</h1>
            <p>Eget mi proin sed libero enim. Sit amet volutpat consequat mauris nunc congue nisi. Mattis ullamcorper velit sed ullamcorper. Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. Pellentesque massa placerat duis ultricies.<br><br>
            Bibendum neque egestas congue quisque egestas. Enim blandit volutpat maecenas volutpat. Urna porttitor rhoncus dolor purus. Ac turpis egestas sed tempus urna. Pellentesque id nibh tortor id aliquet lectus proin. Sit amet massa vitae tortor condimentum lacinia quis. Adipiscing elit ut aliquam purus sit amet luctus. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Quis lectus nulla at volutpat diam ut venenatis. Sed risus ultricies tristique nulla aliquet.<br><br>
            Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. 
           </p>
        </div><!--column-->
    </div><!--row-->
  </div><!--container-->
 </section>

Upvotes: 2

Views: 730

Answers (1)

Abhishek Bhagate
Abhishek Bhagate

Reputation: 5786

Are you looking for something like this -

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<section id="ourStory">
  <div class="container-fluid">
      <div>
        <div class="col-md-6 m-3">
          <img src="https://www.w3schools.com/css/img_mountains.jpg" class="img-fluid float-left mr-4" alt="stray dog lying down">
        </div>

        <!--column-->
        <div class="col-md-12">
          <h1>Our Story</h1>
          <p>Eget mi proin sed libero enim. Sit amet volutpat consequat mauris nunc congue nisi. Mattis ullamcorper velit sed ullamcorper. Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin
            libero. Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero. Pellentesque massa placerat duis ultricies.<br><br> Bibendum neque egestas congue quisque egestas. Enim
            blandit volutpat maecenas volutpat. Urna porttitor rhoncus dolor purus. Ac turpis egestas sed tempus urna. Pellentesque id nibh tortor id aliquet lectus proin. Sit amet massa vitae tortor condimentum lacinia quis. Adipiscing elit ut aliquam
            purus sit amet luctus. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Quis lectus
            nulla at volutpat diam ut venenatis. Sed risus ultricies tristique nulla aliquet.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Diam donec adipiscing
            tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.<br><br> Tempor nec feugiat nisl pretium fusce id velit ut. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero.
            Diam donec adipiscing tristique risus nec. Gravida in fermentum et sollicitudin. Laoreet suspendisse interdum consectetur libero.
          </p>
        </div>
        <!--column-->
      </div>
      <!--row-->
    </div>
  <!--container-->
</section>

I have just put the image and text into one div and specified it to use whole 12 grids of bootstrap so text will be floated towards right on large screen and go below image once the screen size gets small.

In your code, you have like this -

<div class="row">
    <div class="col-md-6">
    .
    .
    </div>
    <div class="col-md-6">
    .
    .
    </div>
</div>

So you had one row with 6 grids for each div (on screens with width>768px) like this -

--------------------------------------ROW-START-------------------------------------------
                                           |
                                           |
                                           |
                                           |
                                           |
            6    G  R  I  D  S             |      6    G  R  I  D  S  
                 IMAGE                     |             TEXT
                                           |
                                           |
                                           |
-----------------------------------------ROW-END---------------------------------------

With this you won't be able to wrap the text around image when the text goes below image. In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. The image will take columns even when the image ends which is why the text won't be able to wrap around the image.

In my code, you have -

<div class="col-10 col-md-12">
    <div class="col-md-6 m-3">
    .
    .
    </div>
    <div class="col-md-12">
    .
    .
    </div>
</div>

So, here you have two divs inside a div which has 12 grids with it. Your layout will be -

--------------------------------------DIV-START-------------------------------------------
                                           |
            6    G  R  I  D  S             |      6    G  R  I  D  S  
            TILL IMAGE EXISTS              |      USED BY TEXT
___________________________________________|                                              
                                           
        WHEN THE IMAGE ENDS ALL THE 12 GRIDS will be used by TEXT
               
-----------------------------------------DIV-END------------------------------------------

Do note that there's img-fluid and float-left help in keeping image responsive, preventing it from overflowing in case of high-res image and making the text appear to right of image.

Hope this helps !

Upvotes: 1

Related Questions