Bootstrap 3 Template

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

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">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar">A</span>
        <span class="icon-bar">B</span>
        <span class="icon-bar">C</span>
      </button>
      <a href="http://Laravel App.dev" class="navbar-brand">Laravel App</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">

    </div><!--/.nav-collapse -->
  </div>
</nav>

<div class="container body-content">

		<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>

<!-- new nav section -->
		<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
			<div class="navbar-inner">
				<div class="list-group list-group-root well">

					<a class="list-group-item" href="#introduction">Introduction</a>
					<a class="list-group-item" href="#features">Features</a>
					<a class="list-group-item" href="#dependencies">Dependencies</a>
				    <a href="#item-1" class="list-group-item" data-toggle="collapse">
				      <i class="glyphicon glyphicon-chevron-right"></i>Getting Started
				    </a>
				    <div class="list-group collapse in" id="item-1">
				      <a class="list-group-item" href="#installation">Installation</a>
				      <a class="list-group-item" href="#available-commands">Available Command</a>
				    </div>

				    <a href="#item-2" class="list-group-item"...

CSS

body {
    padding-top: 65px;
    padding-bottom: 20px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 380px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0;
    padding-right: 0;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column.
   Also, add a 8pm to the bottom margin
*/
.dl-horizontal dt {
    white-space: normal;
    margin-bottom: 8px;
}

.section-block {
    margin-top: 60px !important;
}

.list-group.list-group-root {
    padding: 0;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
    margin-top: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
    padding: 6px;
    word-wrap: break-word;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 35px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 60px;
}

.list-group-item .glyphicon {
    margin-right: 3px;
}

#leftCol {
    display: block;
    height: auto;
    padding: 0;
    width: 100%;
}

.navbar-fixed-top-again {
    position: static;
    top: 60px;
    z-index:1031;
}
.navbar-inner {
    background: red;
    padding: 5px;
}

.affix {
    position: fixed !important;
}

JavaScript

$(function(){




	  $('.list-group-item').on('click', function() {
	    $('.glyphicon', this)
	      .toggleClass('glyphicon-chevron-down')
	      .toggleClass('glyphicon-chevron-right');
	  });


	});