I'm starting a new site with bootstrap 4 and having problems from the very beginning. My navbar menu is overlapping some part of the body content and I'm stuck.
I'm attaching an awful draft where you can see that navbar (set to 50% width on purpose to show this) is overlapping.
In fact I'd like the body content (the image and so) to be vertically centered, and that's the most important issue, but I'd also like to know why navbar is overlapping.
Site.css:
html, body {
height: 100%;
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide 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 h-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">
Edad en el momento del accidente
</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>
Any help in centering the body content vertically and identifying why the overlapping issue will be much appreciated.
