Utilizing Bootstrap 4 to Wrap Text Around Images

Question

Utilizing Bootstrap 4 to Wrap Text Around Images

Concerning Bootstrap 4:

Examine this HTML/CSS code that is not currently responsive (missing Bootstrap "col-"). The Lorem Ipsum text wraps around the image on the right side and below it due to float-left.

<img class="pr-3 pb-3 float-left" src="~/Images/some_image.png" />

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque nisl arcu, tempor a purus quis, congue rutrum libero. 
Suspendisse potenti. 
Aliquam nibh massa, tristique quis sodales at, fermentum at ex. 
Integer nec elementum nibh. 
Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. 
In euismod enim mi ut purus. Morbi ac quam lectus. 
</p>
<p>
Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. 
In pellentesque dui turpis ut quam. 
Praesent ullamcorper eros at lectus elementum tempus. 
Donec fermentum velit nec fermentum bibendum. 
In sit amet aliquam nulla, at vestibulum ligula. 
Interdum et malesuada fames ac ante ipsum primis in faucibus. 
Nam lacus purus, interdum nec blandit vel, lacinia ac ex.
</p>

I am uncertain about the Bootstrap syntax to use in order to maintain the word wrap at the "md" breakpoint, then switch to "col-12" for both the image and text at the "sm" breakpoint, placing the text below the image instead of the current word wrap.

Thank you.

html css bootstrap-4

Answer 1

Answer №1

Transitioning an element from float to col responsively may not be possible, but you can effectively show and hide elements based on screen size.

<img class="pr-3 pb-3 float-left d-none d-md-block" src="~/Images/some_image.png" />
<img class="pb-3 col-12 d-md-none" src="~/Images/some_image.png" />

The .float-left class is hidden initially for xs screens with .d-none, then displayed from md screens up using .d-md-block. On the other hand, the .col-12 class is hidden for md screens and above with .d-md-none.

Answer 2

Transitioning an element from float to col responsively may not be possible, but you can effectively show and hide elements based on screen size.

<img class="pr-3 pb-3 float-left d-none d-md-block" src="~/Images/some_image.png" />
<img class="pb-3 col-12 d-md-none" src="~/Images/some_image.png" />

The .float-left class is hidden initially for xs screens with .d-none, then displayed from md screens up using .d-md-block. On the other hand, the .col-12 class is hidden for md screens and above with .d-md-none.

Answer 3

Answer №2

Utilize BS4's responsive floats for better layout control. Adding the float-left-md class to your image can help achieve this. Check out more about responsive floats here.

For instance:

<img class="pr-md-3 pb-3 float-md-left img-fluid" src="https://via.placeholder.com/150" />

See an example on CodePen.

Answer 4

Utilize BS4's responsive floats for better layout control. Adding the float-left-md class to your image can help achieve this. Check out more about responsive floats here.

For instance:

<img class="pr-md-3 pb-3 float-md-left img-fluid" src="https://via.placeholder.com/150" />

See an example on CodePen.

Answer 5

Answer №3

To accomplish this task, you can utilize the power of css. Simply remove the float-left attribute from the html within your img class and then include the following code in your stylesheet:

img {
  float: left;
}

@media only screen and (max-width: 540px) {
  img {
    float: none
  }
}

Answer 6

To accomplish this task, you can utilize the power of css. Simply remove the float-left attribute from the html within your img class and then include the following code in your stylesheet:

img {
  float: left;
}

@media only screen and (max-width: 540px) {
  img {
    float: none
  }
}

Answer 7

Answer №4

Utilize this code to automatically wrap text around an image at specific breakpoints. The text will be positioned below the image when displayed on smaller screens.

<html> 
<head>
  <title>Wrapping Text Around Image</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
  <style type="text/css">
    .pb-3 {
        padding-bottom: 0 !important;
    }
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) { 
      .float-md-left {
          float: none !important;
      }
    }
    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) { 
      .float-md-left {
          float: none !important;
      }
    }
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) { 
      .float-md-left {
          float: left !important;
      }
    }
    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      .float-md-left {
          float: left !important;
      }
    }
  </style>
</head>
<body>
    <img class="pr-3 pb-3 float-md-left" src="https://via.placeholder.com/140x100" />
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Quisque nisl arcu, tempor a purus quis, congue rutrum libero. 
    Suspendisse potenti. 
    Aliquam nibh massa, tristique quis sodales at, fermentum at ex. 
    Integer nec elementum nibh. 
    Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. 
    In euismod enim mi ut purus. Morbi ac quam lectus. 
    </p>
    <p>
    Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. 
    In pellentesque dui turpis ut quam. 
    Praesent ullamcorper eros at lectus elementum tempus. 
    Donec fermentum velit nec fermentum bibendum. 
    In sit amet aliquam nulla, at vestibulum ligula. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    Nam lacus purus, interdum nec blandit vel, lacinia ac ex.
    </p>
</body>
</html>

Answer 8

Utilize this code to automatically wrap text around an image at specific breakpoints. The text will be positioned below the image when displayed on smaller screens.

<html> 
<head>
  <title>Wrapping Text Around Image</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
  <style type="text/css">
    .pb-3 {
        padding-bottom: 0 !important;
    }
    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) { 
      .float-md-left {
          float: none !important;
      }
    }
    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) { 
      .float-md-left {
          float: none !important;
      }
    }
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) { 
      .float-md-left {
          float: left !important;
      }
    }
    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
      .float-md-left {
          float: left !important;
      }
    }
  </style>
</head>
<body>
    <img class="pr-3 pb-3 float-md-left" src="https://via.placeholder.com/140x100" />
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Quisque nisl arcu, tempor a purus quis, congue rutrum libero. 
    Suspendisse potenti. 
    Aliquam nibh massa, tristique quis sodales at, fermentum at ex. 
    Integer nec elementum nibh. 
    Sed porta, diam id iaculis vestibulum, nunc nisi venenatis mauris. 
    In euismod enim mi ut purus. Morbi ac quam lectus. 
    </p>
    <p>
    Ut dictum, purus ac facilisis eleifend, magna nibh scelerisque elit. 
    In pellentesque dui turpis ut quam. 
    Praesent ullamcorper eros at lectus elementum tempus. 
    Donec fermentum velit nec fermentum bibendum. 
    In sit amet aliquam nulla, at vestibulum ligula. 
    Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    Nam lacus purus, interdum nec blandit vel, lacinia ac ex.
    </p>
</body>
</html>

Utilizing Bootstrap 4 to Wrap Text Around Images

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The attribute 'select' is not found within the type '{}'

Safari not rendering SVG wave at full width reached

Why Electron is refusing to open a JSON file

How to centrally align text in list items using Bootstrap 5

JavaScript issue with confirm/redirect feature not functioning as expected

What is the best way to make IE reload a flash.swf file each time the page is accessed?

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

Fade in a CSS class using jQuery

Issue with the JQuery FadeIn effect on my website when a div is repositioned for visibility

Deactivate all dropdown menus with the root event

What sets apart auto, 0, and no z-index values?

Tips for avoiding duplicates when searching with the simple HTML DOM parser

Newbie: Troubleshooting Vue Errors - "Vue is not recognized"

Code to conceal navigation bar...positioned neither at the top nor at the bottom of the scroll

The CSS overflow scroller trims the excess background color

The ultimate guide to personalizing group titles in Angular UI-Select

Automatically load file and play audio when the page is loaded

Is there a way to retrieve the ID from a span and convert it into a string format?

When making jQuery Ajax calls, the $_POST variable may be empty and a warning about headers already being sent may also

What is the best way to adjust the mobile screen size to display the most optimized version of a web app's