Skip to content

Instantly share code, notes, and snippets.

@JeffCohen

JeffCohen/index.html

Created November 9, 2013 20:24
Show Gist options
  • Save JeffCohen/7389564 to your computer and use it in GitHub Desktop.
Save JeffCohen/7389564 to your computer and use it in GitHub Desktop.
Download ZIP
Testing navbar padding
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 70px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-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>
<a class="navbar-brand" href="/">My App</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#about">News</a>
</li>
<li>
<a href="#about">Resources</a>
</li>
<li>
<a href="#contact">About</a>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Search..." class="form-control">
</div>
<div class="form-group"></div>
</form>
</div>
<!--/.navbar-collapse -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Table of Contents</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Week 1</a></li>
<li class="active"><a href="#">Week 2</a></li>
<li><a href="#">Week 3</a></li>
<li><a href="#">Week 4</a></li>
<li><a href="#">Week 5</a></li>
<li><a href="#">Week 6</a></li>
<li><a href="#">Week 7</a></li>
<li><a href="#">Week 8</a></li>
<li><a href="#">Week 9</a></li>
<li><a href="#">Week 10</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<h2>Hello There</h2>
<p>Ruby is cool.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /container -->
</body>
</html>
@Kingo4luv
Copy link

Did you test

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment