Skip to main content

Overview

The Bottom Sheet component slides up from the bottom of the viewport. It is ideal for mobile actions, sharing trays, filter dialogs, and detail views with touch swipe-to-dismiss gesture handling.

<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-boodoo-toggle="bottom-sheet" data-boodoo-target="#demoSheet">
  <span>Open Bottom Sheet</span>
</button>

<!-- Bottom Sheet markup -->
<div class="bottom-sheet" id="demoSheet" tabindex="-1" aria-labelledby="sheetTitle" aria-hidden="true">
  <div class="bottom-sheet-handle-wrap">
    <div class="bottom-sheet-handle"></div>
  </div>
  <div class="bottom-sheet-header">
    <h5 class="bottom-sheet-title" id="sheetTitle"><span>Quick Actions</span></h5>
    <button type="button" class="btn-close" data-boodoo-dismiss="bottom-sheet" aria-label="Close"></button>
  </div>
  <div class="bottom-sheet-body">
    <p>Sheet content with touch gestures and drag-to-dismiss.</p>
  </div>
  <div class="bottom-sheet-footer">
    <button type="button" class="btn btn-secondary" data-boodoo-dismiss="bottom-sheet">
      <span>Done</span>
    </button>
  </div>
</div>
Quick Share & Actions

Swipe down on the handle or drag anywhere to dismiss this bottom sheet.

📤 Share link via Mail or Apps 📋 Copy URL to Clipboard ⭐ Add to Favorites
Filter Results

This is a half-height sheet variant using .bottom-sheet-half.

JavaScript API

Control the bottom sheet programmatically:

const sheetEl = document.getElementById('demoSheet');
const sheet = boodoo.BottomSheet.getOrCreateInstance(sheetEl);

sheet.show();
sheet.hide();
sheet.toggle();