Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by mrmashal

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Side-nav comes after the main content -->

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <a class="navbar-brand" href="index.html">We have a nav bar also!</a>
        </div>
    </nav>

    <!-- Page Content -->
    <div class="container">
        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Test Page
                </h1>
                <ol class="breadcrumb">
                    <li><a href="index.html">Home</a></li>
				    <li class="active">Test Page</li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Content Row -->
        <div class="row">
            <div class="col-lg-12">

                <!-- Main Content -->
                <div id="main-content" class="col-xs-9">
                    <h2>Heading<a id="1"></a></h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper. Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
                    <h2>Heading<a id="2"></a></h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

html,
body {
    height: 100%;
}
body {
    padding-top: 50px;
}
footer {
    margin: 50px 0;
}
h2 {
	margin-top: 60px;
}

/* side navigation */
/* media queries that make the side nav position static have been removed for easier editing in jsfiddle */
#sidenav.affix {
    top: 50px;
    z-index: 1;
    width: 212.5px;
}
#sidenav {
    margin-bottom: 20px;
}
.nav-stacked>li+li {
    margin-top: 0;
}
.nav-stacked>li>a {
    border-radius: 0 !important;
    margin-top: -1px;
}
.nav-stacked>li:first-child>a {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}
.nav-stacked>li:last-child>a {
    margin-bottom: 0 !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

/* fix problem with anchors going behind top navbar */
#main-content h2 a {
    display: block;
    position: relative;
    top: -100px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */

// activate scrollspy and affix for sidenav
$('body').scrollspy({ target: '#sidenav' });
$('#sidenav').affix({
  offset: {
    top: 165
  }
})

// smooth scrolling
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 800);
        return false;
      }
    }
});