Details
Details classes are created to enhance the native behaviors of details elements.
On this page
On this page
Fullscreen click area
Use .details-overlay to expand the click area of <summary> to cover the full screen, so user can click anywhere on a page to close <details>.
Darkened fullscreen click area
Use .details-overlay-dark darken the click area overlay. Useful for modals.
Custom caret
Use .details-reset to remove the default caret (that little triangle on the left). You then can add the .dropdown-caret on the right of the text.
Using button styles with the details summary element
You can add .btn and .btn-* classes to any
<summary>
element so that it gains the appearance of a button, and
selected/active styles when the parent
<details>
element is open.