I have been using the Bootstrap 5.3.2 grid system for most of my website. I am trying to create a layout with an image on the left and text on the right. However, I am facing an issue with aligning the text vertically in the column. Is there a way to achieve this without compromising the full-width of the h2 and p elements?
I tried using d-flex to vertically align the content, but it only partially solves the problem. I want the h2 and p elements to span the full width of the column. Are there any other solutions that could work better for this layout? Thank you!
<div class="container">
<div class="row">
<div class="col-lg-4"><img src="https://placehold.co/600x400" alt=""/></div>
<div class="col-lg-8">
<h2>A header goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt vitae quisquam, non quaerat mollitia sit rem omnis ducimus nulla harum at minima enim, ipsa soluta laudantium.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4"><img src="https://placehold.co/600x400" alt=""/></div>
<div class="col-lg-8 d-flex align-items-center">
<h2>A header goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt vitae quisquam, non quaerat mollitia sit rem omnis ducimus nulla harum at minima enim, ipsa soluta laudantium.</p>
</div>
</div>