Flex Contents wont Align in a Row Horizontally (Bootstrap 5) - html

Question

My Images seems to be not aligning in a Horizontal Row, I Tried every method but not working :(
Output:
.img-size-square {
width: 100%;
height: auto;
max-width: 400px !important;
max-height: 400px !important;
}
.container-for-hover {
position: relative;
width: 50%;
}
.image-for-hover {
display: block;
width: 100%;
height: auto;
}
.overlay-for-hover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #6633ff;
}
.container-for-hover:hover .overlay-for-hover {
opacity: 1;
}
.text-for-hover {
color: white;
font-weight: bold;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="row">
<div class="row">
<div class="d-flex col-12">
<div class="mx-auto">
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 1, Row 1</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 2, Row 1</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 3, Row 1</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="d-flex col-12">
<div class="mx-auto">
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 1, Row 2</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 2, Row 2</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 3, Row 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I Tried:
I Tried everything on the Official Docs and on here -> W3 BS5 Docs, I Tried also flex-row, I'm also new to Web Developing Field.
Goal:
The container-for-image Div(s) should be Placed in a Horizontal Row in each row class div

Answer 1

just use flex on class mx-auto
.img-size-square {
width: 100%;
height: auto;
max-width: 400px !important;
max-height: 400px !important;
}
.container-for-hover {
position: relative;
width: 50%;
}
.image-for-hover {
display: block;
width: 100%;
height: auto;
}
.overlay-for-hover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #6633ff;
}
.container-for-hover:hover .overlay-for-hover {
opacity: 1;
}
.text-for-hover {
color: white;
font-weight: bold;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.mx-auto{
display:flex;
margin:0 auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="row">
<div class="row">
<div class="d-flex col-12">
<div class="mx-auto">
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 1, Row 1</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 2, Row 1</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 3, Row 1</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="d-flex col-12">
<div class="mx-auto">
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 1, Row 2</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 2, Row 2</div>
</div>
</div>
<div class="container-for-hover img-size-square mb-2">
<img class="image-for-hover" src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
<div class="overlay-for-hover">
<div class="text-for-hover">Some Content Here 3, Row 2</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

You need to have the 3 children as direct children of the d-flex container, since that is the flex container. The way you have it, d-flex is trying to put only mx-auto into a row (resulting in a row of 1 div).
<div class="row">
<div class="row">
<div class="d-flex col-12 mx-auto">
<div class="container-for-hover img-size-square mb-2">
...
</div>
<div class="container-for-hover img-size-square mb-2">
...
</div>
<div class="container-for-hover img-size-square mb-2">
...
</div>
</div>
</div>
</div>