This chapter will discuss about adding custom Bootstrap tooltips. Tooltip is typically displayed as a small, floating box that appears when the user hovers over or clicks on a specific UI element, such as a button, icon, or hyperlink.
Tooltips are used to provide context, explanations, or instructions for users who may need more information about the purpose or functionality of a UI element.
Things to remember while using the tooltip plug-in:
As tooltips depend on Popper, a third party library, for positioning, you must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js, which contains Popper for tooltips to work.
You must initialize the tooltips first, as tooltips are opt-in for performance reasons.
A tooltip will never be shown for a zero-length title value.
Triggering tooltips will not work on hidden elements.
Tooltips for .disabled or disabled elements must be triggered using a wrapper element.
To avoid getting tooltips centered, use white-space: nowrap; on the <a> element.
Before removing any element from the DOM, you must hide the tooltips corresponding to them.
Inside a shadow DOM, tooltips can be triggered thanks to an element.
Enable Tooltips
Initialize all the tooltips on a page, by their data-bs-toggle attribute
Tooltips can be added to links as well using the attribute data-bs-toggle. Let's see an example:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_link.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltip</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Tooltip on link</h4><p class="muted">The <a href="#" data-bs-toggle="tooltip" data-bs-title="Sample Tooltip">tooltip</a> is used for displaying some extra information about any content. This can be added to a <a href="#" data-bs-toggle="tooltip" data-bs-title="Second tooltip">link</a>.</p><script>
Feel free to use either title or data-bs-title in your HTML. When title is used, Popper will replace it automatically with data-bs-title when the element is rendered.
Custom tooltips
Bootstrap provides a custom class data-bs-custom-class="custom tooltip" to customize the tooltip. Let's see an example:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_custom_tooltip.php
Example
You can edit and try running this code using the Edit & Run option.
data-bs-toggle="tooltip" data-bs-placement="right"
data-bs-custom-class="custom-tooltip"
data-bs-title="Tooltip is created as custom tooltip.">
Custom tooltip
There are four options available for the positioning of the tooltip: left, right, top and bottom aligned.
By default, the tooltip will appear on top of the element.
The data-bs-placement attribute is used to set the position of the tooltip.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_position.php
Example
You can edit and try running this code using the Edit & Run option.
Tooltip with HTML
</button><script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script></body></html></pre>
Markup
For a tooltip on any HTML element, the required markup for the tooltip is only a data attribute and title.
The markup of a tooltip that is generated is simple and is set to top, be default.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_markup.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Tooltips</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Bootstrap tooltip markup</h4><!-- HTML to write --><a href="#" data-bs-toggle="tooltip" title="Markup for a tooltip!">Hover over me for markup</a><!-- Generated markup by the plugin --><div class="tooltip bs-tooltip-top" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">
Markup for a tooltip
</div></div><script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script></body></html></pre>
Tooltip on disabled elements
The users can not focus, hover or click on the elements with disabled attribute, to trigger a tooltip. Thus, in order to trigger a tooltip, use the wrapper <div> or <span>.
Use tabindex="0" to make it keyboard-focusable.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_tooltip_disabled.php
Example
Here is an example of tooltip on disabled element:
You can edit and try running this code using the Edit & Run option.
An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary="{value}".
When passing the options via data attributes, make sure to change the case type to "kebab-case" from "camelCase", such as use data-bs-fallback-placements="[array]" instead of data-bs-fallbackPlacements="[array]".
By default, its 'clippingParents' and can accept an HTML Element reference (via JavaScript only).
container
string, element, false
false
Appends the tooltip to a specific element.
customClass
string, function
''
These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
delay
number, object
0
Delay showing and hiding the tooltip (ms). Object structure is: delay: { "show": 500, "hide": 100 }.
fallbackPlacements
array
['top', 'right', 'bottom', 'left']
Define fallback placements by providing a list of placements in array.
html
boolean
false
Allow HTML in the tooltip.
offset
array, string, function
[0, 0]
Offset of the tooltip relative to its target. Ex: data-bs-offset="10,20".
placement
string, function
'top'
Decides the position of the tooltip.
popperConfig
null, object, function
null
To change Bootstraps default Popper config.
sanitize
boolean
true
Enable or disable the sanitization.
sanitizeFn
null, function
null
You can supply your own sanitize function.
selector
string, false
false
With a selector, tooltip objects will be delegated to the specified targets.
template
string
''
While creating a tooltip, use the base HTML.
title
string, element, function
''
It refers to the title of the tooltip.
trigger
string
'hover-focus'
Shows how the tooltip is triggered: click, hover, focus, manual.
This chapter discusses about the component toasts. Toasts are like alert messages, that are lightweight and customizable. Toasts are a useful tool for providing responsive and unobtrusive notifications to the user.
Toasts in Bootstrap are used to display non-blocking notifications at the bottom or top of the screen.
They can provide feedback or alert the user to certain events or actions, without interrupting their current task.
Toasts can contain text, images, or any other HTML content, and can be customized to fit the design of the website or application.
They can also be dismissed by the user or have a set duration before disappearing on their own.
You must initialize the toasts yourself, as they are opt-in for performance reasons.
If you do not specify autohide: false, toasts will automatically hide.
The animation effect of the toast component is dependent on the prefers-reduced-motion media query.
A header and a body is recommended to be added to a toast to make it more extensible and predictable.
You require a single element to contain your toast and must have a dismiss button.
Basic toast
In order to create a basic toast, you need to use the .toast class and add a .toast-header to provide a heading and a .toast-body to add the content.
Let us see an example of a basic toast:https://www.tutorialspoint.com/bootstrap/examples/toast_basic.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h3>Toast Example</h3><p>A toast is like an alert box that is shown.</p><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><small>A toast without an event</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Toast is shown without any event like on a click of a button.
</div></div></div></body></html></pre>
In the past, the .hide class was added automatically to completely hide a toast with display:none instead of using opacity:0. Now, this is no longer needed.
The following JavaScript query is used to trigger a toast:
This is toast 1 and is placed at the top of the page.
</div></div><!-- Second Toast --><div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Toast 2</strong><small class="text-body-secondary">Second toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body text-bg-info">
This is toast 2 and is placed below toast 1.
</div></div></div><script>
The toasts can be customized by removing the sub-components, adding some utilities or even for that matter, your own markup.
You can add a custom icon from Bootstrap icons or remove the .toast-header, add buttons to the content, etc.
Let us see an example for the customization of a toast, where two buttons are added to the toast body:https://www.tutorialspoint.com/bootstrap/examples/toast_custom_content.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Customization of toasts</h4><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">View customized toast</button><div class="toast-container"><div class="toast"><div class="toast-header bg-secondary-subtle"><strong>Thanks</strong></div><div class="toast-body text-bg-secondary">Buttons are added to the toast.</div><button type="button" class="btn btn-success btn-sm">Submit</button><button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast" aria-label="Close">Cancel</button></div></div><script>
Different toast color schemes can be created using the colors and background utilities.
Let us see an example of adding the color scheme to a toast:https://www.tutorialspoint.com/bootstrap/examples/toast_color_scheme.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Color scheme</h4><p>Color scheme added to the toast</p><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">Click for toast</button><div class="toast-container"><div class="toast"><div class="toast-header bg-warning-subtle"><strong>Toast Header</strong></div><div class="toast-body text-bg-success">Color scheme is added to the header and body of the toast.</div></div></div><script>
The toast placement feature is used to set the position of the toast on the webpage. Following are the options available for placement of toasts:
.position-absolute - It is used to position the element relative to its closest positioned ancestor.
.top-* - sets the position of the top alignment of the toast.
.bottom-* - sets the position of the bottom alignment of the toast.
.start-* - sets the position of the start alignment of the toast.
.end-* - sets the position of the end alignment of the toast.
The values taken by the placement classes range from 0 to 50.
Let us see an example of the placement classes:https://www.tutorialspoint.com/bootstrap/examples/toast_placement.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Placement - Toasts</h4><p>Set the position of the toasts on webpage</p><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">Click for toast</button><!--Top left --><div class="toast-container top-0 start-0"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 1</strong><small class="text-body-secondary">Toast top left </small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at Top left.
</div></div></div><!--Top center--><div class="toast-container top-0 start-50 translate-middle-x"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 2</strong><small class="text-body-secondary">Toast at top center</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at Top Center.
</div></div></div><!--Top right --><div class="toast-container top-0 end-0"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 3</strong><small class="text-body-secondary">Toast at top right</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at Top Right.
</div></div></div><!--Middle left--><div class="toast-container top-50 start-0 translate-middle-y"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 4</strong><small class="text-body-secondary">Toast at middle left</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at middle left.
</div></div></div><!--Middle left--><div class="toast-container top-50 start-50 translate-middle"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 5</strong><small class="text-body-secondary">Toast at middle center</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at middle center.
</div></div></div><!--Middle right--><div class="toast-container top-50 end-0 translate-middle-y"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 6</strong><small class="text-body-secondary">Toast at middle right</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at middle right.
</div></div></div><!--Bottom left--><div class="toast-container bottom-0 start-0"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 7</strong><small class="text-body-secondary">Toast at bottom left</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at bottom left.
</div></div></div><!--Bottom center--><div class="toast-container bottom-0 start-50 translate-middle-x"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 8</strong><small class="text-body-secondary">Toast at bottom center</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at bottom center.
</div></div></div><!--Bottom right--><div class="toast-container bottom-0 end-0"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 9</strong><small class="text-body-secondary">Toast at bottom right</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Position at bottom right.
</div></div></div><script>
$(document).ready(function() {
$('#myBtn').click(function() {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</script></body></html></pre>
When working with systems that generate many notifications, one after the other, you can use a wrapping element to stack these notifications. Refer the example given below:https://www.tutorialspoint.com/bootstrap/examples/toast_wrapping.php
Example
You can edit and try running this code using the Edit & Run option.
Toast at the top of the container.
</div></div><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Toast 2</strong><small class="text-body-secondary">Second toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Second toast in the stack.
</div></div><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Toast 3</strong><small class="text-body-secondary">Third toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Another toast in the stack.
</div></div><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Toast 4</strong><small class="text-body-secondary">Last toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Fourth toast at the bottom of the stack.
</div></div></div></div></body></html></pre>
In order to align toasts horizontally and/or vertically, use the flexbox utilties. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_with_flexbox.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts d-flex"><!-- Adding a flexbox container for alignment of the toasts --><div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100"><!-- Then put toasts within the flexbox container--><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header bg-danger-subtle"><strong class="me-auto">Toast within flexbox</strong><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
This is a toast that is placed within a flexbox container and justified center.
</div></div></div></body></html></pre>
Accessibility
In order to make the toasts accessible to the users with screen readers and / or similar assistive technologies, you should wrap the toasts in an aria-live region.
Changes to the live regions are automatically identified by the screen readers, without setting the user's focus.
Ensure that the complete toast is identified as a single (atomic) unit, by including aria-atomic="true".
When the information shown to the user is important, use the alert components rather than toasts.
The live region should be present in the markup before the toast is generated or updated.
Depending on the content, you need to adapt the role and aria-live attributes; such as:
In case of error, use:role="alert" aria-live="assertive"
Otherwise, use:role="status" aria-live="polite"
You must update the delay timeout in order to let the user read the toast, as the content being displayed changes dynamically.
A close button must be added to the toast, to allow users to close the toast, when using autohide: false.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/toast_accessibility.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Toasts</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script></head><body class=" container mx-auto mt-2"><h4>Accessibility - Toasts</h4><p>Make the toasts accessible according to the value of role and aria-live</p><!-- Button to trigger the toasts --><button type="button" class="btn btn-primary" id="myBtn">Click for toast</button><div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 1</strong><small class="text-body-secondary">First toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
A toast that is like an alert.
</div></div></div><div role="status" aria-live="polite" aria-atomic="true" class="toast" data-bs-autohide="false"><div class="toast"><div class="toast-header"><strong class="me-auto">Toast 2</strong><small class="text-body-secondary">Second toast</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button></div><div class="toast-body">
Toast where role=status and aria-live=polite.
</div></div></div><script>
$(document).ready(function() {
$('#myBtn').click(function() {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</script></body></html></pre>
This chapter will discuss about Bootstrap spinners. Bootstrap spinner display the loading state of projects using .spinner class.
How it works
Bootstrap spinners show the loading state of a project, using HTML and CSS. JavaScript is not required to build them.
Custom JavaScript is needed to toggle their visibility. Appearance, alignment, and sizing can be easily customized with Bootstrap’s utility classes.
Each loader has role=”status” and a nested <span class=”visually-hidden”>Loading… </span > for accessibility.
Border spinner
Use .spinner-border class to create lightweight spinner/loading indicator.https://www.tutorialspoint.com/bootstrap/examples/spinners_border_spinners.php
Example
You can edit and try running this code using Edit & Run option.
Border spinner uses currentColor for its border-color, which is customizable with text color utilities. Use text color utilities on a standard spinner.https://www.tutorialspoint.com/bootstrap/examples/spinners_color_spinners.php
Example
You can edit and try running this code using Edit & Run option.
This spinner uses currentColor to change its appearance with text color utilities.https://www.tutorialspoint.com/bootstrap/examples/spinners_growing_colors_spinners.php
Example
You can edit and try running this code using Edit & Run option.
To modify the dimensions as required, use custom CSS or inline styles.https://www.tutorialspoint.com/bootstrap/examples/spinners_using_custom_sizes.php
Example
You can edit and try running this code using Edit & Run option.
This chapter will discuss about Bootstrap scrollspy. Bootstrap scrollspy automatically targets the navigation bar contents as you scroll the page.
How it work
When the element with the id referred by the anchor’s href is scrolled into view, scrollspy works with nav, list group, and also works with any anchor element in the current page. Here’s how it’s works.
In order to utilize scrollspy, you should have two thing i.e a navigation, list group or a simple set of links, along with scrollable container such as the <body> or a custom element with a specific height and overflow-y: scroll.
To the scrollspy container, add attributes data-bs-spy=”scroll” and data-bs-target=”#navId”, where “navId” refers the unique id of the corresponding navigation. If the container does not have any focusable element, include tabindex=”0″ to guarantee keyboard accessibility.
When you scroll within the “spied” container, anchor links in the navigation will have an .active class added or removed. If the id targets of links cannot be resolved, they will be ignored. For example, a <a href=”#home”>home</a> should have a corresponding <div id=”home”></div>.
In the non-visible elements section, only visible elements will be considered and targeted.
Navbar
Scroll below the navbar area to see active class change. Open the dropdown and see highlighted items.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_navbar.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><nav id="navbarFirstExample" class="navbar bg-body-tertiary px-3 mb-3"><a class="navbar-brand" href="#">Tutorialspoints</a><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link" href="#scrollspyFirstTitle">Home</a></li><li class="nav-item"><a class="nav-link" href="#scrollspySecondTitle">Services</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyThirdTitle">About us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFourthTitle">Contact us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFifthTitle">Features</a></li></ul></nav><div data-bs-spy="scroll" data-bs-target="#navbarFirstExample" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0"><h4 id="scrollspyFirstTitle">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspySecondTitle">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyThirdTitle">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspyFourthTitle">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyFifthTitle">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></body></html>
Nested nav
Scrollspy supports nested .navs and makes their parents .active when they are .active. See active class changes while scrolling the navbar.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_nested_navbar.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row mt-2"><div class="col-4"><nav id="nestatedNavbar" class="h-100 flex-column align-items-stretch pe-4 border-end"><nav class="nav nav-pills flex-column"><a class="nav-link" href="#home">Home</a><nav class="nav nav-pills flex-column"><a class="nav-link ms-3 my-1" href="#login">Log in</a><a class="nav-link ms-3 my-1" href="#logout">Log out</a></nav><a class="nav-link" href="#aboutus">About us</a><a class="nav-link" href="#contactus">Contact Us</a></nav></nav></div><div class="col-8"><div data-bs-spy="scroll" data-bs-target="#nestatedNavbar" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><div id="home"><h4>Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div><div id="login"><h5>Log In</h5><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p></div><div id="logout"><h5>Log out</h5><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div><div id="aboutus"><h4>About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group</p></div><div id="contactus"><h4>Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></div></div></div></body></html>
List group
Scrollspy supports .list-groups. See the active class change as you scroll near the list group.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_list_group.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row mt-2"><div class="col-4"><div id="navbarList" class="list-group my-2"><a class="list-group-item list-group-item-action" href="#home">Home</a><a class="list-group-item list-group-item-action" href="#services">Services</a><a class="list-group-item list-group-item-action" href="#aboutus">About us</a><a class="list-group-item list-group-item-action" href="#contactus">Contact us</a><a class="list-group-item list-group-item-action" href="#features">Features</a></div></div><div class="col-8"><div data-bs-spy="scroll" data-bs-target="#navbarList" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><h4 id="home">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p><h4 id="services">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="aboutus">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area.</p><h4 id="contactus">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="features">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. </p></div></div></div></div></body></html>
Simple anchors
Scrollspy works on all <a> anchor elements, not restricted to nav elements and list groups.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_simple_anchor.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="row"><div class="col-4"><div id="listUsingAnchor" class="text-center"><nav class="nav nav-pills flex-column mx-3"><a class="nav-link active" href="#home">Home</a><a class="nav-link" href="#services">Services</a><a class="nav-link" href="#aboutus">About us</a><a class="nav-link" href="#contactus">Contact us</a><a class="nav-link" href="#features">Features</a></nav></div></div><div class="col-8"><div data-bs-spy="scroll" data-bs-target="#listUsingAnchor" data-bs-offset="0" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><h4 id="home">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="services">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="aboutus">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="contactus">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="features">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p></div></div></div></body></html>
Non-visible elements
Non-visible elements will be disregarded, and their corresponding nav items will not be assigned the .active class. Scrollspy instances that are initialized within an non-visible wrapper ignores all target elements. Use refresh method in case the wrapper becomes visible. This helps check for observable elements .
Add data-bs-spy=”scroll” to the element to spy on (usually the <body>) to quickly add scroll spy behavior to topbar navigation. Then, specifying the id or class name of the parent element of any Bootstrap .nav component using the “data-bs-target” attribute.https://www.tutorialspoint.com/bootstrap/examples/scrollspy_via_data_attribute.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body data-bs-spy="scroll" data-bs-target="#navbarDataAttribute"><div id="navbarDataAttribute" class="my-2"><ul class="nav nav-pills" role="pillslist"><li class="nav-item"><a class="nav-link" href="#scrollspyFirstTitle">Home</a></li><li class="nav-item"><a class="nav-link" href="#scrollspySecondTitle">Services</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyThirdTitle">About us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFourthTitle">Contact us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFifthTitle">Features</a></li></ul><div data-bs-spy="scroll" data-bs-target="#navbarDataAttribute" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="bg-body-tertiary p-3 rounded-2 my-2" tabindex="0"><h4 id="scrollspyFirstTitle">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspySecondTitle">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyThirdTitle">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyFourthTitle">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspyFifthTitle">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></div></body></html>
Via JavaScript
To enable scrollspy behavior on your topbar navigation, add data-bs-spy=”scroll” to the desired element (usually the <body> tag).
Inside the <script> tag apply scroll spy to a component using the identifier or class like “navbarJavaScript”.
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Scrollspy</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body data-bs-spy="scroll" data-bs-target="#navbarJavaScript"><div id="navbarJavaScript"><ul class="nav nav-pills" role="pillslist"><li class="nav-item"><a class="nav-link" href="#scrollspyFirstTitle">Home</a></li><li class="nav-item"><a class="nav-link" href="#scrollspySecondTitle">Services</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyThirdTitle">About us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFourthTitle">Contact us</a></li><li class="nav-item"><a class="nav-link" href="#scrollspyFifthTitle">Features</a></li></ul><div data-bs-spy="scroll" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0"><h4 id="scrollspyFirstTitle">Home</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspySecondTitle">Services</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyThirdTitle">About us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p><h4 id="scrollspyFourthTitle">Contact us</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group. Scrollspy works with nav and list group.</p><h4 id="scrollspyFifthTitle">Features</h4><p>Bootstrap Scrollspy targets the navigation bar contents automatically on scrolling the area. Scrollspy works with nav and list group.</p></div></div><script>
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbarJavaScript'
})
</script></body></html></pre>
Otpions
Options can be provided through data attributes or JavaScript
To add an option name to data-bs-, as in data-bs-animation={value}," use either data attributes or JavaScript. If using data attributes, use "kebab-case" instead of "camelCase" for the option name. For example, use data-bs-custom-class="beautifier" instead of data-bs-custom-class="beautifier".
Bootstrap 5.2.0 has added a new feature called data-bs-config attribute to store basic component configurations as a JSON string. If an element has both data-bs-config and separate data attributes, the separate data attributes' values take precedence over those in data-bs-config. Even, existing data attributes can also store JSON values.
Data-bs-config, data-bs-, and js objects are combined to create the final configuration object, where the most recent key-value overrides all others.
CSS Properties
The table describes the properties and their corresponding values for a ScrollSpy plugin.
Name
Type
Default
Description
rootMargin
string
0px 0px -25%
Intersection Observer rootMargin valid units, when calculating scroll position.
smoothScroll
boolean
false
Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables.
target
string, DOM element
null
Specifies element to apply Scrollspy plugin.
threshold
array
[0.1, 0.5, 1]
IntersectionObserverthreshold valid input, when calculating scroll position.
This chapter discusses about Bootstrap progress bars. Progress bars in Bootstrap are UI components that display the progress or completion status of a task or process. They are typically used to visually indicate the progress of an operation, such as file uploads, form submissions, or loading of data.
Bootstrap provides a set of in-built classes to create progress bars with different styles, sizes and animations. Bootstrap also provides additional classes and options for customizing the appearance and behavior of progress bars, such as setting different colors, adding labels, using striped or animated progress bars, and stacking multiple progress bars together.
Use the .progress as a wrapper to show the max value of the progress bar.
Use the inner .progress-bar to show the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
The .progress-bar also requires some role and aria attributes to make it accessible.
The .progress-stacked can be used to create multiple/stacked progress bars.
Basic Progress Bar
Here’s an example of a basic Bootstrap progress bar:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_create.php
Example
You can edit and try running this code using the Edit & Run option.
Bootstrap provides a complete list of utilities for setting width. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_sizing.php
Example
You can edit and try running this code using the Edit & Run option.
By default the height of a progress bar is 1rem, but it can be changed using the CSS height property. You must set the same height for the progress container and the progress bar.
Height value can be set only on the .progress, so once the value of height is changed in the .progress container, the inner .progress-bar automatically resizes.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_height.php
Example
You can edit and try running this code using the Edit & Run option.
Labels can be added to the progress bars by placing text within the .progress-bar.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_labels.php
Example
You can edit and try running this code using the Edit & Run option.
In order to avoid the content getting bleed out of the bar, the content inside the .progress-bar is controlled with overflow: hidden
Use overflow: visible from overflow utilities to make the content capped and become readable. This is useful when the progress bar is shorter than the label.
Define an explicit text color to make the text readable.
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Progress</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Progress Bar Long Label</h4><br><div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar overflow-visible text-dark" style="width: 20%">Overflow visible on progress bar, but the label is too long, but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long,but the label is too long</div></div><br><div class="progress" role="progressbar" aria-label="Example of label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar overflow-hidden text-dark" style="width: 20%">Overflow hidden on progress bar, but the label is too long, but the label is too long,but the label is too long,;/div>
</div></body></html></pre>
Background
The appearance of individual progress bar can be changed using the background utility classes.
The progress bar is blue by default (primary).https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_background.php
Example
You can edit and try running this code using the Edit & Run option.
Accessibility tip: Use of color to the progress bars just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.
Use alternative means to add clarity to the content using the .visually-hidden class.
In order to make the labels readable on a colored background, choose appropriate text colors.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_textcolor.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Progress</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Progress Bar - Text Color</h4><br></div><div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-success" style="width: 25%">Default text color</div></div><br><div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-info text-dark" style="width: 50%">Dark text on Info</div></div><br><div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-warning text-dark" style="width: 75%">Dark text on warning</div></div><br><div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-danger" style="width: 100%">Light text on danger</div></div></body></html>
You can also use the new combined helper classes for text and background color i.e. Color and background.https://www.tutorialspoint.com/bootstrap/examples/progress_color_background.php
Example
You can edit and try running this code using the Edit & Run option.
A progress bar can have multiple progress bars stacked in it. Use the Bootstrap class .progress-stacked to create multiple bars.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_multiple.php
Example
You can edit and try running this code using the Edit & Run option.
Stripes can be added to a progress bar using .progress-bar-striped class to any .progress-bar.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_striped.php
Example
You can edit and try running this code using the Edit & Run option.
Animation can be added to a progress bar, where the stripes get animated right to left via CSS3 animations. Add.progress-bar-animated class to .progress-bar.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_progress_animated.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter will discuss about popovers in Bootstrap. A popover typically contains additional information, context, or actions related to the triggering element.
The popover may contain text, images, links, buttons, or other content, depending on its purpose and context. Bootstrap provides built-in popover components that can be easily integrated into web applications.
Things to remember while using the popover plug-in:
As popovers depend on Popper.js, a third party library, for positioning, you must include popper.min.js before bootstrap.js.
As a dependency, the popovers require the popover plugin.
You must initialize the popovers first, as popovers are opt-in for performance reasons.
A popover will never be shown for a zero-length title and content values.
Triggering popovers will not work on hidden elements.
Popovers for .disabled or disabled elements must be triggered using a wrapper element.
To avoid getting popovers centered between the anchors’ overall width, use white-space: nowrap; on the <a>
Before removing any element from the DOM, you must hide the popovers corresponding to them.
Enable Popovers
Initialize all the popovers on a page, by their data-bs-toggle attribute
data-bs-toggle="popover" data-bs-placement="top"
data-bs-title="Popover"
data-bs-content="It is a new popover.">
Click to view popover
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Positioning of a Popover
There are four options available for the positioning of the popover: left, right, top and bottom aligned.
By default, the popover will appear on the right of the element.
The data-bs-placement attribute is used to set the position of the popover.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_position.php
Example
Let's see an example of setting the position of a popover:
You can edit and try running this code using the Edit & Run option.
Popover on top
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
Popover on right
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
Popover on bottom
</button><button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
Popover on left
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Custom popovers
The appearance of popovers can be customized using a custom class data-bs-custom-class="custom-popover".https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_custom.php
Example
Let's see an example of creating a custom popover:
You can edit and try running this code using the Edit & Run option.
data-bs-toggle="popover" data-bs-placement="top"
data-bs-custom-class="custom-popover"
data-bs-title="Custom popover"
data-bs-content="It is a custom popover.">
Custom popover
</button><script>
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script></body></html></pre>
Dismissible Popover
The popover gets closed when the same element is clicked again, by default. However, the attribute data-bs-trigger="focus" can be used, which will close the popover when clicking outside the element.
For the popover to be dismissed on the next click, it is necessary to use specific HTML code that ensures consistent behavior across different browsers and platforms
When the mouse pointer is moved over an element and you want a popover to appear on hovering, use the data-bs-trigger="hover" attribute.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_hover.php
Example
Let's see an example of a hovering popover:
You can edit and try running this code using the Edit & Run option.
For popovers on disabled elements, you may prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.https://www.tutorialspoint.com/bootstrap/examples/bootstrap_popover_disabled.php
Example
Let's see an example of a popover on disabled element:
You can edit and try running this code using the Edit & Run option.
An option name can be appended to the class data-bs- and that option can be passed as an attribute, such as data-bs-boundary="{value}".
When passing the options via data attributes, make sure to change the case type to "kebab-case" from "camelCase", such as use data-bs-fallback-placements="[array]" instead of data-bs-fallbackPlacements="[array]".
By default, its 'clippingParents' and can accept an HTML Element reference (via JavaScript only).
container
string, element, false
false
Appends the popover to a specific element.
customClass
string, function
''
These classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: 'class-1 class-2'.
delay
number, object
0
Delay showing and hiding the popover(ms). Object structure is: delay: { "show": 500, "hide": 100 }.
fallbackPlacements
array
['top', 'right', 'bottom', 'left']
Define fallback placements by providing a list of placements in array.
html
boolean
false
Allow HTML in the popover.
offset
array, string, function
[0, 0]
Offset of the popover relative to its target. Ex: data-bs-offset="10,20".
placement
string, function
'top'
Decides the position of the popover.
popperConfig
null, object, function
null
To change Bootstraps default Popper config.
sanitize
boolean
true
Enable or disable the sanitization.
sanitizeFn
null, function
null
You can supply your own sanitize function.
selector
string, false
false
With a selector, popover objects will be delegated to the specified targets.
template
string
''
While creating a popover, use the base HTML.
title
string, element, function
''
It refers to the title of the popover.
trigger
string
'hover-focus'
Shows how the popover is triggered: click, hover, focus, manual.
This chapter discusses about placeholders. A placeholder refers to a temporary text or image that is displayed in an input field or container until the user enters some data or the actual content is loaded.
Placeholders are commonly used to provide hints or examples of the expected input format. They are used for the enhancement and customization of the application.
Some key points to remember:
Placeholders are only displayed when the input field or container is empty.
The placeholders provide visual cues and improve the user experience.
How it works
Placeholders can be created using the class .placeholder and a grid column, such as .col-6 to set the width of the placeholder.
Once some content is been added to the textarea, the placeholder disappears and is replaced by the entered data.
Additional styling can be applied to the .btns via ::before, such that the height is respected.
The same pattern can be extended in other cases as well, or you can add within an element to show the height, when actual text is added.
Create placeholders
Here’s an example of how to create placeholders:https://www.tutorialspoint.com/bootstrap/examples/placeholders_create.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Placeholders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h4>Placeholders example</h4><div class="card"><img src="/bootstrap/images/template.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card without placeholders</h5><p class="card-text">An example showing a card without the placeholders.</p><a href="#" class="btn btn-primary">Go</a></div></div><div class="card" aria-hidden="true"><img src="/bootstrap/images/template.jpg" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">
In order to make the placeholder hidden from the screen readers, use aria-hidden="true". Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/placeholders_create_hidden.php
Example
You can edit and try running this code using the Edit & Run option.
Width of the placeholders can be modified through grid column classes, such as col-6, utilities such as w-50, or inline styles such as style="width: 75%;".
Let us see the example for modifying the width of the placeholders:https://www.tutorialspoint.com/bootstrap/examples/placeholders_width.php
Example
You can edit and try running this code using the Edit & Run option.
Sizing of placeholders can be customized using the modifiers, such as .placeholder-lg, .placeholder-sm, or .placeholder-xs, as the the size of the placeholders depend on the style of the parent element.
Let us see an example of sizing of placeholders:https://www.tutorialspoint.com/bootstrap/examples/placeholders_sizing.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter will discuss about the pagination. Pagination is a component that allows you to display a list of items across multiple pages. It provides a simple way to navigate through a large set of data by splitting it into smaller, more manageable chunks. In order to identify it as a navigation section to screen readers and other assistive technologies, use the wrapping <nav> element.
There could be more than one navigation section on pages, so it is advised to provide a descriptive aria-label for the <nav> element, so that the right purpose is served.
Like, if the pagination component is used by an online store selling shoes for navigating between a set of products (shoes) available, an appropriate label could be aria-label=”Search shoes”.
Simple Pagination
In order to create a basic pagination, add the .pagination class to an <ul> element. To each <li> element add the .page-item and a .page-link class to the link inside it.https://www.tutorialspoint.com/bootstrap/examples/simple_pagination.php
Example
You can edit and try running this code using the Edit & Run option.
Let’s look at how to insert a symbol or icon in place of some pagination link text. For screen readers to operate effectively, users must use correct aria attributes.https://www.tutorialspoint.com/bootstrap/examples/pagination_with_icons.php
Example
You can edit and try running this code using the Edit & Run option.
Pagination links can be modified based on the circumstances. For links that don’t appear to be clickable, use .disabled class, and use .active class to show the current page that is now being viewed.
Users can use .disabled class for un-clickable links
The alignment options can be used to control the positioning of pagination components on a web page.
Horizontally left alignment is the default for pagination. As demonstrated below, add the class .justify-content-center to the .pagination base class to centre it on the page.https://www.tutorialspoint.com/bootstrap/examples/pagination_alignment_to_center.php
Example
You can edit and try running this code using the Edit & Run option.
Refer the various classes provided under flex utilities to set the alignment of the pagination component. Alignment can be set as left, center, right, and many more using flexbox utilities.https://www.tutorialspoint.com/bootstrap/examples/pagination_alignment_using_flex.php
Example
You can edit and try running this code using the Edit & Run option.
This chapter discusses about the component offcanvas. The offcanvas component in Bootstrap is a feature that allows you to create a sliding panel or sidebar that can be revealed or hidden on the side of the viewport.
It is typically used for creating navigation menus, content panels, or additional information that can be temporarily displayed without taking up the full screen space.
Overview
Listed below are key features of Bootstrap offcanvas component:
Activation: The offcanvas component is typically activated by a toggle button or a link that triggers the opening and closing of the offcanvas panel. This can be achieved using JavaScript or data attributes.
Placement: The offcanvas panel can be positioned on the left, right, top or bottom of the viewport, based on your design requirements.
Content: You can place any HTML content inside the offcanvas panel, including navigation menus, text, images, forms, or other components.
Accessibility: Bootstrap ensures that the offcanvas component is accessible to screen readers and keyboard navigation, making it compliant with accessibility standards.
Responsive behavior: The offcanvas component is responsive by default, adapting to different screen sizes. On smaller screens, it can be made full-screen or allow scrolling within the offcanvas panel.
Events: Bootstrap provides JavaScript events that can be used to customize the behavior of the offcanvas component, such as executing code when the panel opens or closes.
It simplifies the creation of sliding panels and helps improve the user experience on mobile devices, providing a clean and efficient way to present additional content or navigation options without cluttering the main screen.
Note: Only one offcanvas can be shown at a time, like modals.
Offcanvas components
The following components work together to create the offcanvas functionality in Bootstrap, allowing you to create sliding panels that reveal additional content or navigation options when triggered by a toggle button or link:
Toggle button or trigger element
Offcanvas panel container
Offcanvas panel
Offcanvas placement
Close button
Javascript and data attributes
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_create.php
Example
You can edit and try running this code using the Edit & Run option.
Open offcanvas
</button></div><div class="offcanvas offcanvas-end" id="offcanvas"><div class="offcanvas-header"><h5 class="offcanvas-title">
Offcanvas title
</h5><button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><p>This is an offcanvas component of Bootstrap, which is similar to a modal in functionality.</p></div></div></div></body></html></pre>
Live demo
An offcanvas component can be shown or hidden based on:
.offcanvas (default) - hides the content
.offcanvas.show - shows the content
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_live.php
Example
You can edit and try running this code using the Edit & Run option.
</button><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><div>
The Offcanvas component provides a convenient way to create responsive and mobile-friendly layouts. When triggered, the offcanvas panel slides into view from either the left or right side of the screen, depending on the placement chosen. It overlays the main content, pushing it aside, and provides a smooth transition effect.
</div></div></div></div><script>
//New instance of the collapse element is created
var offcanvasElement = document.getElementById("offcanvasExample");
var offcanvas = new bootstrap.Offcanvas(offcanvasElement);
When an offcanvas and its backdrop are visible, the scrolling of the <body> element is prohibited. To enable scrolling for the <body> element, you can utilize the data-bs-scroll attribute.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_body_scrolling.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel"><div class="offcanvas-header"><h1 id="offcanvasStartLabel">Offcanvas</h1><button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><hr><div class="offcanvas-body"><h5>Enable body Scrolling</h5><h5><p>Bootstrap provides features to scroll the page when offcanvas and the backdrop are visible.</p></h5></div></div><div class="container mt-3"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasStart">Offcanvas Scrolling Enable</button><center><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400"></center></div></body></html></pre>
Body scrolling and backdrop
You can enable <body> scrolling with visible backdrop.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_body_scrolling_backdrop.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Enable backdrop with scrolling</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><hr><div class="offcanvas-body"><h5><p>Bootstrap provides features to scroll the page and the backdrop are visible.</p></h5><img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200"></div></div><div class="container mt-3"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasStart">Enabled scrolling with backdrop</button><center><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"></center></div></body></html></pre>
Static backdrop
The offcanvas component will not close on clicking out of it, when the backdrop is set to static.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_static.php
Example
You can edit and try running this code using the Edit & Run option.
</button><div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><div>
The offcanvas component will not get closed when you click outside it.
</div></div></div><center><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"><h3>Example for body scrolling in offcanvas component</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><h4>
A website for all the tech-savvy people.
</h4><h3>
Welcome to tutorials point
Welcome to tutorials point
</h3><img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400"></center></div></body></html></pre>
Dark offcanvas
The use of dark variants for components has been deprecated in v5.3.0 due to the implementation of color modes. Rather than manually including the aforementioned classes, it is recommended to apply the data-bs-theme="dark" attribute to either the root element, a parent wrapper, or the component itself.
Responsive
Offcanvas classes that are responsive, conceal content beyond the viewport starting from a designated breakpoint and downwards. On the other hand, the content behaves normally above that breakpoint. For instance, with the .offcanvas-lg class, the content situated below the lg breakpoint is hidden in an offcanvas, whereas it is visible above that breakpoint.
Note:You need to resize your browser to see the responsive behavior of offcanvas.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_responsive.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="text-success text-start">Responsive offcanvas</h4><div class="container"><button class="btn btn-success d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Show offcanvas</button><div class="alert alert-warning d-none d-lg-block">Resize your screen / viewport to show the responsive offcanvas.</div><div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button></div><div class="offcanvas-body"><p class="mb-0">This content can be verified when the screen size is below the breakpoint lg (.offcanvas-lg).</p></div></div></div></div></body></html>
Classes for responsive offcanvas are accessible at every breakpoint.
.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl
Placement
You must add one of the modifier classes, to add a placement to the offcanvas component, as there is no default placement for it.
Following are the placement options available:
.offcanvas-start - It places offcanvas on the left of the viewport.
.offcanvas-end - It places offcanvas on the right of the viewport.
.offcanvas-top - It places offcanvas at the top of the viewport.
.offcanvas-bottom - It places offcanvas at the bottom of the viewport.
Let us see an example for placement - top::https://www.tutorialspoint.com/bootstrap/examples/offcanvas_placement_top.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="text-success text-start">Offcanvas placement - Top</h4><p>Resize the viewport size to see the offcanvas</p><div class="container"><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top offcanvas</button><div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel"><div class="offcanvas-header text-bg-primary"><h5 class="offcanvas-title" id="offcanvasTopLabel">Top offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-primary-subtle"><p>This is an example for an offcanvas whose placement is at the top of the viewport.</p></div></div></div></div></body></html>
Let us see an example for placement - right:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_placement_right.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4 class="text-success text-start">Offcanvas placement - Right</h4><div class="container"><button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right offcanvas</button><div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"><div class="offcanvas-header text-bg-success"><h5 class="offcanvas-title" id="offcanvasRightLabel">Right offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-success-subtle"><p>This is an example for an offcanvas whose placement is at the right of the viewport.</p></div></div></div></div></body></html>
Let us see an example for placement - bottom:https://www.tutorialspoint.com/bootstrap/examples/offcanvas_placement_bottom.php
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html><html><head><title>Bootstrap - Offcanvas</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h5 class="text-dark text-start">Offcanvas placement - Bottom</h5><p>Resize the viewport size to see the offcanvas</p><div class="container"><button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom offcanvas</button><div class="offcanvas offcanvas-bottom" data-bs-scroll="true" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel"><div class="offcanvas-header text-bg-danger"><h5 class="offcanvas-title" id="offcanvasBottomLabel">Bottom offcanvas</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body bg-danger-subtle"><p>This is an example for an offcanvas whose placement is at the bottom of the viewport.</p></div></div></div></div></body></html>
Accessibility
Make sure to include aria-labelledby="..." in .offcanvas, referring to the offcanvas title, since the offcanvas panel is similar to a modal dialog in concept. It's worth noting that you don't have to add role="dialog" as it is automatically added through JavaScript.
This chapter will discuss about Bootstrap navs and tabs. Create navigation menu using .nav class and tab navigation menu using .tab class.
Base nav
All types of Bootstrap’s navigation components are built with base class .nav (component build with flexbox). The nav components can be used to add a list of links to browse to other pages within the website.
The items can be added within the .nav-item class.
To add links within the item class use .nav-link class.
When item order is important, use <ul>s, <ol>, or create your own with <nav>. The nav links behave similar to the nav items because the .nav uses display: flex without extra markup.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_base_nav_link.php
Example
You can edit and try running this code using Edit & Run option.
Use modifiers and utilities to change the styles of the .navs component as seen the following sections:
Horizontal alignment
Use flexbox utilities to modify the horizontal alignment of navigation. Navs are left-aligned by default. Navs can be easily centered or right-aligned.
For center-alignment, use the CSS class .justify-content-center.
To achieve right-alignment, use the CSS class .justify-content-end.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_horizontal_alignment_right.php
Example
You can edit and try running this code using Edit & Run option.
Use the .flex-column utility, that changes the flex item direction, in order to stack the navigation items. Use responsive versions to stack them on various viewports (e.g., .flex-sm-column).https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_vertical.php
Example
You can edit and try running this code using Edit & Run option.
Add the .nav-tabs class to .nav to create a tab navigation menu. Use them to create tabbable regions using tab JavaScript plugin.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_tabs.php
Example
You can edit and try running this code using Edit & Run option.
Create a navigation pills menu by replacing .nav-tab to .nav-pills within .nav class.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_pills.php
Example
You can edit and try running this code using Edit & Run option.
Use .nav-fill to evenly fill available space withon .nav-items. The horizontal space is completely occupied, even when the width of each nav item varies.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify.php
Example
You can edit and try running this code using Edit & Run option.
With <nav>-based navigation, you can skip .nav-item and use .nav-link to style <a> elements.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify_link.php
Example
You can edit and try running this code using Edit & Run option.
Use .nav-justified for equal-width elements. This will fill the horizontal space with nav links, with each nav item having equal width, unlike the .nav-fill mentioned earlier.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify_justified.php
Example
You can edit and try running this code using Edit & Run option.
An example similar to the .nav-fill demonstration, but using a navigation based on the <nav> element.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fill_and_justify_justified_link.php
Example
You can edit and try running this code using Edit & Run option.
Use flexbox utilities, in case you require responsive nav variations.
These utilities provide more customization across all the various breakpoints. The navigation will be stacked at the lowest breakpoint and then switch to a horizontal layout that spans the entire width from the small breakpoint onwards.
For navigation bars using navs, add role=”navigation” to the parent container of the <ul> or wrap the entire navigation in a <nav> element. Don’t add the role to the <ul> to avoid it being announced as a list by assistive technologies.
Navigation bars styled as .nav-tabs should not have the attributes role=”tablist”, role=”tab” or role=”tabpanel”. This applies specifically to dynamic tabbed interfaces, as explained in the ARIA Authoring Practises Guide’s tabs pattern. Check out the JavaScript behavior section for a sample of dynamic tabbed interfaces.
The aria-current attribute is unnecessary on dynamic tabbed interfaces as the JavaScript already manages the selected state by using aria-selected=”true” on the active tab.
Using dropdowns
Dropdown menus can be added using HTML and the dropdowns JavaScript plugin.
Tabs with dropdowns
To create a tab with dropdown menu add .nav-tabs class to the <ul> element.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_tabs_with_dropdowns.php
Example
You can edit and try running this code using Edit & Run option.
Use navigational tabs and pills to generate tabbable panes of local content using the bootstrap.js file and tab JavaScript plugin.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_javascript_behaviour.php
Example
You can edit and try running this code using Edit & Run option.
This works with <ul>-based markup, or with any random “roll your own” markup.
To maintain the native role of <nav> as a navigation landmark, don’t add role=”tablist” directly to it. Instead, use an alternative element (such as a basic <div>) and enclose the <nav> within it.
For vertical tabs, it is recommended to include aria-orientation=”vertical” in the tab list container.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_vertical_tabs.php
Example
You can edit and try running this code using Edit & Run option.
Use role=”tablist”, role=”tab”, role=”tabpanel” and aria-attributes to show structure, function, and current state to assistive technology users.
Use <button> elements for tabs as a best practice. These controls cause dynamic changes, instead of taking the user to another page.
According to the ARIA Authoring Practises, only active tab gets keyboard focus. JavaScript sets tabindex = “-1” on inactive tab controls when initialized.
To improve keyboard navigation, it’s advisable to make tab panels focusable unless the first meaningful element inside them is already focusable. The JavaScript plugin doesn’t handle this, so you need to add tabindex=”0″ to your tab panels to make them focusable.
The JavaScript plugin for tabs doesn’t work well with tabbed interfaces that have dropdown menus due to usability and accessibility concerns. The dropdown menus hide the trigger element of the active tab, causing confusion for users.
Using data attributes
Activate tab or pill navigation by specifying data-bs-toggle=”tab” or data-bs-toggle=”pill” on an element with .nav-tabs or .nav-pills attributes.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_using_data_attribute.php
Example
You can edit and try running this code using Edit & Run option.
const triggerElement = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerElement).show() // Select tab by name
const triggerFirstTabElement = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabElement).show() // Select first tab
Fade effect
Use .fade to each .tab-pane to make the tabs fade in. The first tab pane must use .show to make the initial content visible.https://www.tutorialspoint.com/bootstrap/examples/navs_and_tabs_fade_effect.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Navs and Tabs</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><ul class="nav nav-pills bg-light" id="myTab" role="tablist"><li class="nav-item" role="presentation"><button class="nav-link active" id="tutTab" data-bs-toggle="tab" data-bs-target="#tut" type="button" role="tab" aria-controls="tutorialspoints" aria-selected="true">Tutorialspoints</button></li><li class="nav-item" role="presentation"><button class="nav-link" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">Home</button></li><li class="nav-item" role="presentation"><button class="nav-link" id="servicesTab" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="services" aria-selected="false">Services</button></li></ul><div class="tab-content bg-warning mt-2"><div class="tab-pane fade show active p-2" id="tut" role="tabpanel" aria-labelledby="tutTab" tabindex="0"><h4>Tutorialspoint</h4>Fade effect is used to fade the visible element.</div><div class="tab-pane fade p-2" id="home" role="tabpanel" aria-labelledby="homeTab" tabindex="0"><h4>Home</h4>Use .fade to each .tab-pane to make the tabs fade in.</div><div class="tab-pane fade p-2" id="services" role="tabpanel" aria-labelledby="servicesTab" tabindex="0"><h4>Services</h4>The first tab pane must use .show to make the initial content visible.</div></div></body></html>