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 Nicolai Bolotin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http:////netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/sorich87/bootstrap-tour/master/build/css/bootstrap-tour.css">
<script src="http://bootstraptour.com/assets/js/bootstrap-tour.js?2014-05-18T10%3A22%3A25%2B01%3A00"></script>
<a href="#" class="btn btn-block btn-primary" id="startTour">Start tour</a>
<br/>
<div class="row">
<div class="left-container col-xs-6"> <span class="logo"><h2>Title 2</h2></span>

    <p class="left-msg welcom-msg">Now that registration and filling out forms is out the way, let's get you all set up.</p>
    <p class="left-msg need-enrol">First you'll need to enrol to an exam.</p>
</div>
<div class="right-container col-xs-6">
    <button class="btn btn-default enrol-btn" id="enrol-btn1" data-toggle="popover" data-placement="left">Enrol</button>
    <button class="btn btn-default start-exam-btn hidden">Preparation</button>
</div>
</div>
<div id="see-schedule">
    <br/>
        Second step content
</div>

CSS

#see-schedule,#enrol-btn1{
    background-color:lightgray;
}

JavaScript

// Instance the tour
    var tour = new Tour({
        steps: [{
            element: "#enrol-btn1",
            title: "Exam Enrolment",
            content: "First let's enrol to an exam"
        }, {
            element: "#see-schedule",
            title: "Your Schedule",
            content: "Great, let's see your new schedule."
        }]
    }).init().start(true);

$("#startTour").click(function(){
    tour.restart();
})