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.

• The indicator component must be Nav or List group
• The root element of scrolling content requires:
  • position: relative;
  • overflow-y: scroll;
  • Have a height set
• If the root is body , it satisfies above all requirements

How to use it

• Use body as the scrolling root, or set attributes to satisfy above requirements
• Set the following attributes to the scrolling root element
  • data-spy="scroll"
  • data-target="#{indicator-id}"
  • (Optional) data-offset="{pixels}" (scroll calculation offset, default="10" )
• Inside the scrolling root, set id="{target-id}" to each scrolling target elements
• The indicator component must be one of followings
  • Navigation
  • List group
• Set id="{indicator-id}"
• Set anchors a with href="#{target-id}" into the correcponding indicator items

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

• Border spinner div.spinner-border Attribute
  • Accessibility attribute role="status"
  • For screen reader span.sr-only
    • Text Loading...

Colors

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

Growing spinner

• Growing spinner div.spinner-grow Attribute
  • Accessibility attribute role="status"
  • For screen reader span.sr-only
    • Text Loading...

Alignment

Margin

Use Spacing utility.

Placement

Various utilities are available for locating spinners to appropriate positions.

Flex

Example using Align items and Auto margins

• div.d-flex.align-items-center
  • strong
    • Text Loading...
  • Spinner div.spinner-border Attributes
    • Accessibility attribute role="status"
    • Accessibility attribute aria-hidden="true"

Floats

Example using Float with Clearfix.

• div.clearfix
  • Spinner div.spinner-border Attributes
    • Float .float-(left|right)
    • Accessibility attribute role="status"
    • For screen reader span.sr-only

Text align

• div.text-(left|center|right)
  • Spinner div.spinner-border Attribute
    • Accessibility attribute role="status"
    • For screen reader span.sr-only

Size

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

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

Buttons

You can use spinners inside buttons to indicate current actions.

• Button button.btn.btn-primary Attributes
  • Attribute type="button"
  • Attribute disabled
  • Small spinner div.spinner-(border|grow).spinner-(border|grow)-sm Attributes
    • Accessibility attribute role="status"
    • Accessibility attribute aria-hidden="true"
  • (Left only: for no-text buttons) for screen reader span.sr-only
    • Text Loading...
  • (Right only) text Loading...

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

• Toast (frame) div.toast Attributes
  • Accessibility attribute role="alert"
  • Accessibility attribute aria-live="assertive"
  • Accessibility attribute aria-atomic="true"
  • Option (keep showing) data-autohide="false"
  • Header div.toast-header
    • Logo icon img.rounded.mr-2 Attributes
      • Attribute src="../img/20x20-blue.svg"
      • Attribute alt="Logo placeholder"
    • Title strong.mr-auto
      • Text Bootstrap
    • Header small.muted
      • Text 11 mins ago
    • Close button button.ml-2.mb-1.close Attributes
      • Attribute type="button"
      • Attribute data-dismiss="toast"
      • Accessibility attribute aria-label="Close"
      • Button text span Attribute
        • Accessibility attribute aria-hidden="true"
        • Text ×
  • Body div.toast-body
    • Text Hello, world! This is a toast message.

Data options

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

• data-delay="{delay in milliseconds}" sets delay time to hide a toast ("500"[msec] as default).
• data-animation="(true|false)" sets CSS animation ("true" as default).
• data-autohide="(true|false)" hides a toast automatically ("true" as default).

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).

• Parent div.bg-secondary Attributes
  • Accessibility attribute aria-live="polite"
  • Accessibility attribute aria-atomic="true"
  • Inline style style="position: relative; min-height: 200px;"
  • Toast (frame) div.toast Attributes
    • Inline style style="position: absolute; top: 0; right: 0;"
    • Data option data-autohide="false"
    • Toast Header (same as basic example)
    • Toast body (same as basic example)

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

• Parent div.bg-secondary Attributes
  • Accessibility attribute aria-live="polite"
  • Accessibility attribute aria-atomic="true"
  • Inline style style="position: relative; min-height: 250px;"
  • Wrapper div Attribute
    • Inline stype style="position: absolute; top: 0; right: 0;"
    • Toast (1) (same as basic example)
    • Toast (2) (same as basic example)

Accessibility

Summary

• Wrap toasts in an aria-live region. e.g. aria-live="(assertive|polite|...)"
• Include aria-atomic="true"
• Use role="(alert|status|...)"

Tooltips

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

• Browser default tooltip ⇒ Hover here
• Bootstrap tooltip ⇒ Hover here

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

• Available for any elements with setting following attributes
• data-toggle="tooltip"
• title="{tooltip-text}"

Example ⇒ Hover here

Directions

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

Example

Using HTML

• Add attribute data-html="true"
• Set text with HTML
• e.g. title="TNT(C<sub>6</sub>H<sub>2</sub>(NO<sub>2</sub>)<sub>3</sub>CH<sub>3</sub>)"

Example ⇒ Hover here

Using tooltips for disabled elements

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

• button.btn.btn-primary Attributes
  • Attribute type="button"
  • Attribute data-toggle="tooltip"
  • Attribute title="Disabled tooltip"
  • Attribute disabled (also disables a tooltip)
  • Text Disabled button

Example (does not show tooltip on hover)

Disabled button

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

• Wrapping parent span Attributes
  • Utility class .d-inline-block (set to the same display setting as button )
  • Attribute data-toggle="tooltip"
  • Attribute title="Disabled tooltip"
  • Target element button.btn.btn-primary Attributes
    • Attribute type="button"
    • Attribute style="pointer-events: none;" (to prevent receiving pointer events)
    • Attribute disabled
    • Text Disabled button

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

Disabled button