I'm new to ASP.Net, I tried to create a simple login page. Layout page has a jumbotron. But my login controls are overlapped with the jumbotron.
Appreciate your help
_Layout.cshtml - file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/css/Main.scss" rel="stylesheet" type="text/css"/>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="jumbotron">
<h2>Welcome to Application</h2>
</div>
</div>
</div>
<div id ="main" class="col-lg-8">
@RenderBody()
</div>
</body>
</html>
Login.cshtml - Login View
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Login";
}
@using (Html.BeginForm("Login", "Home", FormMethod.Post))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
if (@ViewBag.LoginErrorMsg != null)
{
<div class="form-group has-error">
@ViewBag.LoginErrorMsg
</div>
}
<div class="container body-content">
<div class="container-fluid">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="form-group">
@Html.LabelFor(a => a.email, new { @class = "control-label" })
@Html.TextBoxFor(a => a.email, new { @class = "form-control" })
@Html.ValidationMessageFor(a => a.email)
</div>
<div class="form-group">
@Html.LabelFor(a => a.Password, new { @class = "control-label" })
@Html.TextBoxFor(a => a.Password, new { @class = "form-control" })
@Html.ValidationMessageFor(a => a.Password)
</div>
<button type="submit" class="btn btn-default">Login</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
}
This is the result I get screenshot
Read the Bootstrap documentation on Fixed to Top.