Bootstrap Sheet

Declarative API

Add data-bs-toggle="sheet" to any trigger element - no JavaScript required. Close with the data-bs-dismiss="sheet" button, the drag handle, or Escape.

<button data-bs-toggle="sheet" data-bs-target="#mySheet">
  Open sheet
</button>

<div class="sheet" id="mySheet">
  <div class="sheet-handle"></div>
  <div class="sheet-header">
    <h5 class="sheet-title">Title</h5>
    <button class="btn-close" data-bs-dismiss="sheet"></button>
  </div>
  <div class="sheet-body">...</div>
</div>

Spring Physics

All animations - show, hide, snap-back - are driven by a spring model. springDampingRatio controls bounciness; springResponse controls speed.

Swipe down past 50% of sheet height to dismiss. Drag up against rubber-band resistance - release and the spring snaps you back.

new BootstrapSheet('#mySheet', {
  gestures: true,
  springDampingRatio: 0.8,
  springResponse: 0.4,
});

Backdrop Modes

Three behaviours with a single option. 'static' mode blocks dismissal and triggers a shake animation - tactile feedback that the sheet requires explicit action.

// Dismissible (default)
new BootstrapSheet('#mySheet', { backdrop: true });

// Static - shake on outside click
new BootstrapSheet('#mySheet', { backdrop: 'static' });

// No backdrop
new BootstrapSheet('#mySheet', { backdrop: false });

Slide Event

slide.bs.sheet fires on every animation frame during drag. detail.ratio runs from 1 (fully open) to 0 (dismissed), letting you synchronize any custom visual to the gesture in real time.

const mySheet = document.getElementById('mySheet');

mySheet.addEventListener('slide.bs.sheet', (e) => {
  const { ratio, velocity, deltaY } = e.detail;

  // drive any visual with ratio 1→0
  bar.style.width = (ratio * 100) + '%';
});

Detents

A detent is a height the sheet rests at, written as the fraction of its height that is visible. Release the sheet and it settles at whichever detent your gesture was heading for - a hard flick skips past the ones in between.

With undimmedDetent the sheet stays non-modal while collapsed: no dimming, no focus trap, and the page behind stays clickable.

const sheet = new BootstrapSheet('#mySheet', {
  detents: [0.35, 0.7, 1],
});

sheet.addEventListener('detentchange.bs.sheet', (e) => {
  console.log(e.detail.detent, e.detail.previousDetent);
});

sheet.setDetent(0.7);

Accessibility

• ARIA - role="dialog" and aria-modal="true" applied automatically
• Focus trap - Tab cycles within the sheet; Shift+Tab goes backwards
• Focus restore - focus returns to the trigger element on close
• Inert background - page content behind the sheet is made inert
• Keyboard dismiss - Escape closes the sheet (configurable via keyboard option)