Bootstrap Version History Panel — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsver-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Version history</h6>
      <ul class="list-unstyled mb-0" id="bsverList"></ul>
    </div>
  </div>
</div>

<div class="modal fade" id="bsverModal" 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">Restore this version?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0" id="bsverModalBody"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-dark fw-bold" id="bsverConfirm">Restore</button>
      </div>
    </div>
  </div>
</div>

.bsver-card { width: 400px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsver-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #f1f2f5; font-size: 13px; }
.bsver-row:last-child { border-bottom: none; }
.bsver-current { color: #198754; font-weight: 700; }
.bsver-meta { color: #9ca3af; font-size: 11.5px; }

const VERSIONS = [
  { id: 5, author: 'Dana Reyes', time: 'Just now', summary: 'Fixed hero copy typo' },
  { id: 4, author: 'Marcus Lee', time: '2 hours ago', summary: 'Updated pricing table' },
  { id: 3, author: 'Sofia Chen', time: 'Yesterday', summary: 'Added testimonials section' },
  { id: 2, author: 'Dana Reyes', time: '3 days ago', summary: 'Rewrote intro paragraph' },
  { id: 1, author: 'Marcus Lee', time: '1 week ago', summary: 'Initial draft' },
];

const list = document.getElementById('bsverList');
const modal = new bootstrap.Modal(document.getElementById('bsverModal'));
const modalBody = document.getElementById('bsverModalBody');
const confirmBtn = document.getElementById('bsverConfirm');

let versions = VERSIONS.map(v => ({ ...v }));
let currentId = versions[0].id;
let pendingRestoreId = null;

function render() {
  list.innerHTML = versions.map(v => {
    const isCurrent = v.id === currentId;
    return '<li class="bsver-row" data-id="' + v.id + '">' +
      '<div>' +
        '<div class="' + (isCurrent ? 'bsver-current' : '') + '">v' + v.id + (isCurrent ? ' (current)' : '') + ' &mdash; ' + v.summary + '</div>' +
        '<div class="bsver-meta">' + v.author + ' &middot; ' + v.time + '</div>' +
      '</div>' +
      (isCurrent ? '' : '<button type="button" class="btn btn-sm btn-link p-0 bsver-restore" data-id="' + v.id + '">Restore</button>') +
    '</li>';
  }).join('');
}

list.addEventListener('click', e => {
  const btn = e.target.closest('.bsver-restore');
  if (!btn) return;
  pendingRestoreId = Number(btn.dataset.id);
  const v = versions.find(x => x.id === pendingRestoreId);
  modalBody.textContent = 'This replaces the current content with v' + v.id + ' ("' + v.summary + '"), authored by ' + v.author + '.';
  modal.show();
});

confirmBtn.addEventListener('click', () => {
  currentId = pendingRestoreId;
  render();
  modal.hide();
});

render();