Bootstrap z-index Scale Reference

Bootstrap z-index Scale

Bootstrap uses a carefully designed z-index scale that provides consistent layering across all its components. Understanding this scale is essential when customizing Bootstrap or integrating third-party components.

The Complete Scale

// Bootstrap 5.x z-index values
$zindex-dropdown:       1000;
$zindex-sticky:         1020;
$zindex-fixed:          1030;
$zindex-offcanvas-backdrop: 1040;
$zindex-offcanvas:      1045;
$zindex-modal-backdrop: 1050;
$zindex-modal:          1055;
$zindex-popover:        1070;
$zindex-tooltip:        1080;
$zindex-toast:          1090;

CSS Custom Properties

:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-offcanvas-backdrop: 1040;
  --z-offcanvas: 1045;
  --z-modal-backdrop: 1050;
  --z-modal: 1055;
  --z-popover: 1070;
  --z-tooltip: 1080;
  --z-toast: 1090;
}

Design Decisions

1. Starts at 1000: This leaves room for custom application layers below the framework. Your app can use 1-999 for custom stacking without conflicting with Bootstrap.

2. Gaps between values: The gaps (10-20 between each level) allow you to insert custom layers between framework components if needed.

3. Backdrop values: Backdrops (offcanvas-backdrop, modal-backdrop) are placed just below their corresponding component to create the dimming effect.

4. Toast above modal: Bootstrap places toasts at 1090, above modals (1055), so feedback messages are always visible even when a modal is open.

Customizing Bootstrap's Scale

// Override in your _variables.scss before importing Bootstrap
$zindex-modal-backdrop: 1060;
$zindex-modal: 1065;
// Add custom levels
$zindex-my-sidebar: 1010;

When to Deviate

If your project uses Bootstrap alongside other frameworks or complex custom UI, you may need to adjust the scale. Use this tool to design a compatible system.