Making Bootstrap (4.4.1) Cards Have Body Text Wrap Around Them

Question

I currently have a card like this on my home page to my site, I would want it to be aligned left and but not take up so much space horizontally. On top of that, I want the text to be wrapped around the card instead of separated entirely, similar to a simple image insert like in the following picture.

Below is my current code for the card. I am not sure if it needs to be changed in the HTML or in the .css file.

<div class="col-md-4 text-center offset-4">
  <div class="card">
    <div class="card-body">
      <img src="images/960px-Reality_check_ESA384313.jpg" width="250" height="180" alt="Man Wearing VR Headset" />
      <hr>
      <p> Researchers with the European Space Agency in Darmstadt, Germany, equipped with a VR headset and motion controllers, demonstrating how astronauts might use virtual reality in the future to train to extinguish a fire inside a lunar habitat. </p>

      <a class="nav-link" href="tech1.html">Learn More About VR Tech</a>

    </div>
  </div>
</div>

Answer 1

Maybe you can try this class float-left on the image.