Just starting out with Bootstrap and recreated a page layout similar to the starter template on the Bootstrap website. However, I'm facing an issue where the row content overlaps the navbar, despite using the align-items-center utility class on the row.
HTML
<body class="bg-dark -bg-pic -fill-viewport">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-transparent">
<div class="container">
<a class="navbar-brand" href="#">####</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link -link-active px-0 mx-2" href="#">Main Page</a>
</li>
<li class="nav-item">
<a class="nav-link -link px-0 mx-2" href="#">Add Listing</a>
</li>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Login</button>
</div>
</div>
</nav>
<main role="main" class="container">
<div class="row">
<div class="col-md-2 col-lg-3"></div>
<div class="col-12 col-md-8 col-lg-6 text-center">
<h1 class="text-white">Hello</h1>
<p class="lead -text-white-70">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum sed ipsum ac turpis vestibulum aliquet.
Morbi ac neque quis justo posuere tincidunt in id arcus.</p>
<form class="" action="#">
<div class="input-group">
<input class="form-control" placeholder="Search" name="search" type="text">
<div class="input-group-append">
<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="col-md-2 col-lg-3"></div>
</div>
</main>
CUSTOM CSS
/* Utility classes*/
.-fill-viewport {
min-height: 100vh;
}
.-text-white-70 {
color: rgba(255,255,255,0.7);
}
/* Medium devices and higher */
@media only screen and (min-width: 768px) {
.-link-active {
border-style: solid;
border-color: white;
border-width: 0px 0px 3px 0px;
}
.-link:hover {
border-style: solid;
border-color: rgba(211,211,211,0.6);
border-width: 0px 0px 3px 0px;
}
}
/* small devices and higher */
@media only screen and (min-width: 576px) {
.-bg-pic {
background: linear-gradient(
rgba(20,20,20, .6),
rgba(20,20,20, .6)),
url("background.jpeg") center/cover no-repeat;
}
}