Editing Bootstrap Cookbook

[[Category:Bootstrap]] [[Category:CSS]] [[Category:Web Development]]
== Bootstrap reference ==

* [http://getbootstrap.com/components/ Bootstrap components]
* [http://getbootstrap.com/getting-started/#examples Bootstrap starter templates]

== Headers ==

<syntaxhighlight lang="html4strict">
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand">Project Name</a>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active">lorem ipsum dolor</li>
					<li class="active">lorem ipsum dolor</li>
					<!--// etc... //-->
				</ul>
			</div>
		</div>
	</nav>
	<div class="container" role="main">
		<div class="page-header">
			<h1>Page Title</h1>
			<p>Teaser...</p>
		</div>
		<!--// page content... //-->
	</div>
</body>
</syntaxhighlight>

=== Fixed navbar overlapping page content ===

If you simply copy the sample HTML from the Bootstrap site (see [#Headers] above), the fixed navbar will overlap the site content. This is addressed in the [http://getbootstrap.com/components/#navbar-fixed-top Bootstrap docs].<ref>[http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site Twitter Bootstrap Fixed Top Navbar Overlapping Site], Stackoverflow</ref>

Body padding is required in a stylesheet that follows the Bootstrap stylesheets:

<syntaxhighlight lang="css">
body { padding:70px; }
</syntaxhighlight>

And to make it responsive: 

<syntaxhighlight lang="css">
body { padding-top: 52px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}
</syntaxhighlight>

== Notes ==
<references />