Gap between Navbar and Jumbotron
Posted
by
DDK
on Stack Overflow
See other posts from Stack Overflow
or by DDK
Published on 2014-05-28T12:10:25Z
Indexed on
2014/05/28
15:27 UTC
Read the original article
Hit count: 187
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
© Stack Overflow or respective owner
