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
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!