I'm struggling with getting a large block of text to display correctly on the right side of an image. The text keeps dropping below the image when it reaches a certain size or if no width is specified. Adding a fixed width to the text column seems to be a solution, but isn't the essence of bootstrap to avoid using fixed widths?
In my CSS, all I have for the p element is word-wrap: break-word;. I had to set a height on the image because it was too large - ideally, I'd like to limit the image size to fit within the bootstrap column. I've tried various CSS combinations without success. Creating two columns in a row, one with an image and one with text should be simple, right? But I'm struggling to get it right. This might be a common issue, and I've tried multiple solutions suggested by others. How do I achieve this layout effectively? Your help would be much appreciated.
Note that I am working on a Laravel project with Bootstrap loaded and the necessary 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>