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 class="row">
	<div class="col-md-3" id="leftCol">

		<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">

	<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" data-toggle="collapse">
	      <i class="glyphicon glyphicon-chevron-right"></i>How To
	    </a>
	    <div class="list-group collapse in" id="item-2">
			<a class="list-group-item" href="#how-to-create-resource">Some long text that should auto wrap so...

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: 15px;
    padding-right: 15px;
}

/* 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;
}

JavaScript

$(function(){

		$('#leftCol').affix({
		  offset: {
		    top: 100,
		    bottom: function () {
		      return (this.bottom = $('.footer').outerHeight(true))
		    }
		  }
		});


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


	});