bootstrap-5-intro-tour

A Plugin for Bootstrap 5 That Allows Building Intro Tours

by

Bootstrap 5 Intro Tour is an extension of BS5 which allows building introductory tours. The extension is written in plain JS – so there are no jQuery dependencies. The plugin allows taking a quick tour of your app for users/customers.

bootstrap tour, bootstrap tour example, bootstrap tour example code, website tour plugin, bootstrap tour template

How to make use of it:

1. Insert the stylesheet bs5-intro-tour.css and JavaScript bs5-intro-tour.js into your Bootstrap 5 web page.

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- BS 5 Intro Tour -->
<link href="css/bs5-intro-tour.css" rel="stylesheet" />
<script src="js/bs5-intro-tour.js"></script>

2. Attach steps to parts throughout the doc.

var steps = [
    {
      title: "Hello",
      content: "<p>Hello message</p>"
    }, {
      id: "step1",
      content: "<p>Step 1.</p>"
    },{
      id: "step2",
      content: "<p>Step 2.</p>"
    }, {
      id: "step3",
      content: "<p>Step 3.</p>"
    }, {
      id: "step4",
      content: "<p>Step 4.</p>"
    }
];

3. Initialize the plugin.

var tour = new Tour(steps);

4. Start the tour when wanted.

tour.show();

Easy Guided Tour Plugin For Bootstrap 5, Bootstrap 5 Intro Tour Plugin/Github

See Demo And Download

Demo
Download

Official Website(yaras6): Click Here

This superior jQuery/javascript plugin is developed by yaras6. For extra Advanced Usages, please go to the official website.

Leave a Comment