Get started with bootstrap-tour CDN

Apache-2.0 licensed

Bootstrap-tour: Free, easy library for creating tours, tooltips in Bootstrap projects.

Tags:
  • tour
  • bootstrap
  • js
  • intro
  • twitter

Stable version

Copied!

How to start using bootstrap-tour CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with bootstrap-tour CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-tour/0.12.0/css/bootstrap-tour.min.css">
</head>
<body>
    <div id="app">
        <button id="start-tour" class="btn btn-primary">Start Tour</button>
        <div id="content">
            <h1>Welcome to my website!</h1>
            <p>This is a simple example using Bootstrap Tour.</p>
            <button class="btn btn-secondary">Next</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.cdnhub.io/bootstrap-tour/0.12.0/js/bootstrap-tour.min.js"></script>

    <script>
        const tour = new window.bootstrapTour({
            selector: '#app',
            templates: {
                nextButton: '<button class="btn btn-secondary">Next</button>'
            },
            steps: [
                {
                    element: '#start-tour',
                    title: 'Welcome to the Tour!',
                    content: 'Click the button below to start the tour.'
                },
                {
                    element: '#content h1',
                    title: 'Heading',
                    content: 'This is a heading.'
                }
            ]
        });

        document.getElementById('start-tour').addEventListener('click', () => {
            tour.start();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions