CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3visual-studio-2013
Nicklas Pouey-Winger
Nicklas Pouey-Winger

Reputation: 3023

Bootstrap template created by Visual Studio 2013 not working properly

I've generated a new asp.net mvc project based on the new Bootstrap 3 template. This does not seem to work properly, as it does not add any spacing between the header navbar and the content rendered below by Renderbody(). I've tried pasting in examples from the Bootstrap website and use the css provided by Visual Studio when creating the new page, but with no luck.

I've attached the following image to describe (Note no spacing between jumbotron and header):

enter image description here

Here's the markup generated:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("Logout", "Index", "Home")</li>
                </ul>
                <p class="navbar-text navbar-right">
                    Logged in as @(User.Identity.Name)
                </p>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Any help would be greatly appreciated here.

Upvotes: 1

Views: 1302

Answers (1)

Moff
Moff

Reputation: 46

This is not controlled by bootstrap, but by the Site.css file

body { padding-top: 50px; padding-bottom: 20px; }

by changing the padding-top value to e.g. 75 or 100, you get a gap between the nav bar and the content

Upvotes: 1

Related Questions