Is it possible to use columns in the Bootstrap 4 grid system to create text that wraps around an image?

I have been searching for a solution all day without success. Can anyone help me figure out how to wrap text around an image using d-flex or flex-wrap in Bootstrap 4's grid layout with columns and rows? Below, I have shared my code and included two image examples. Your assistance is greatly appreciated. I came across this example - but it seems different as the image has fixed sizing, whereas we need the image to be responsive. Thank you in advance for your advice.

View example image with photo here

See example diagram here

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container" style="margin-top: 30px;">

  <div class="row" style="border: 1px solid #ddd;">
    <div class="col-sm-6 col-lg-6 col-xl-5">
      <div class="imagebox">
        <figure>
          <img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
          <figcaption class="imagebox-desc">VERANDAHS<br>
            <span class="small">Superior Central Location...</span></figcaption>
        </figure>
      </div>
    </div>
    <div class="col-sm-6 col-lg-6 col-xl-7">
      <div class="row">
        <div class="col-12"><small>BPP Rating - 88%</small></div>
        <!-- this below line will wrap on all screens -->
        <div class="col-6"><small>Online Rating - 88%</small></div>
        <div class="col-6 text-right"><small>Total Beds - 50</small></div>
      </div>
      <hr style="margin: 0.5rem 0;">
      <div class="row">
        <div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
        <div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
      </div>
      <div class="row">
        <div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
          instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
      </div>
    </div>
  </div>

cssflexboxgridbootstrap-4word-wrap

Answer №1

One way to achieve this effect is by adding a background-image to the row element and using properties to center it within the div. Here's a live example you can refer to - https://jsfiddle.net/erymag7b/27/

Answer №2

To wrap text around an image, you can utilize float:left in the .imagebox class. Additionally, to ensure text appears under the image, apply clear:both in the P tag.

Check out this code snippet on CodePen for implementation.

Here's a helpful tip on CSS design: Avoid using Inline Styles for better design practices.

.imagebox {
  float: left;
  margin-right: 1em;
}

div.container {
  max-width: 100%;
}

figcaption.imagebox-desc {
  top: 0;
  position: absolute;
  left: 0;
  color: white;
  background: rgba(4, 4, 4, 0.8);
  width: 100%;
  padding: 0.7rem 0 0.5rem 1.2rem;
  font-size: 1.2rem;
}

.imagebox-inner {
  position: relative;
  display: inline-block;
}

.img {
  width: 100%;
}

