Bootstrap Blog Post Card Grid with Read-Time Sort — Free Snippet

<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
    <h1 class="bsblog-title mb-0">From the blog</h1>
    <select class="form-select form-select-sm" style="width:auto" id="bsblogSort">
      <option value="newest">Newest first</option>
      <option value="quickest">Quickest read</option>
    </select>
  </div>
  <div class="row g-4" id="bsblogGrid">
    <div class="col-md-4" data-date="2026-09-01" data-mins="8">
      <div class="card h-100"><div class="bsblog-cover" style="--h:230"></div><div class="card-body">
        <span class="badge bg-primary-subtle text-primary-emphasis mb-2">Engineering</span>
        <h5 class="card-title">Scaling our API to 10x traffic</h5>
        <p class="text-muted small">Sep 1 · 8 min read</p>
      </div></div>
    </div>
    <div class="col-md-4" data-date="2026-08-20" data-mins="3">
      <div class="card h-100"><div class="bsblog-cover" style="--h:20"></div><div class="card-body">
        <span class="badge bg-success-subtle text-success-emphasis mb-2">Product</span>
        <h5 class="card-title">Introducing dark mode</h5>
        <p class="text-muted small">Aug 20 · 3 min read</p>
      </div></div>
    </div>
    <div class="col-md-4" data-date="2026-08-28" data-mins="5">
      <div class="card h-100"><div class="bsblog-cover" style="--h:150"></div><div class="card-body">
        <span class="badge bg-warning-subtle text-warning-emphasis mb-2">Design</span>
        <h5 class="card-title">Redesigning our onboarding flow</h5>
        <p class="text-muted small">Aug 28 · 5 min read</p>
      </div></div>
    </div>
  </div>
</div>

.bsblog-title { font-weight: 800; letter-spacing: -0.01em; }
.bsblog-cover { height: 140px; border-radius: 8px 8px 0 0; background: linear-gradient(135deg, hsl(calc(var(--h)) 60% 85%), hsl(calc(var(--h) + 50) 60% 70%)); }

const grid = document.getElementById('bsblogGrid');
const sort = document.getElementById('bsblogSort');

function applySort() {
  const cols = Array.from(grid.children);
  const key = sort.value;
  cols.sort((a, b) => key === 'newest'
    ? new Date(b.dataset.date) - new Date(a.dataset.date)
    : Number(a.dataset.mins) - Number(b.dataset.mins)
  );
  cols.forEach(col => grid.appendChild(col));
}

sort.addEventListener('change', applySort);