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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  
  <div >
    <div >
      <div >
        <div >
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 1, Row 1</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 2, Row 1</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 3, Row 1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 1, Row 2</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 2, Row 2</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  
  <div >
    <div >
      <div >
        <div >
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 1, Row 1</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 2, Row 1</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 3, Row 1</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 1, Row 2</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 2, Row 2</div>
            </div>
          </div>
          <div >
            <img  src="http://jazzfu.000webhostapp.com/upload/placeholder-sq.webp">
            <div >
              <div >Some Content Here 3, Row 2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CodePudding user response：

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 >
    <div >
      <div >
        <div >
          ...
        </div>
        <div >
          ...
        </div>
        <div >
          ...
        </div>
      </div>
    </div>
  </div>