Bootstrap Tour Example

Developer
Mike
Size
4,821 Kb
Views
8,096
  1. Bootstrap Tour Example Previews
  2. Bootstrap Tour Example HTML Codes
  3. Bootstrap Tour Example CSS Codes
  4. Bootstrap Tour Example JS Codes

How do I make an bootstrap tour example?

What is a bootstrap tour example? How do you make a bootstrap tour example? This script and codes were developed by Mike on 01 February 2023, Wednesday.

Bootstrap Tour Example Previews
IQ Test

Bootstrap Tour Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Tour Example</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- sample template from https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_blog&stacked=h -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<body> <div class="container-fluid"> <div class="row content"> <div class="col-sm-3 sidenav"> <h4>John's Blog</h4> <ul id="categories" class="nav nav-pills nav-stacked"> <li class="active"><a href="#section1">Home</a></li> <li><a href="#section2">Friends</a></li> <li><a href="#section3">Family</a></li> <li><a href="#section3">Photos</a></li> </ul><br> <div id="search" class="input-group"> <input type="text" class="form-control" placeholder="Search Blog.."> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </div> <div class="col-sm-9"> <h4><small>RECENT POSTS</small></h4> <hr> <h2>I Love Food</h2> <h5><span class="glyphicon glyphicon-time"></span> Post by Jane Dane, Sep 27, 2015.</h5> <h5><span class="label label-danger">Food</span> <span class="label label-primary">Ipsum</span></h5><br> <p>Food is my passion. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <br><br> <h4><small>RECENT POSTS</small></h4> <hr> <h2>Officially Blogging</h2> <h5><span class="glyphicon glyphicon-time"></span> Post by John Doe, Sep 24, 2015.</h5> <h5><span class="label label-success">Lorem</span></h5><br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <div id="comment"> <h4>Leave a Comment:</h4> <form role="form"> <div class="form-group"> <textarea class="form-control" rows="3" required></textarea> </div> <button type="submit" class="btn btn-success">Submit</button> </form> </div> <br><br> <p><span class="badge">2</span> Comments:</p><br> <div class="row"> <div class="col-sm-2 text-center"> <img src="bandmember.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="col-sm-10"> <h4>Anja <small>Sep 29, 2015, 9:12 PM</small></h4> <p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <br> </div> <div class="col-sm-2 text-center"> <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="col-sm-10"> <h4>John Row <small>Sep 25, 2015, 8:25 PM</small></h4> <p>I am so happy for you man! Finally. I am looking forward to read about your trendy life. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <br> <p><span class="badge">1</span> Comment:</p><br> <div class="row"> <div class="col-sm-2 text-center"> <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="col-xs-10"> <h4>Nested Bro <small>Sep 25, 2015, 8:28 PM</small></h4> <p>Me too! WOW!</p> <br> </div> </div> </div> </div> </div> </div> </div> <footer class="container-fluid"> <p>Footer Text</p> </footer>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bootstrap Tour Example - Script Codes CSS Codes

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content { height: 1500px;
}
/* Set gray background color and 100% height */
.sidenav { background-color: #f1f1f1; height: 100%;
}
/* Set black background color, white text and some padding */
footer { background-color: #555; color: white; padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) { .sidenav { height: auto; padding: 15px; } .row.content { height: auto; }
}
.popover { max-width: 375px;
}
.popover .fa { color: #D47075; padding-top: 5px;
}
.popover-content { padding: 5px 0;
}
.hca-tooltip--left-nav { position: absolute; background-color: #fff; border-radius: 6px; border: 1px solid #efefef; left: 78px; top: 60px; padding: 10px 10px 15px 15px; font-size: 1em; width: 340px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); color: #000; z-index: 1000; text-decoration: none;
}
.hca-tooltip--left-nav .hca-tooltip--okay-btn { padding: 12px 20px; line-height: 15px; background-color: #408DDD; border: none; color: #fff;
}
.hca-tooltip--left-nav .hca-border-circle--40 { width: 40px; height: 40px; margin-top: 10px; border-radius: 50%; font-size: .8em; color: #F07C8B; line-height: 38px; text-align: center; background: #fff; border: 1px solid #F07C8B;
}

Bootstrap Tour Example - Script Codes JS Codes

 // Instance the tour
var tour = new Tour({ steps: [ { element: "#categories", placement: "auto", backdropPadding: 5, content: "Click on a category above to open the latest blog posts on that subject.", template: "<div class='popover tour hca-tooltip--left-nav'><div class='arrow'></div><div class='row'><div class='col-sm-12'><div data-role='next' class='close'>X</div></div></div><div class='row'><div class='col-sm-2'><i class='fa fa-hand-pointer-o fa-3x' aria-hidden='true'></i></div><div class='col-sm-10'><p class='popover-content'></p><a id='hca-left-nav--tooltip-ok' href='#' data-role='next' class='btn hca-tooltip--okay-btn'>Okay</a></div></div></div>" }, { element: "#search", placement: "auto", backdropPadding: 5, content: "Can't find the post you're looking for? Use our search engine to find it.", template: "<div class='popover tour hca-tooltip--left-nav'><div class='arrow'></div><div class='row'><div class='col-sm-12'><div data-role='next' class='close'>X</div></div></div><div class='row'><div class='col-sm-2'><i class='fa fa-search fa-3x' aria-hidden='true'></i></div><div class='col-sm-10'><p class='popover-content'></p><a id='hca-left-nav--tooltip-ok' href='#' data-role='next' class='btn hca-tooltip--okay-btn'>Okay</a></div></div></div>" }, { element: "#comment", placement: "top", backdropPadding: 20, content: "Have something to say? Leave a new comment by click the textarea below.", template: "<div class='popover tour hca-tooltip--left-nav'><div class='arrow'></div><div class='row'><div class='col-sm-12'><div data-role='next' class='close'>X</div></div></div><div class='row'><div class='col-sm-2'><i class='fa fa-paper-plane fa-3x' aria-hidden='true'></i></div><div class='col-sm-10'><p class='popover-content'></p><a id='hca-left-nav--tooltip-ok' href='#' data-role='next' class='btn hca-tooltip--okay-btn'>Okay</a></div></div></div>" }], animation: true, backdrop: true, storage: false, smartPlacement: true,
});
// Initialize the tour
tour.init();
// Start the tour
tour.start(true);
Bootstrap Tour Example - Script Codes
Bootstrap Tour Example - Script Codes
Home Page Home
Developer Mike
Username mikestabile
Uploaded February 01, 2023
Rating 3
Size 4,821 Kb
Views 8,096
Do you need developer help for Bootstrap Tour Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike (mikestabile) Script Codes
Name
Business Card Sample Using jQuery Flip
Scroll to top design 2
Materialize Card
Bill Pay Intro Carousel
Bill Pay Banner Ad
Styled radio buttons
Scroll to top design 1
Hero with bottom banner
A Pen by Mike
JQuery Smooth Scroll
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!