@media (max-width: 768px) {
  .text {
    clear: both;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="imagebox">
        <figure class="imagebox-inner">
          <img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
          <figcaption class="imagebox-desc">VERANDAHS<br>
            <span class="small">Superior Central Location...</span></figcaption>
        </figure>
      </div>
      <div><small>BPP Rating - 88%</small></div>
      <div class="d-flex justify-content-between"> <small>Online Rating - 88%   </small> <small>Total Beds - 50</small></div>
      <hr class="m3">
      <div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
      <div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
      <p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
        ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
        sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
    </div>

  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

Struggling with aligning Bootstrap 5 navbar items to the right while keeping the brand on the left side?

I'm struggling to align the items to the right on my navbar. No matter what I try, they just won't budge from the left side next to my brand logo. Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-dar ...

htmlcssnavbarbootstrap-5

Achieving perfect alignment of two elements using flexbox: centering one and aligning the other to the right

Can you help me with aligning two elements to the center and right edge using flex? I am trying to achieve a layout similar to the image. XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX https://i.sstatic.net/cvmHX.png CSS Styles .flex{ display: flex; justify- ...

htmlcss

Form-check radio buttons within the form-check-inline class of Bootstrap 4.1.1

I am attempting to showcase a radio button as an inline option. According to the Bootstrap 4.1.1 documentation, the example code is: <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOption ...

htmlcsstwitter-bootstrapbootstrap-4

The CSS and Javascript files are failing to load

My web page is not displaying my CSS and JavaScript properly when I access it through a folder in the browser. Both files are located within multiple subfolders. I have attempted to rename the files to troubleshoot the issue. <head> <link rel=" ...

javascripthtmlcss

The background color of absolute divs fails to extend across the entire screen

Trying to implement a loading screen in my VueJs app using only divs. The issue is that the background color of the divs (loadingScreen) does not cover the entire screen, but only as much as the loader's height. I've attempted adding margin to th ...

htmlcssvue.js

Utilizing Bootstrap 4 to seamlessly transition the navbar-brand image to overlap on larger screens, and shrink-to-fit on smaller screens

I have a challenge that I'm working on. My goal is to make the navbar-brand image overlap with the navbar without changing its height, as the navbar itself has a fixed height of 80px. The current solution kinda works, but I am facing an issue ...

csstwitter-bootstrapbootstrap-4

Missing icons and images from the Assets folder when the "/" or "'" is removed from the URL

While working on an admin web project with Codeigniter, I faced a peculiar issue that seems to only arise when I either remove "/" after hiding index.php or add "/" without hiding index.php. In this scenario, the icons go missing and even profile pictures ...

phpcodeigniterbootstrap-4

The background image is not displaying properly within a <span> tag

I am attempting to show a smiley icon within a span tag that is nested inside a list item. Below is the code snippet: <p> It contains various tabs:{" "} <li> Home - Showcase and brief informati ...

htmlcssreactjsstyles

The SVG element's width is set to 100%, but it does not expand

Here is the SVG code snippet I am currently working with: <div className="behaviorPatternsItem" key={item.id}> <div className="behaviorPatternsItemStyled"> <svg height="25" width="100%" preserveAspectRatio="non ...

csssvg

The disappearance of the checkbox is not occurring when the text three is moved before the input tag

When I move text three before the input tag, the checkbox does not disappear when clicked for the third time. However, if I keep text three after the input tag, it works fine. Do you have any suggestions on how to fix this issue? I have included my code be ...

javascriptjqueryhtmlcssangularjs

Utilizing Z-index for the arrangement of DIVs and elements in a webpage

I am facing an issue with my website design where the content section overlaps with the banner. This causes the content section to be hidden behind the banner, and I need it brought to the front. The problem specifically lies with the search element on my ...

css

When an input is double-clicked, the message"[object object]" appears on the screen

Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...

htmlangularjscssfirefox

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

javascriptjqueryhtmlcss

The HTML element does not expand to fill the entire page

I recently encountered a problem with my website. Everything was functioning smoothly until I decided to add some in-page links to a large page. After adding the links, the background no longer stretched the entire length of the page. When scrolling down, ...

htmlcssbackground

Checking for empty inputs using Html, JavaScript, and CSS

I need help with a form that has 6 input fields. I want to ensure all fields are filled out, and if not, display an alert message. Any suggestions on how to achieve this? Additionally, I'm experiencing difficulties implementing different font styles. ...

javascriptjqueryhtmlcssinput

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

What is the best way to incorporate a Bootstrap 4 container within a container-fluid? how can we ensure that text is always contained within the blue section? ...

javascripthtmlcssbootstrap-4

Expanding the height of Bootstrap 4 cards

I'm having an issue with Bootstrap 4's card columns where the height of the shorter card ends up stretching to match the one beside it. This only occurs when I add the 'row' class to the parent div. If I remove the 'row' class ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

If one sibling requires flexing, apply flex to all siblings

Illustrative Issue: large: https://i.sstatic.net/oq0jA.png small: https://i.sstatic.net/WXqmV.png When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least ...

htmlcsssvgflexboxcss-grid

Solutions for concealing the current div when clicking on a new div that reveals a fresh one

Is there a way to hide the current div once you click on a new div that reveals another one? The code below toggles the display of the div, but what I am attempting to achieve is that when you click on a new item after clicking on the first one, the first ...

javascriptjqueryhtmlcss