Attempting to align text around an image within Bootstrap 4

Question

Attempting to align text around an image within Bootstrap 4

I'm struggling to wrap text around my image at approximately 1355px. I attempted using float-left on both the div container and the img tag, but nothing seems to be working. Could it be due to the column setup I have in place? Should I perhaps add an lg column setup to the classes? Or maybe adjust the width and height of the img element? I was hoping to make this change within a media query. Here is my code and a screenshot of the issue: text not wrapping around the image

Here's the code snippet:

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

html css bootstrap-4

Answer 1

Answer №1

Are you interested in creating a layout 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 combined the image and text into one div using 12 grids of bootstrap, allowing the text to wrap around the image on larger screens and go below it on smaller screens.

In your original code, you had something like this -

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

This setup divided the row into two columns, each taking up 6 grids (for screens with width>768px), as shown below -

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

However, this arrangement doesn't allow the text to wrap around the image when it goes below it. By using Bootstrap's "row" class mainly for holding columns, it restricts the ability to achieve the desired layout.

In my provided code snippet, it is structured like this -

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

Here, there are two divs inside another div that uses all 12 grids available. This layout results in -

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

It should be noted that classes like img-fluid and float-left assist in making the image responsive and ensuring proper alignment with the text.

I hope this explanation clarifies things for you!

Answer 2

Are you interested in creating a layout 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 combined the image and text into one div using 12 grids of bootstrap, allowing the text to wrap around the image on larger screens and go below it on smaller screens.

In your original code, you had something like this -

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

This setup divided the row into two columns, each taking up 6 grids (for screens with width>768px), as shown below -

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

However, this arrangement doesn't allow the text to wrap around the image when it goes below it. By using Bootstrap's "row" class mainly for holding columns, it restricts the ability to achieve the desired layout.

In my provided code snippet, it is structured like this -

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

Here, there are two divs inside another div that uses all 12 grids available. This layout results in -

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

It should be noted that classes like img-fluid and float-left assist in making the image responsive and ensuring proper alignment with the text.

I hope this explanation clarifies things for you!

Attempting to align text around an image within Bootstrap 4

Answer №1

Similar questions

SCORM: moving between SCOs by clicking a button in the presentation

Modifying an element's value according to user input: Step-by-step guide

Background: Cover causing image to be cut off

Using AngularJS, you can display repeated elements in a single textarea by utilizing

jquery selector targeting a select optiongroup that contains a specific label value

When using the .after() method to add jQuery elements, keep in mind that they will not trigger any

Chromium CSS blend mode problem

How to make a Material UI Dialog Box automatically expand to fit the Dialog Content Area

The utilization of CSS variables within intricate properties

The problem with the Bootstrap Navbar Dropdown is that it opens up within the confines of

Angular list with a repeating group of radio buttons

Adding a line and text as a label to a rectangle in D3: A step-by-step guide

What is the best way to resize an image within an SVG shape to completely fill the boundaries?

Limit the precision of decimal number output to a specific value

JavaScript enables the deletion of a class

How to Position an Input Text Beside an Icon Image Using JqueryMobile

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

Say goodbye to using 'jQuery .load()' with <img> elements inside <a> tags

Creating a layout in jQuery Mobile with two HTML <input type="button"> elements positioned side by side and each taking up 50% of the screen

Is there a way to obtain the coordinates of an SVG element by simply clicking on a specific point?