This tutorial introduces Bootstrap Toast and Scrollspy guiding in creating basic Bootstrap 4 Toast and Scrollspy:
In this Bootstrap 4 Toasts and Scrollspy tutorial, we have covered an introduction to toasts, creating a basic toast, toasts with the close icon, an introduction to Scrollspy, creating a basic scrollspy, scrollspy with a vertical navigation menu and frequently asked questions regarding Bootstrap 4 toast and scrollspy.
Please note that we have used Bootstrap version 4 in all examples.
=> Check ALL Bootstrap Tutorials Here
Let’s begin!
Table of Contents:
Bootstrap 4 Toasts and Scrollspy
The following table summarizes the classes and attributes of Bootstrap 4 that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .toast class | This class is used to create a toast. |
| The .toast-header class | This class is used to create a toast header. |
| The .toast-body class | This class is used to create a toast body. |
| Attribute | Usage |
|---|---|
| The data-autohide="false" attribute | This attribute is used to prevent the toast from hiding automatically. |
| The data-dismiss="toast" attribute | This attribute is used to close the toast. |
| The data-spy="scroll" attribute | This attribute is used to create the scrollable area of the scrollspy. |
Bootstrap Toasts
Toast is newly introduced in Bootstrap 4.
A toast is similar to an alert box. Usually, it appears for a short time (like one or two seconds), but you can control that behavior. Usually, it appears when a user performs some action such as clicking a button, etc. and shows some information to the user.
Creating a Basic Bootstrap Toast
Toast consists of two main parts. They are,
- Header part
- Body part
Follow the below steps to create a basic Bootstrap Toast.
- Add the .toast class to a <div> element.
- Inside the <div> element, add a <div> element with the .toast-header class to create the toast header and another <div> element with the .toast-body class to create the toast body.
- Add the JavaScript code to show the toast.
Example:
The below programming code shows an example of a basic toast. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<!--Button-->
<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>
<!--Toast-->
<div class="toast">
<!--Toast Header-->
<div class="toast-header">
Toast Header
</div>
<!--Toast Body-->
<div class="toast-body">
Some text here
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$('.toast').toast('show');
});
});
</script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Toast with Close Icon
You can add a close icon to a toast and use it to close (hide) the toast. By default, toasts hide automatically after they appear. Add the data-autohide=”false” attribute to prevent the toast from hiding automatically.
Example:
The below programming code shows an example of a toast with a close icon. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">1 hour ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text here
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$('.toast').toast('show');
});
});
</script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Scrollspy
Scrollspy is used to automatically highlight the links in a navigation list based on the scroll position. It allows users to understand where they are currently on the page. It also helps to make your web pages more accessible to users.
Creating a Basic Bootstrap Scrollspy
You can create a Scrollspy using navigation or list group components.
Example of a basic Scrollspy:
The below programming code shows an example of a basic scrollspy. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<style>
body{
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar">
<!--Links that allow to jump to a specific section of the scrolling area-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section_1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section_2">Section 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 3</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section_3-1">Sub-section 1</a>
<a class="dropdown-item" href="#section_3-2">Sub-section 2</a>
</div>
</li>
</ul>
</nav>
<!--Section 1-->
<div id="section_1" class="container-fluid bg-danger" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod, est sit amet laoreet dictum, purus elit sagittis eros, a sagittis leo dui a felis. Integer in leo quis metus varius malesuada vitae eget tortor. Curabitur nec justo in diam viverra volutpat ut et odio. Maecenas rhoncus risus a tempus mollis. Nunc dolor nisi, dignissim at nisl ut, luctus rutrum enim. Morbi ipsum turpis, tempor et nulla ut, pulvinar vehicula purus. Duis id nisi porta, lacinia ipsum in, sodales lacus. Nullam eget sollicitudin orci, vel lacinia libero. Phasellus in libero vel turpis sollicitudin ultrices sit amet sed mi. Ut commodo urna a hendrerit malesuada. Maecenas dolor turpis, pretium vitae nisl sit amet, aliquam dictum odio. Nam ante nibh, imperdiet et purus nec, mollis tincidunt justo. In hac habitasse platea dictumst. Sed porttitor libero non turpis feugiat euismod. Aliquam eleifend pretium magna, in posuere sem.</p>
</div>
<!--Section 2-->
<div id="section_2" class="container-fluid bg-warning" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 2</h1>
<p>Morbi nulla turpis, convallis vel sapien eu, dapibus ornare sapien. Cras leo quam, rutrum a magna ac, auctor elementum orci. Nunc consectetur pharetra sapien in scelerisque. Aliquam a ullamcorper arcu, a laoreet sem. Quisque ultrices mauris ut metus vehicula pretium ac non neque. Nam tristique dui quis convallis lobortis. Mauris ut neque et risus egestas sodales ac et elit. Pellentesque ultricies mi ut diam convallis dapibus. Etiam erat nulla, iaculis nec rhoncus id, vehicula eget arcu. Integer malesuada lacus at nibh ullamcorper, ac congue quam ullamcorper. Vivamus mollis tempor ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut orci non ipsum vulputate interdum ut maximus velit.</p>
</div>
<!--Section 3-->
<!--Section 3: sub-section 1-->
<div id="section_3-1" class="container-fluid bg-success" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 3: Sub-section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet gravida orci, a efficitur turpis. Donec quis lacus quis tellus consequat aliquam. Sed odio justo, posuere a molestie nec, tincidunt et urna. Integer euismod condimentum aliquam. Etiam eu velit nibh. Aliquam vel odio nibh. Morbi tincidunt nec tortor a varius. Phasellus pretium convallis mauris lacinia tincidunt. Praesent in magna eget diam porttitor molestie. Maecenas vulputate blandit tempus. Mauris non augue neque. Nullam consectetur a risus vitae rhoncus. Vestibulum sit amet ipsum fermentum dolor pulvinar fermentum.</p>
</div>
<!--Section 3: sub-section 2-->
<div id="section_3-2" class="container-fluid bg-info" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 3: Sub-section 2</h1>
<p>Morbi nulla turpis, convallis vel sapien eu, dapibus ornare sapien. Cras leo quam, rutrum a magna ac, auctor elementum orci. Nunc consectetur pharetra sapien in scelerisque. Aliquam a ullamcorper arcu, a laoreet sem. Quisque ultrices mauris ut metus vehicula pretium ac non neque. Nam tristique dui quis convallis lobortis. Mauris ut neque et risus egestas sodales ac et elit. Pellentesque ultricies mi ut diam convallis dapibus. Etiam erat nulla, iaculis nec rhoncus id, vehicula eget arcu. Integer malesuada lacus at nibh ullamcorper, ac congue quam ullamcorper. Vivamus mollis tempor ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut orci non ipsum vulputate interdum ut maximus velit.</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Important: Don’t forget to add position: relative for the body in your CSS.
Note: To visit a specific section, you can either scroll or just simply click on the link of the relevant section on the navigation bar.
Bootstrap Scrollspy with Vertical Navigation Menu
In this section, we use a vertical navigation menu instead of a horizontal navigation menu, which we have used in the previous example.
Example of a scrollspy with a vertical navigation menu:
The below programming code shows an example of a scrollspy with a vertical navigation menu. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<style>
body {
position: relative;
}
ul.nav-pills {
position: fixed;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container-fluid bg-dark">
<div class="row">
<!--Links that allow to jump to a specific section of the scrolling area-->
<nav class="col-sm-2 col-4 mt-3" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section_1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section_2">Section 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 3</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section_3-1">Sub-section 1</a>
<a class="dropdown-item" href="#section_3-2">Sub-section 2</a>
</div>
</li>
</ul>
</nav>
<div class="col-sm-10 col-8">
<!--Section 1-->
<div id="section_1" class="container-fluid bg-danger" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod, est sit amet laoreet dictum, purus elit sagittis eros, a sagittis leo dui a felis. Integer in leo quis metus varius malesuada vitae eget tortor. Curabitur nec justo in diam viverra volutpat ut et odio. Maecenas rhoncus risus a tempus mollis. Nunc dolor nisi, dignissim at nisl ut, luctus rutrum enim. Morbi ipsum turpis, tempor et nulla ut, pulvinar vehicula purus. Duis id nisi porta, lacinia ipsum in, sodales lacus. Nullam eget sollicitudin orci, vel lacinia libero. Phasellus in libero vel turpis sollicitudin ultrices sit amet sed mi. Ut commodo urna a hendrerit malesuada. Maecenas dolor turpis, pretium vitae nisl sit amet, aliquam dictum odio. Nam ante nibh, imperdiet et purus nec, mollis tincidunt justo. In hac habitasse platea dictumst. Sed porttitor libero non turpis feugiat euismod. Aliquam eleifend pretium magna, in posuere sem.</p>
</div>
<!--Section 2-->
<div id="section_2" class="container-fluid bg-warning" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 2</h1>
<p>Morbi nulla turpis, convallis vel sapien eu, dapibus ornare sapien. Cras leo quam, rutrum a magna ac, auctor elementum orci. Nunc consectetur pharetra sapien in scelerisque. Aliquam a ullamcorper arcu, a laoreet sem. Quisque ultrices mauris ut metus vehicula pretium ac non neque. Nam tristique dui quis convallis lobortis. Mauris ut neque et risus egestas sodales ac et elit. Pellentesque ultricies mi ut diam convallis dapibus. Etiam erat nulla, iaculis nec rhoncus id, vehicula eget arcu. Integer malesuada lacus at nibh ullamcorper, ac congue quam ullamcorper. Vivamus mollis tempor ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut orci non ipsum vulputate interdum ut maximus velit.</p>
</div>
<!--Section 3-->
<!--Section 3: sub-section 1-->
<div id="section_3-1" class="container-fluid bg-success" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 3: Sub-section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet gravida orci, a efficitur turpis. Donec quis lacus quis tellus consequat aliquam. Sed odio justo, posuere a molestie nec, tincidunt et urna. Integer euismod condimentum aliquam. Etiam eu velit nibh. Aliquam vel odio nibh. Morbi tincidunt nec tortor a varius. Phasellus pretium convallis mauris lacinia tincidunt. Praesent in magna eget diam porttitor molestie. Maecenas vulputate blandit tempus. Mauris non augue neque. Nullam consectetur a risus vitae rhoncus. Vestibulum sit amet ipsum fermentum dolor pulvinar fermentum.</p>
</div>
<!--Section 3: sub-section 2-->
<div id="section_3-2" class="container-fluid bg-info" style="padding-top:75px;padding-bottom:75px;font-size:3vw;">
<h1>Section 3: Sub-section 2</h1>
<p>Morbi nulla turpis, convallis vel sapien eu, dapibus ornare sapien. Cras leo quam, rutrum a magna ac, auctor elementum orci. Nunc consectetur pharetra sapien in scelerisque. Aliquam a ullamcorper arcu, a laoreet sem. Quisque ultrices mauris ut metus vehicula pretium ac non neque. Nam tristique dui quis convallis lobortis. Mauris ut neque et risus egestas sodales ac et elit. Pellentesque ultricies mi ut diam convallis dapibus. Etiam erat nulla, iaculis nec rhoncus id, vehicula eget arcu. Integer malesuada lacus at nibh ullamcorper, ac congue quam ullamcorper. Vivamus mollis tempor ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut orci non ipsum vulputate interdum ut maximus velit.</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Important:
Don’t forget to add position: relative for the body and position: fixed for the ul.nav-pills in your CSS.
Note: To visit a specific section, you can either scroll or just simply click on the link of the relevant section on the navigation bar.
Frequently Asked Questions
In this section, we are going to look at some of the FAQs regarding Toast and Scrollspy.
Q #1) What is a Bootstrap toast?
Answer: It is similar to an alert box that appears for a short time.
Q #2) How to show a toast?
Answer: You can use a button to show a toast.
Q #3) What is Bootstrap Scrollspy?
Answer: It is a navigation mechanism that highlights the links in a navigation list based on the scroll position.
Q #4) How can we create a scrollspy?
Answer: You can create a scrollspy using navigation or list group components.
Q #5) What is the use of the data-spy=”scroll” attribute?
Answer: The data-spy=”scroll” attribute is used to create the scrollable area of the scrollspy.
Q #6) What are the toast components?
Answer: The toast components are the toast header and the body.
Conclusion
Bootstrap 4 provides various styling options for Toasts and Scrollspy.
Toast is similar to an alert box that appears for a short time. Scrollspy is used to automatically highlight the links in a navigation list based on the scroll position.
=> Check Out The Perfect Bootstrap Training Guide Here