Bootstrap Keyboard Shortcut Help Modal — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bskeys-card">
    <div class="card-body p-4 text-center">
      <p class="small text-muted mb-2">Press <kbd>?</kbd> anywhere on this page, or click below.</p>
      <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#bskeysModal">
        View keyboard shortcuts
      </button>
    </div>
  </div>
</div>

<div class="modal fade" id="bskeysModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Keyboard shortcuts</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <h6 class="small fw-bold text-muted text-uppercase mb-2">Navigation</h6>
        <ul class="list-unstyled bskeys-list mb-3">
          <li><span>Command palette</span><span><kbd>Ctrl</kbd> + <kbd>K</kbd></span></li>
          <li><span>Go to dashboard</span><span><kbd>G</kbd> then <kbd>D</kbd></span></li>
          <li><span>Go to settings</span><span><kbd>G</kbd> then <kbd>S</kbd></span></li>
        </ul>
        <h6 class="small fw-bold text-muted text-uppercase mb-2">Actions</h6>
        <ul class="list-unstyled bskeys-list mb-3">
          <li><span>Save</span><span><kbd>Ctrl</kbd> + <kbd>S</kbd></span></li>
          <li><span>New item</span><span><kbd>N</kbd></span></li>
          <li><span>Delete selected</span><span><kbd>Del</kbd></span></li>
        </ul>
        <h6 class="small fw-bold text-muted text-uppercase mb-2">General</h6>
        <ul class="list-unstyled bskeys-list mb-0">
          <li><span>Show this help</span><span><kbd>?</kbd></span></li>
          <li><span>Close dialog</span><span><kbd>Esc</kbd></span></li>
        </ul>
      </div>
    </div>
  </div>
</div>

.bskeys-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bskeys-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; }
.bskeys-list kbd { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; box-shadow: none; font-size: 11.5px; }

const modalEl = document.getElementById('bskeysModal');
const modal = new bootstrap.Modal(modalEl);

// Ignore "?" while the user is typing inside a real input elsewhere on the
// page — a global shortcut that fires while someone is composing text in a
// field is the single most common way this pattern annoys people.
function isTypingContext(target) {
  const tag = target.tagName;
  return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
}

document.addEventListener('keydown', e => {
  if (e.key === '?' && !isTypingContext(e.target)) {
    e.preventDefault();
    modal.show();
  }
});