Gap between Navbar and Jumbotron
- by DDK
I am building I suppose you could call a template for the site I am going to build however I am still pretty new to bootstrap and thus have trouble figuring which CSS rules are affecting elements etc.
The problem I am having is I cannot get the Jumbotron unit to sit flush with the bottom of the navbar. I have found a few questions on here about the same problem but the solutions did not work.
Here is my code
</head>
<body>
<div class="row">
<div>
<img src="http://placehold.it/1600x300" width="100%">
</div>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified" id="myNav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Services</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="jumbotron" id="openingtext">
This is where the opening sale text will go
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
I would provide the css but as it is all being pulled from an unchanged version of bootstrap and my stylesheet.css has nothing relating to any of these ids etc it seems pointless to do so.
I look forward to hearing your solutions guys and girls
