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 mkurzweil

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">
		<h1 class="text-center">Hello World</h1>

		<div id="special-carousel" class="carousel slide" data-ride="carousel">
		    <ol class="carousel-indicators">
		        <li data-target="#special-carousel" data-slide-to="0" class=""></li>
		        <li data-target="#special-carousel" data-slide-to="1" class=""></li>
		        <li data-target="#special-carousel" data-slide-to="2" class=""></li>
		    </ol>
		    <div class="carousel-inner">
		        <div class="item">
		            <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojN2E3YTdhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
		            <div class="container">
		                <div class="carousel-caption">
		                    <h1>Example headline.</h1>
		                    <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
		                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
		                </div>
		            </div>
		        </div>
		        <div class="item">
		            <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide"...

JavaScript

$(document).ready(function(){
  $("#special-carousel .carousel-indicators li:first").addClass("active");
  $("#special-carousel .carousel-inner .item:first").addClass("active");
});

$(document).ready(function(){
  $("#quote-carousel .carousel-indicators li:first").addClass("active");
  $("#quote-carousel .carousel-inner .item:first").addClass("active");
});