'displaying block of two divs on half splitted index page

I have a half-splitted index page. I use twitter bootstrap-v5.1.3 to split. On the left side I have two divs which have one text and one image class.

These divs are inside of flex-parent. So they are looking inline-block.

I want text on top and image on bottom which I mentioned below. But also text and image must be on center in "leftside col-md-6".

I need this:

enter image description here

body {
  font-family: "Merriweather", sans-serif;
  background-color: #fafafa;
  overflow-x: hidden;
}

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background-color: #8a68ff;
  opacity: 83%;
}

.rightside {
  background-color: #ffffff;
}

.left-hero-text {
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
}

.bold-text {
  font-size: 55px;
  font-weight: 700;
}

img {
  width: 50%;
  height: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row gx-0">
  <div class="col-md-6 gx-0">
    <div class="leftside d-flex justify-content-center align-items-center">
      <div class="left-hero-text">
        <span class="bold-text">Lorem</span> ipsum
        <span class="bold-text">dolor</span> sit amet
      </div>
      <img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
    </div>
  </div>
  <div class="col-md-6 gx-0">
    <div class="rightside d-flex justify-content-center align-items-center">
      Right Side
    </div>
  </div>
</div>
htmlcssbootstrap-5


Solution 1:[1]

You just need to change your inner flex container's direction to column.

body {
  font-family: "Merriweather", sans-serif;
  background-color: #fafafa;
  overflow-x: hidden;
}

.leftside,
.rightside {
  height: 50vh;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .leftside,
  .rightside {
    height: 100vh;
  }
}

.leftside {
  background-color: #8a68ff;
  opacity: 83%;
}

.rightside {
  background-color: #ffffff;
}

.left-hero-text {
  font-size: 48px;
  font-weight: 400;
  color: #ffffff;
}

.bold-text {
  font-size: 55px;
  font-weight: 700;
}

img {
  width: 50%;
  height: auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row gx-0">
  <div class="col-md-6 gx-0">
    <div class="leftside d-flex flex-column justify-content-center align-items-center">
      <div class="left-hero-text">
        <span class="bold-text">Lorem</span> ipsum
        <span class="bold-text">dolor</span> sit amet
      </div>
      <img src="https://wiki.geogebra.org/uploads/a/a4/Menu-tools.svg" alt="tools" />
    </div>
  </div>
  <div class="col-md-6 gx-0">
    <div class="rightside d-flex justify-content-center align-items-center">
      Right Side
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 isherwood

Related Questions