Bootstrap Inline Form Editing — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsinline-card">
    <div class="card-body p-4">
      <h6 class="fw-bold mb-3">Profile</h6>

      <div class="bsinline-row" data-field="name" data-value="Dana Reyes">
        <span class="bsinline-label small text-muted">Name</span>
        <div class="bsinline-display">
          <span class="bsinline-value">Dana Reyes</span>
          <button type="button" class="btn btn-sm btn-link p-0 bsinline-edit">Edit</button>
        </div>
        <div class="bsinline-editor d-none">
          <input type="text" class="form-control form-control-sm">
          <div class="d-flex gap-2 mt-1">
            <button type="button" class="btn btn-sm btn-dark bsinline-save">Save</button>
            <button type="button" class="btn btn-sm btn-outline-secondary bsinline-cancel">Cancel</button>
          </div>
        </div>
      </div>

      <div class="bsinline-row" data-field="title" data-value="Engineering Lead">
        <span class="bsinline-label small text-muted">Title</span>
        <div class="bsinline-display">
          <span class="bsinline-value">Engineering Lead</span>
          <button type="button" class="btn btn-sm btn-link p-0 bsinline-edit">Edit</button>
        </div>
        <div class="bsinline-editor d-none">
          <input type="text" class="form-control form-control-sm">
          <div class="d-flex gap-2 mt-1">
            <button type="button" class="btn btn-sm btn-dark bsinline-save">Save</button>
            <button type="button" class="btn btn-sm btn-outline-secondary bsinline-cancel">Cancel</button>
          </div>
        </div>
      </div>

      <div class="bsinline-row" data-field="email" data-value="[email protected]">
        <span class="bsinline-label small text-muted">Email</span>
        <div class="bsinline-display">
          <span class="bsinline-value">[email protected]</span>
          <button type="button" class="btn btn-sm btn-link p-0 bsinline-edit">Edit</button>
        </div>
        <div class="bsinline-editor d-none">
          <input type="text" class="form-control form-control-sm">
          <div class="d-flex gap-2 mt-1">
            <button type="button" class="btn btn-sm btn-dark bsinline-save">Save</button>
            <button type="button" class="btn btn-sm btn-outline-secondary bsinline-cancel">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.bsinline-card { width: 360px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsinline-row { padding: 8px 0; border-bottom: 1px solid #f1f2f5; }
.bsinline-row:last-child { border-bottom: none; }
.bsinline-label { display: block; margin-bottom: 2px; }
.bsinline-display { display: flex; justify-content: space-between; align-items: center; }
.bsinline-value { font-size: 14px; }

const rows = Array.from(document.querySelectorAll('.bsinline-row'));

// Only one row edits at a time — opening a new editor closes any other row
// that was already open, discarding its unsaved edit rather than leaving
// two editors open and ambiguous about which Save applies to what.
function closeAllExcept(exceptRow) {
  rows.forEach(row => {
    if (row === exceptRow) return;
    row.querySelector('.bsinline-editor').classList.add('d-none');
    row.querySelector('.bsinline-display').classList.remove('d-none');
  });
}

rows.forEach(row => {
  const display = row.querySelector('.bsinline-display');
  const editor = row.querySelector('.bsinline-editor');
  const input = editor.querySelector('input');
  const valueEl = row.querySelector('.bsinline-value');

  function openEditor() {
    closeAllExcept(row);
    input.value = row.dataset.value;
    display.classList.add('d-none');
    editor.classList.remove('d-none');
    input.focus();
    input.select();
  }

  function closeEditor() {
    editor.classList.add('d-none');
    display.classList.remove('d-none');
  }

  row.querySelector('.bsinline-edit').addEventListener('click', openEditor);

  row.querySelector('.bsinline-save').addEventListener('click', () => {
    const next = input.value.trim();
    if (next) {
      row.dataset.value = next;
      valueEl.textContent = next;
    }
    closeEditor();
  });

  row.querySelector('.bsinline-cancel').addEventListener('click', closeEditor);

  input.addEventListener('keydown', e => {
    if (e.key === 'Enter') row.querySelector('.bsinline-save').click();
    if (e.key === 'Escape') closeEditor();
  });
});