jquery - bootstrap content under/behind navigation -

jquery - bootstrap content under/behind navigation -

why same code have nice top margin on bootstrap example, if set in jsfiddle content under navigation

http://jsfiddle.net/a60x81gw/

http://getbootstrap.com/examples/starter-template/

im using theese librarys

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

code

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" 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> <a class="navbar-brand" href="#">project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <div class="starter-template"> <h1>bootstrap starter template</h1> <p class="lead">use document way start new project.<br> text , barebones html document.</p> </div> </div>

that template includes padding on body avoid overlap fixed navbar.

body { padding-top: 50px; }

as mentioned on documentation:

body padding required fixed navbar overlay other content, unless add together padding top of body. seek out own values or utilize our snippet below. tip: default, navbar 50px high.

http://getbootstrap.com/components/#navbar-fixed-top

jquery html css twitter-bootstrap twitter-bootstrap-3