I am working on a Bootstrap 5 website template and I want to add text with a white background in the center of an image.
Instead of seeing just a white color over the image, I would like to have a white rectangle with a title and text centered on the image.
.our-company-title {
line-height: 31px;
letter-spacing: 0;
color: #000;
font-size: 25px;
}
.our-company-text {
color: #787878;
line-height: 150%;
font-size: 18px;
letter-spacing: 0;
}
.contact-image-box {
position: absolute;
background-color: #fff;
text-align: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819c819d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="container-fluid overflow-hidden">
<div class="row">
<div class="col-12 col-md-6 p-0 position-relative">
<div class="position-relative">
<img class="img-fluid w-100 h-100 object-fit-cover" src="https://via.placeholder.com/300x100" alt="">
<div class="contact-image-box">
<h3 class="our-company-title">Title</h3>
<p class="our-company-text">Company text</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 align-self-md-center">
content here
</div>
</div>
</div>I also attempted adding the following CSS, but the title and text are still aligning left rather than center:
.contact-image-box {
max-width: 400px;
}