I'm using bootstrap 5, I want to put the overlapping titles of the photos in their lower position, I don't know how to do it. (Let the text be seen on top of the photo)
Here the code:
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<a href="#" id="btn-cerrar-popup" class="btn-cerrar-popup"><i class="fas fa-times"></i></a>
<img src="img/global.jpg" id="img" href="img1.php">
<img src="img/global.jpg" id="img" href="img2.php">
<div class="row">
<div class="col-md-6">
<h1>xx</h1>
</div>
<div class="col-md-6">
<h1>xx</h1>
</div>
</div>
</div>
</div>
Honestly, I don't understand your question very well, but I suspect that what you want is for the titles to appear, and the images below. To do this, simply change the order in which you have the images and the titles:
Maybe you want to center the titles too so you will have to use css or some other tool. In case this is not what you want, please click edit and specify a bit more.
If you want to overlay the text on the image, I recommend using the bootstrap Card component (in this link you will find more information and more complete examples) in this way, using the classes
card-img-overlay h-100 d-flex flex-column justify-content-end
:I guess what you want is something like this:
Each image must go together with the text within a tag. In this case, inside the label
test
I am inserting an image and a text, twice. You are placing two images, and at the bottom in another label you put the texts, which is possible but not appropriate