When using Bootstrap, I have divided my main page into two grids to enable content to stack vertically in mobile view. However, I am struggling to center the text horizontally and vertically within the grid without aligning the text to the center using the d-flex Bootstrap function. You can see what I am trying to achieve with my code here, and what I currently have here (note that the navbar text sizes are what I desire, although they appear larger in the 'I want' image). Below is the code I have implemented so far:
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background-color: #EECBD1;
font-family: 'Jost', sans-serif;
font-family: 'Inter', sans-serif;
min-height: 100vh;
}
.heaven-logo {
/* max-width: 50%; */
height: auto;
padding-left: 5px;
padding-right: 5px;
}
.nav-link {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 100%;
color: #000;
display: flex;
padding-right: 15px;
list-style: none;
}
.nav-link:hover {
color: #fff;
}
.navbar-nav {
margin-left: auto;
}
.landing-main-text {
font-family: 'Jost', sans-serif;
font-weight: 600;
font-size: 500%;
line-height: 1.1;
margin: none;
}
.landing-desc-text {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 200%;
}
.macaron-image {
width: 25rem;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<title>Macaron Heaven</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS tag -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f6edf3edf1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&family=Jost:wght@600&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/logo.png" class="heaven-logo">
</a>
<div id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Selection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Landing page -->
<div class="container-fluid" id="landpage">
<div class="row">
<div class="col-sm-12 col-md-6 d-flex flex-column justify-content-center align-items-center">
<p class="landing-main-text">The real macaron.</p>
<p class="landing-desc-text">Sweet, colorful delicacy that you can't have just one of.</p>
</div>
<div class="col-sm-12 col-md-6 d-flex flex-column justify-content-center align-items-center">
<img src="img/macaron-image.svg" class="macaron-image">
</div>
</div>
</div>
<!-- JS tag -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df8e3fde3ff">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>