Bootstrap 4 tutorial

Components (12): Scrollspy / Spinners / Toasts / Tooltips

Scrollspy

Scrollspy is a functional component which synchronizes the active item display of the indicator (navigation or list group ) components and the horizontal scroll position of the content.

How it works

Scrollspy watches the scrolling content and update the position indicator (navigation or list group) with JavaScript. Requirements are as follows.

How to use it

Example in navbar

Demo page

Example with nested nav

Demo page

Example with list-group

Demo page

Spinners

Spinners can be used to show the loading states in your projects.

Border spinner

Colors

Add .text-(primary|secondary|success|danger|warning|info|light|dark).

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark

Growing spinner

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark

Alignment

Margin

Use Spacing utility.

.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
Placement

Various utilities are available for locating spinners to appropriate positions.

Flex

Example using Align items and Auto margins

Loading...
Floats

Example using Float with Clearfix.

.float-left
.float-right
Text align
.text-left
.text-center
.text-right

Size

Add .spinner-(border|grow)-sm for smaller spinners.

div.spinner-border.spinner-border-sm
div.spinner-grow.spinner-grow-sm

You can also use custom CSS or inline styles to set any sizes you need.

style="width: 1rem; height: 1rem;"
style="width: 2rem; height: 2rem;"
style="width: 3rem; height: 3rem;"
style="width: 4rem; height: 4rem;"
style="width: 5rem; height: 5rem;"
style="width: 6rem; height: 6rem;"

Buttons

You can use spinners inside buttons to indicate current actions.

Toasts

Toasts are used for short-time alert messages. To activate them, use JavaScript code as below.

$('.toast').toast('show');

Normally, it hides automatically after the short moment (500ms as default). You can change the delay time (or keep showing) with Data options.

Examples

Basic
Data options

Option attributes as below can be used for a toast frame div.toast.

Live demo

You can check data options above with the live demo below.

Translucent

Toasts are translucent. They also attempt to blur background contents if the browser supports backdrop-filter CSS property.

Stacking

You can show multiple toasts. They display vertically stacked.

Placement

Use inline CSS style to locate a toast to the appropriate position (examle for the top-right below).

Logo placeholderBootstrap11 mins ago
Hello, world! This is a toast message.

You can also use a wrapper to locate mutiple toasts. See the example below.

Accessibility

Summary

Tooltips

Bootstrap tooltip is customization of tooltip display by title attribute. It utilizes Popper.js for implementation.

Initialization

Bootstrap tooltips are inactivated as defaut. JavaScript is required to activate. Below is a simple code to activate all tooltips.

$('[data-toggle="tooltip"]').tooltip();

How to use it

Example ⇒ Hover here

Directions

Set attribute data-placement=("top"|"right"|"bottom"|"left") ( "top" as default)

Example

Using HTML

Example ⇒ Hover here

Using tooltips for disabled elements

If the attribute disabled is set to the element, it also disables a tooltip (example below).

Example (does not show tooltip on hover)

To enable a tooltip for a disabled element, add a wrapping parent and set tooltip to it.

Example (the button is disabled but show a tooltip on hover by the parent)