Web Designer Wall

Snippets Modal

Bootstrap 5 CRUD Data Table with Modal Forms

A CRUD employee table with select-all and bulk delete, plus modal forms for adding and editing records and a confirmation dialog before removing them.

Bootstrap 5 Bootstrap 6 No jQuery Nov 2019 15.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1080px">
    <div class="wdw-card overflow-hidden">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 p-4">
        <div>
          <h2 class="h4 wdw-heading mb-0">Manage employees</h2>
          <p class="wdw-muted small mb-0" id="dt-count">5 employees</p>
        </div>
        <div class="d-flex gap-2 w-100 dt-actions">
          <button type="button" class="btn btn-outline-danger rounded-pill flex-fill" id="dt-bulk" disabled>Delete selected</button>
          <button type="button" class="btn btn-primary rounded-pill flex-fill" id="dt-add">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add employee
          </button>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 dt-table">
          <thead>
            <tr>
              <th scope="col" class="ps-3 ps-sm-4" style="width:48px"><input class="form-check-input" type="checkbox" id="dt-all" aria-label="Select all employees"></th>
              <th scope="col">Name</th>
              <th scope="col" class="d-none d-sm-table-cell">Email</th>
              <th scope="col" class="d-none d-md-table-cell">Address</th>
              <th scope="col" class="d-none d-md-table-cell">Phone</th>
              <th scope="col" class="text-end pe-3 pe-sm-4">Actions</th>
            </tr>
          </thead>
          <tbody id="dt-body"></tbody>
        </table>
      </div>
      <div class="p-4 small wdw-muted border-top" id="dt-empty" hidden>No employees yet. Add the first one.</div>
    </div>
  </div>

  <div class="modal fade" id="dt-modal" tabindex="-1" aria-labelledby="dt-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <form class="modal-content border-0 shadow-lg rounded-4" id="dt-form" novalidate>
        <div class="modal-header border-0 p-4 pb-2">
          <h3 class="modal-title h5 fw-bold" id="dt-modal-title">Add employee</h3>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body p-4 d-grid gap-3">
          <div class="form-floating"><input type="text" class="form-control" id="dt-name" placeholder="Name" required><label for="dt-name">Name</label></div>
          <div class="form-floating"><input type="email" class="form-control" id="dt-email" placeholder="Email" required><label for="dt-email">Email</label></div>
          <div class="form-floating"><input type="text" class="form-control" id="dt-address" placeholder="Address" required><label for="dt-address">Address</label></div>
          <div class="form-floating"><input type="tel" class="form-control" id="dt-phone" placeholder="Phone" required><label for="dt-phone">Phone</label></div>
        </div>
        <div class="modal-footer border-0 p-4 pt-0">
          <button type="button" class="btn btn-light rounded-pill" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary rounded-pill px-4">Save</button>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="dt-confirm" tabindex="-1" aria-labelledby="dt-confirm-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
      <div class="modal-content border-0 shadow-lg rounded-4 text-center p-4">
        <h3 class="h5 fw-bold" id="dt-confirm-title">Delete employee?</h3>
        <p class="small wdw-muted" id="dt-confirm-text">This action cannot be undone.</p>
        <div class="d-flex gap-2 justify-content-center">
          <button type="button" class="btn btn-light rounded-pill" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-danger rounded-pill px-4" id="dt-confirm-ok">Delete</button>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More modal snippets