- Notifications
You must be signed in to change notification settings - Fork0
A touch-friendly bottom sheet component for Bootstrap 5
License
mironovsergey/bootstrap-sheet
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Touch-friendly bottom sheet component for Bootstrap 5 — supports swipe gestures, backdrop, focus management, and is built with accessibility in mind.
Documentation ·Report Bug ·Request Feature ·Discussions
npm install bootstrap-sheet
yarn add bootstrap-sheet
<!-- CSS --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap-sheet@latest/dist/css/bootstrap-sheet.min.css"rel="stylesheet"/><!-- JavaScript --><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap-sheet@latest/dist/js/bootstrap-sheet.min.js"></script>
<!-- CSS --><linkhref="https://unpkg.com/bootstrap-sheet@latest/dist/css/bootstrap-sheet.min.css"rel="stylesheet"/><!-- JavaScript --><scriptsrc="https://unpkg.com/bootstrap-sheet@latest/dist/js/bootstrap-sheet.min.js"></script>
Download the latest release and include the compiled CSS and JavaScript files in your project.
Activate a sheet without writing JavaScript. Setdata-bs-toggle="sheet" on a controller element, like a button, along with adata-bs-target="#foo" orhref="#foo" to target a specific sheet to toggle.
<!-- Button trigger --><buttontype="button"class="btn btn-primary"data-bs-toggle="sheet"data-bs-target="#mySheet"> Launch sheet</button><!-- Sheet --><divclass="sheet"id="mySheet"tabindex="-1"data-bs-backdrop="true"data-bs-keyboard="true"data-bs-focus="true"><divclass="sheet-handle"data-bs-drag="sheet"></div><divclass="sheet-header"><h5class="sheet-title">Sheet title</h5><buttontype="button"class="btn-close"data-bs-dismiss="sheet"aria-label="Close"></button></div><divclass="sheet-body"><p>Sheet body text goes here.</p></div><divclass="sheet-footer"><buttontype="button"class="btn btn-secondary"data-bs-dismiss="sheet">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div></div>
importBootstrapSheetfrom'bootstrap-sheet';// Create instance (selector or Element accepted)constsheet=newBootstrapSheet('#mySheet',{backdrop:true,keyboard:true,focus:true,gestures:true,});// Show the sheetsheet.show();
More examples:Live Demo
Options can be passed via data attributes or JavaScript. For data attributes, append the option name todata-bs-, as indata-bs-backdrop="static".
| Name | Type | Default | Description |
|---|---|---|---|
backdrop | boolean or'static' | true | Includes a backdrop element. Use'static' for a backdrop that doesn't close the sheet when clicked. |
keyboard | boolean | true | Closes the sheet when escape key is pressed. |
focus | boolean | true | Puts focus on the sheet when initialized and traps focus within it. |
| Name | Type | Default | Description |
|---|---|---|---|
gestures | boolean | true | Enable/disable swipe gestures. |
swipeThreshold | number | 50 | Minimum swipe distance (px) to trigger close. |
velocityThreshold | number | 0.5 | Minimum velocity (px/ms) to trigger close. |
minCloseDistance | number | 50 | Minimum distance (px) for velocity-based close. |
closeThresholdRatio | number | 0.3 | Ratio of sheet height (0-1) to trigger close when released. |
| Name | Type | Default | Description |
|---|---|---|---|
animationDuration | number | 300 | Animation duration in milliseconds. |
projectionTime | number | 200 | Time (ms) to project velocity for momentum-based closing. |
dragResistanceUp | number | 0.75 | Resistance when dragging up (0-1, higher = more resistance). |
dragResistanceDown | number | 0.01 | Resistance when dragging down (0-1, higher = more resistance). |
All methods areasynchronous and return to the caller as soon as the transition starts.
constsheet=BootstrapSheet.getInstance('#mySheet');
| Method | Description |
|---|---|
show() | Opens the sheet. |
hide() | Closes the sheet. |
toggle() | Toggles the sheet visibility. |
dispose() | Destroys the sheet instance and removes all event listeners. |
getInstance(element) (static) | Returns the sheet instance associated with a DOM element ornull if not initialized. |
getOrCreateInstance(element, config?) (static) | Gets existing instance or creates a new one if it doesn't exist. |
| Property | Type | Description |
|---|---|---|
isShown | boolean | Returnstrue if the sheet is currently visible. |
isTransitioning | boolean | Returnstrue if the sheet is currently animating. |
All events are fired at the sheet element itself.
| Event Type | Description |
|---|---|
show.bs.sheet | Fired immediately when theshow() method is called. |
shown.bs.sheet | Fired when the sheet has been made visible to the user (after CSS transitions complete). |
hide.bs.sheet | Fired immediately when thehide() method is called. |
hidden.bs.sheet | Fired when the sheet has finished being hidden from the user (after CSS transitions complete). |
slide.bs.sheet | Fired continuously during drag/slide gestures. Event detail containsvelocity,adjustedY,deltaY,ratio. |
document.getElementById('mySheet').addEventListener('shown.bs.sheet',(event)=>{console.log('Sheet is now visible');});
Customize the appearance by overriding these Sass variables:
// Z-index$sheet-zindex:1057!default;// Dimensions$sheet-width:100vw!default;$sheet-max-width:100%!default;$sheet-max-height:90vh!default;// Colors$sheet-bg:var(--bs-body-bg,#fff)!default;$sheet-backdrop-bg:rgba(0,0,0,0.5)!default;$sheet-backdrop-backdrop-filter:blur(2px)!default;// Transitions$sheet-transition-duration:0.3s!default;$sheet-transition-timing:ease-out!default;// Handle$sheet-handle-bg:var(--bs-gray-400,#dee2e6)!default;$sheet-handle-hover-bg:var(--bs-gray-500,#adb5bd)!default;$sheet-handle-width:3rem!default;$sheet-handle-height:0.25rem!default;$sheet-handle-margin:0.5remauto!default;$sheet-handle-hit-area:2rem!default;// Spacing$sheet-padding-x:1rem!default;$sheet-padding-y:1rem!default;$sheet-header-padding-y:0.75rem!default;$sheet-body-padding-y:1rem!default;$sheet-footer-padding-y:0.75rem!default;// Visual effects$sheet-box-shadow:0-2px10pxrgba(0,0,0,0.1)!default;$sheet-border-width:1px!default;$sheet-border-color:var(--bs-border-color,#dee2e6)!default;$sheet-border-radius:1rem1rem00!default;// Focus$sheet-focus-ring-width:0.25rem!default;$sheet-focus-ring-color:rgba(13,110,253,0.25)!default;// Animations$sheet-shake-distance:10px!default;// States$sheet-disabled-opacity:0.65!default;
Bootstrap Sheet follows WCAG 2.1 Level AA guidelines:
- ARIA attributes — Automatically applies
role="dialog"andaria-modal="true" - Focus management — Traps focus within the sheet and restores it on close
- Keyboard navigation — Full support for Tab, Shift+Tab, and Escape keys
- Inert background — Uses native
inertattribute witharia-hiddenfallback - Screen reader support — Announces state changes with proper context
- Reduced motion — Respects
prefers-reduced-motionuser preference
Contributions are welcome! Please read ourContributing Guidelines before submitting a Pull Request.
Bootstrap Sheet followsSemantic Versioning. For available versions, seeReleases.
Code and documentation © 2025Sergey Mironov
Code released under theMIT License
Documentation released underCreative Commons Attribution 3.0
Sergey Mironov
- GitHub:@mironovsergey
- Email:sergeymironov@protonmail.com
Made with ❤️ bySergey Mironov
About
A touch-friendly bottom sheet component for Bootstrap 5
Topics
Resources
License
Code of conduct
Contributing
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.