How do I to create a layout with jumbotron and navbar? - html

Question

I'm trying to create a layout using jumbotron and navbar but I cannot do it. I want that the jumbotron is located on top and the navbar is under of it. After I created I don't know why it has space on top and between the navbar.
How do I fix this ?
trying
<!-- Header.cshtml to use as a Partial to include on main layout -->
<header class="jumbotron bg-red">
<h1>My first layout</h1>
<h3>Trying to create a layout using jumbotron and navbar</h3>
</header><!--jumbotron-->
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="~/Imagens/logo.png" width="32" height="32" title="Red Cherry" />
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div><!--nav bar-->

Answer 1

Not sure why you having this issue, have you changed anything in the bootstrap css?
For a quick fix you can do some css, add a class 'remove-space' to the header tag.
<header class="jumbotron bg-red remove-space">
Then apply this css to it.
.remove-space{
margin: -50px 0 0 0;
}