I have a partially split homepage with two sections using Twitter Bootstrap v5.1.3 for the layout. The left side consists of two divs, one for text and one for an image.
These divs are contained within a flex-parent, giving them an inline-block appearance.
My goal is to have the text at the top and the image at the bottom within the "leftside col-md-6" section, both centered.
Here is what I am aiming for:
https://i.sstatic.net/6UIyO.png
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/<a href="/cdn-cgi/l/email-protection"
class="__cf_email__"
data-cfemail="32505d5d46414640534272071c031c01">[email protected]</a>/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>