Boostrap 5, How can I add multiple elements in a column - html

Question

I have this Bootstrap 5 code that shows some images like in this link in a grid, the images are affected by a few CSS code.
#projects img {
width: 100%;
height: 100%;
}
<section id="projects">
<div class="container text-center">
<h4 class="fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
<div class="row g-4">
<div class="col-md-6">
<img
src="./images/cardcomponent.png"
alt="card component"
class="rounded-3"
>
</div>
<div class="col-md-6">
<img
src="./images/yardsale.png"
alt="yard sale"
class="rounded-3"
>
</div>
<div class="col-md-6">
<img
src="./images/qrcard.png"
alt="web developer"
class="qr card"
>
</div>
<div class="col-md-6">
<img
src="./images/cardcomponent.png"
alt="web developer"
class="rounded-3"
>
</div>
</div>
</div>
</section>
I want to add a title <h6></h6> to each image.
<div class="col-md-6">
<h6>Title</h6>
<img
src="./images/cardcomponent.png"
alt="card component"
class="rounded-3"
>
</div>
But for some reason, the title isn't included or recognized in the column, showing something like this, while this is similar to what i want to do.

Answer 1

#Emiliano Acevedo, Thanks to draw attention to the bug of bootstrap, I am sure the team must get those alignment issue fixed for row column.
Here's quick fix for the issue. <div class="row g-4 align-items-end"> You can fix the issue with adding item alignment in the row element.
I hope this helps.
CodePen Example

Answer 2

Div with text-center class makes all the text align at the center inside of it. But since you just want your <h4> tag align at the center only, just remove the text-center class from that div and add it to the <h4> tag. Once you do that, your <h6> tag inside of your column will work as you intended. Like:
#projects img {
width: 100%;
height: 100%;
}
<section id="projects">
<div class="container">
<h4 class="text-center fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
<div class="row g-4">
<div class="col-md-6">
<h6>Title 1</h6>
<img src="./images/cardcomponent.png" alt="card component" class="rounded-3">
</div>
<div class="col-md-6">
<h6>Title 2</h6>
<img src="./images/yardsale.png" alt="yard sale" class="rounded-3">
</div>
<div class="col-md-6">
<h6>Title 3</h6>
<img src="./images/qrcard.png" alt="web developer" class="qr card">
</div>
<div class="col-md-6">
<h6>Title 4</h6>
<img src="./images/cardcomponent.png" alt="web developer" class="rounded-3">
</div>
</div>
</div>
</section>