Bootstrap columns - text wrap in column on right of image - html

Question

All i want to do is have a large block of text on the right hand side of an image. Its driving me crazy. The column containing text drops below the image as soon as the text becomes a certain size or is not given a width, one solution is to add a width to the text column, but isnt the point of bootstrap to not use fixed widths!?
All i have on the css of P is word-wrap: break-word; I have added a height on the image as else its too large - would like to restrict the size of the image to the size of the bootstrap column if that is also possible. I have tried all various css combinations. Sorry, this is probably a regular question, i have seen many answers to this, and tried all of them out. How do i create two columns in a row, one with an image and one with text?! This should be simple! (and probably is!). Thank you and sorry.
nb i am in a laravel project, with bootstrap loaded and the css available.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div id="banner" class="12u" >
<div class="container">
<div class="row">
<div class="col-4">
<img src="{{ asset('images/fun.jpeg') }}" alt="Picture" height="400em" >
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>

Answer 1

I added img-fluid class for the image to be responsive. img-fluid class doing image width: 100% and height: auto. Thus, the image moves responsively according to the container it is in.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<div id="banner" class="12u">
<div class="container">
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="Picture" height="400em">
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>

Answer 2

You are doing everything right but not including width="100%" in your img tag
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="banner" class="12u" >
<div class="container">
<div class="row">
<div class="col-4">
<img width="100%" src="https://images.unsplash.com/photo-1590412513773-fa30db27b485?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Picture">
</div>
<div class="col-8">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta provident, dolore, voluptas aspernatur officiis nisi deserunt perspiciatis vero beatae assumenda est nobis odio blanditiis ratione, rem consectetur facere reprehenderit repellendus.</p>
</div>
</div>
</div>
</div>