Web Designer Wall

Snippets Card

Bootstrap 5 Draggable Image Card Grid

A responsive image-card grid you can reorder by dragging a card, with keyboard arrow-key support and a shuffle button.

Bootstrap 5 No jQuery Jun 2020 3.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1040px">
    <div class="d-flex flex-wrap align-items-end justify-content-between gap-3 mb-4">
      <div>
        <span class="wdw-eyebrow">Moodboard</span>
        <h2 class="wdw-heading h2 mb-1">Drag to arrange your board</h2>
        <p class="wdw-muted mb-0" id="sortHint">Drag a card by its handle, with mouse or touch. With the handle focused, use the arrow keys to move it.</p>
      </div>
      <button type="button" class="btn btn-outline-primary rounded-pill" id="shuffleBtn">Shuffle</button>
    </div>
    <ul class="list-unstyled mb-0 wdw-board" id="sortable" aria-label="Reorderable gallery">
      <li data-title="Forest light">
        <article class="wdw-tile">
          <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=900&h=700&fit=crop&q=80" alt="Sunlight through a forest" draggable="false">
          <div class="wdw-tile-cap"><h3 class="h6 mb-1">Forest light</h3><p class="small mb-0">Soft greens and warm shafts of sun.</p></div>
          <button type="button" class="wdw-handle" aria-label="Reorder Forest light" aria-describedby="sortHint"></button>
        </article>
      </li>
      <li data-title="Table spread">
        <article class="wdw-tile">
          <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=900&h=700&fit=crop&q=80" alt="A plated restaurant dish" draggable="false">
          <div class="wdw-tile-cap"><h3 class="h6 mb-1">Table spread</h3><p class="small mb-0">Plating ideas for a seasonal menu.</p></div>
          <button type="button" class="wdw-handle" aria-label="Reorder Table spread" aria-describedby="sortHint"></button>
        </article>
      </li>
      <li data-title="Live night">
        <article class="wdw-tile">
          <img src="https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?w=900&h=700&fit=crop&q=80" alt="A crowd at a concert making a heart with their hands" draggable="false">
          <div class="wdw-tile-cap"><h3 class="h6 mb-1">Live night</h3><p class="small mb-0">Crowd energy for an events page.</p></div>
          <button type="button" class="wdw-handle" aria-label="Reorder Live night" aria-describedby="sortHint"></button>
        </article>
      </li>
      <li data-title="Quiet water">
        <article class="wdw-tile">
          <img src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=900&h=700&fit=crop&q=80" alt="A calm lake at dusk" draggable="false">
          <div class="wdw-tile-cap"><h3 class="h6 mb-1">Quiet water</h3><p class="small mb-0">Calm tones for the footer area.</p></div>
          <button type="button" class="wdw-handle" aria-label="Reorder Quiet water" aria-describedby="sortHint"></button>
        </article>
      </li>
      <li data-title="Desk setup">
        <article class="wdw-tile">
          <img src="https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=900&h=700&fit=crop&q=80" alt="Hands holding a phone above a laptop" draggable="false">
          <div class="wdw-tile-cap"><h3 class="h6 mb-1">Desk setup</h3><p class="small mb-0">Workspace shots for the about page.</p></div>
          <button type="button" class="wdw-handle" aria-label="Reorder Desk setup" aria-describedby="sortHint"></button>
        </article>
      </li>
    </ul>
    <p class="visually-hidden" id="sortStatus" role="status" aria-live="polite"></p>
  </div>
</section>

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

Related snippets

More card snippets