Bootstrap Tour

Bootstrap Tour How to Use jsfiddle

by sunil puvvada

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour-standalone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<div class="container theme-showcase">
  <p>
    <input type="button" class="btn btn-lg btn-primary" onclick="startTour()" value="Start Tour" />
  </p>



  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Theme example</h1>
    <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
  </div>


  <div class="page-header">
    <h1 id="buttons">Buttons</h1>
  </div>
  <p>
    <button type="button" class="btn btn-lg btn-default">Default</button>
    <button type="button" class="btn btn-lg btn-primary">Primary</button>
    <button type="button" class="btn btn-lg btn-success">Success</button>
    <button type="button" class="btn btn-lg btn-info">Info</button>
    <button type="button" class="btn btn-lg btn-warning">Warning</button>
    <button type="button" class="btn btn-lg btn-danger">Danger</button>
    <button type="button" class="btn btn-lg btn-link">Link</button>
  </p>
  <p>
   
  <div class="page-header">
    <h1 id="alerts">Alerts</h1>
  </div>
   
</div>

CSS

/* external */

JavaScript

// Instance the tour
var tour = new Tour({
  smartPlacement: false, // does NOT work every time
  backdrop: true,
  steps: [{
    element: ".jumbotron",
    placement: 'bottom',
    title: "Jumbotron ",
    content: "A jumbotron indicates a big box for calling extra attention to some special content or information."
  }, {
    element: "#buttons",
    placement: 'bottom',
    title: "Buttons",
    content: "Bootstrap provides seven styles of buttons: Default, Primary, Success, Info, Warning, Danger, Link"
  }, {
    element: "#alerts",
    placement: 'top',
    title: "Alerts",
    content: "Bootstrap provides an easy way to create predefined alert messages."
  }]
});


function startTour() {
  // Initialize the tour
  tour.init();
  // Restart from begining
  tour.restart();
  // Start the tour
  tour.start(true);
}