How to vertically align text in a column next to an image with Bootstrap 5?

Issue

Most of my site is built with Bootstrap 5.3.2 using the grid system. I'd like to use the standard image on the left and text on the right layout. How do I get the text to align vertically in the column though?

I think I need to use d-flex to get the content to vertically align (the second row in my example). It sort of works, but I need the h2 and p to be full-width.

Or maybe there's a better solution? Thanks!

<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>

Solution

you can try this

<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 flex-column justify-content-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>

Answered By - AL Faiz Ahmed