Download Back To CSSScript.Com
A JavaScript library that brings iOS-style bottom sheets to Bootstrap 5 with swipe gestures, keyboard navigation, and full ARIA support.
A standard sheet with a header, body, and footer. Simple and effective.
Includes a handle to visually indicate swipe-to-dismiss functionality.
Demonstrates how the sheet body scrolls when content overflows.
Prevents the sheet from closing on outside clicks, ideal for confirmations.
The sheet appears without a backdrop, allowing interaction with the page.
An iOS-style action sheet for a clean, minimal list of actions.
A real-time search and filter for a list of locations.
A wizard-like form for breaking down complex inputs into easy steps.
Monitor sheet lifecycle events in real-time with a simple log.
Live search for GitHub users with API integration.
An interactive shopping cart with quantity controls and totals.
Focus management, keyboard navigation, and ARIA attributes.
This is a basic sheet example with header, body, and footer sections.
You can add any Bootstrap components or custom content here.
Try swiping down on the handle above to close this sheet.
The drag handle provides a visual affordance for touch gestures. When you drag down past the threshold, the sheet will smoothly animate closed.
You can also customize the swipe sensitivity using the swipeThreshold and
velocityThreshold options.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Are you sure you want to delete your account?
This action cannot be undone. All your data, including:
will be permanently removed from our servers.
This sheet has no backdrop overlay, allowing you to interact with the page content behind it.
This can be useful for non-modal interactions where you want to display information without fully blocking the underlying content.
Open, close, or drag this sheet to see events being fired in real-time in the log above.
The following events are monitored:
show.bs.sheet - Fired when show() is calledshown.bs.sheet - Fired when sheet is visiblehide.bs.sheet - Fired when hide() is calledhidden.bs.sheet - Fired when sheet is hiddenslide.bs.sheet - Fired during drag (throttled)Type a username to search