Utilities for controlling an element's box shadows.
Use d-bs-{n} to add an outer box shadow to an element.
<div class="d-p-200 d-bar-400 d-bgc-primary d-bs-sm">d-bs-sm</div> <div class="d-p-200 d-bar-400 d-bgc-primary d-bs-md">d-bs-md</div> <div class="d-p-200 d-bar-400 d-bgc-primary d-bs-lg">d-bs-lg</div> <div class="d-p-200 d-bar-400 d-bgc-primary d-bs-xl">d-bs-xl</div> <div class="d-p-200 d-bar-400 d-bgc-primary d-bs-card">d-bs-card</div>
Use d-bs-none to remove a box shadow to an element.
<div class="d-p-200 d-bar-400 d-bgc-primary d-bs-none">.d-bs-none</div>
Use h:d-bs-{n} to change an element's :hover state box shadow.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary h:d-bs-md">Hover over me</dt-button>
Use f:d-bs-{n} to change an element's :focus and :focus-within state box shadow.
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary f:d-bs-md">Focus me</dt-button>
Use fv:d-bs-{n} to change an element's :focus-visible state box shadow [only when focused by keyboard].
<dt-button kind="unstyled" class="d-p-200 d-bar-400 d-bgc-primary fv:d-bs-md">Keyboard focus me</dt-button>
Class
|
Output
|
|---|---|
| .d-bs-sm | box-shadow: var(--dt-shadow-sm-0-x) var(--dt-shadow-sm-0-y) var(--dt-shadow-sm-0-blur) var(--dt-shadow-sm-0-spread) var(--dt-shadow-sm-0-color) !important; |
| .d-bs-md | box-shadow: var(--dt-shadow-md-0-x) var(--dt-shadow-md-0-y) var(--dt-shadow-md-0-blur) var(--dt-shadow-md-0-spread) var(--dt-shadow-md-0-color) !important; |
| .d-bs-lg | box-shadow: var(--dt-shadow-lg-0-x) var(--dt-shadow-lg-0-y) var(--dt-shadow-lg-0-blur) var(--dt-shadow-lg-0-spread) var(--dt-shadow-lg-0-color) !important; |
| .d-bs-xl | box-shadow: var(--dt-shadow-xl-0-x) var(--dt-shadow-xl-0-y) var(--dt-shadow-xl-0-blur) var(--dt-shadow-xl-0-spread) var(--dt-shadow-xl-0-color) !important; |
| .d-bs-card |
box-shadow: var(--dt-shadow-card-0-x) var(--dt-shadow-card-0-y) var(--dt-shadow-card-0-blur) var(--dt-shadow-card-0-spread) var(--dt-shadow-card-0-color), var(--dt-shadow-card-1-x) var(--dt-shadow-card-1-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-x) var(--dt-shadow-card-2-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color) !important |
| .d-bs-none | box-shadow: none !important; |
| .d-bs-unset | box-shadow: unset !important; |
Box Shadows documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope