I've just kicked off a fresh website using bootstrap 4, but already facing hurdles right from the start. The navbar menu seems to be encroaching on some part of the body content, and I'm completely at sea.
Attached is a terrible draft where you can clearly notice the overlap caused by setting the navbar to 50% width intentionally.
The crux of the matter is I want the body content (including the image) to be vertically centered; that's my top priority. Additionally, I would like to understand why the navbar is overlapping in the first place.
Site.css:
html, body {
height: 100%;
padding-top: 50px;
padding-bottom: 20px;
}
/* Apply padding to prevent content from reaching the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override default behavior whereby horizontal description lists truncate terms exceeding the left column width */
.dl-horizontal dt {
white-space: normal;
}
/* Adjust the width for form input elements since they usually occupy 100% width by default */
input,
select,
textarea {
max-width: 280px;
}
Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="/">Application name</a>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item"><a href="/" class="nav-link">Home</a></li>
<li class="nav-item"><a href="/Home/About" class="nav-link">About</a></li>
<li class="nav-item"><a href="/Home/Contact" class="nav-link">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right mr-auto">
<li class="nav-item"><a href="/Account/Register" id="registerLink" class="nav-link">Register</a></li>
<li class="nav-item"><a href="/Account/Login" id="loginLink" class="nav-link">Log in</a></li>
</ul>
<ul class="nav navbar-nav navbar-right mr-auto">
<li class="nav-item"><img src="~/Content/img/bandera_catalunya.png" alt="car_accident" class="nav-link" style="width: 50px;" /></li>
<li class="nav-item"><img src="~/Content/img/bandera_espana.png" alt="car_accident" class="nav-link" style="width: 50px;" /></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid h-100 body-content" style="background-color:antiquewhite;">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
Index.html:
<div class="container" style="background-color: aqua">
@*align-items-center innerHeight-100*@
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
@Html.LabelFor(model => model.Year)
</div>
<div class="col-md-6">
@Html.DropDownListFor(model => model.Year, new SelectList(Model.Years, "Value", "Text"), new { @class = "form-control year-dropdown", style = "font-size:120%;" })
</div>
</div>
<div class="row p-2"></div>
<div class="row">
<div class="col-md-6">
Age at the time of accident
</div>
<div class="col-md-6">
@Html.DropDownListFor(model => model.Year, new SelectList(Model.Ages, "Value", "Text"), new { class = "form-control year-dropdown" })
</div>
</div>
</div>
<div class="col-md-8">
<img src="~/Content/img/accident-1497298.jpg" alt="car_accident" class="img-fluid w-100" />
</div>
</div>
</div>
Your assistance in aligning the body content vertically and diagnosing the root cause of the overlap problem will be highly appreciated.