RenderBody() overlaps with _Layout.cshtml when using jumbotron

Question

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

You probably need to play around with css code i guess – Polynomial Proton Mar 27 '16 at 03:27 — Polynomial Proton, Mar 27 '16 at 03:27

score 0 · Accepted Answer · answered Mar 27 '16 at 03:50

Read the Bootstrap documentation on Fixed to Top.

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; } 
Make sure to include this after the core Bootstrap CSS.

RenderBody() overlaps with _Layout.cshtml when using jumbotron

1 Answers1