Bootstrap Command Palette — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bscmd-card">
    <div class="card-body p-4 text-center">
      <p class="small text-muted mb-2">Press Ctrl+K (or Cmd+K on Mac), or click below.</p>
      <button type="button" class="btn btn-outline-secondary" id="bscmdOpen">
        Search commands <kbd class="ms-1">Ctrl</kbd><kbd>K</kbd>
      </button>
      <p class="small mt-3 mb-0" id="bscmdStatus">&nbsp;</p>
    </div>
  </div>
</div>

<div class="modal fade" id="bscmdModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content bscmd-modal-content">
      <div class="p-2 border-bottom">
        <input type="text" class="form-control border-0 bscmd-input" id="bscmdInput" placeholder="Type a command...">
      </div>
      <ul class="list-unstyled mb-0 bscmd-list" id="bscmdList"></ul>
    </div>
  </div>
</div>

.bscmd-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bscmd-modal-content { border-radius: 14px; overflow: hidden; }
.bscmd-input:focus { box-shadow: none; }
.bscmd-list { max-height: 280px; overflow-y: auto; padding: 6px; }
.bscmd-item { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
.bscmd-item-active { background: #eef0ff; color: #4338ca; }
.bscmd-item span.bscmd-hint { color: #9ca3af; font-size: 11.5px; }

const COMMANDS = [
  { label: 'Go to Dashboard', hint: 'Navigation' },
  { label: 'Create new project', hint: 'Action' },
  { label: 'Invite teammate', hint: 'Action' },
  { label: 'Open settings', hint: 'Navigation' },
  { label: 'Toggle dark mode', hint: 'Preference' },
  { label: 'View billing', hint: 'Navigation' },
  { label: 'Log out', hint: 'Account' },
];

const openBtn = document.getElementById('bscmdOpen');
const input = document.getElementById('bscmdInput');
const list = document.getElementById('bscmdList');
const status = document.getElementById('bscmdStatus');
const modalEl = document.getElementById('bscmdModal');
const modal = new bootstrap.Modal(modalEl);

let activeIndex = 0;
let visible = COMMANDS;

function render() {
  const q = input.value.trim().toLowerCase();
  visible = q ? COMMANDS.filter(c => c.label.toLowerCase().includes(q)) : COMMANDS;
  activeIndex = Math.min(activeIndex, Math.max(visible.length - 1, 0));

  list.innerHTML = visible.map((c, i) =>
    '<li class="bscmd-item' + (i === activeIndex ? ' bscmd-item-active' : '') + '" data-index="' + i + '">' +
    '<span>' + c.label + '</span><span class="bscmd-hint">' + c.hint + '</span></li>'
  ).join('') || '<li class="bscmd-item text-muted">No matching commands</li>';
}

function runCommand(cmd) {
  status.textContent = 'Ran: "' + cmd.label + '"';
  modal.hide();
}

function open() {
  input.value = '';
  activeIndex = 0;
  render();
  modal.show();
}

openBtn.addEventListener('click', open);

document.addEventListener('keydown', e => {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
    e.preventDefault();
    open();
  }
});

modalEl.addEventListener('shown.bs.modal', () => input.focus());

input.addEventListener('input', render);

input.addEventListener('keydown', e => {
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    activeIndex = Math.min(activeIndex + 1, visible.length - 1);
    render();
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    activeIndex = Math.max(activeIndex - 1, 0);
    render();
  } else if (e.key === 'Enter' && visible[activeIndex]) {
    runCommand(visible[activeIndex]);
  }
});

list.addEventListener('click', e => {
  const item = e.target.closest('.bscmd-item');
  if (item && visible[Number(item.dataset.index)]) runCommand(visible[Number(item.dataset.index)]);
});

render();