Blog Post Cards

<div class="container py-5">
  <div class="row g-4">
    <div class="col-md-4">
      <article class="border rounded-4 overflow-hidden bg-white h-100"><img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=400&fit=crop" alt="Developer writing code on laptop" class="w-100" style="height:180px;object-fit:cover">
        <div class="p-3"><span class="badge bg-primary-subtle text-primary">Tutorial</span>
          <h5 class="fw-bold mt-2">Getting started with Bootstrap 5</h5>
          <p class="small text-muted">Learn the grid, utilities, and components in 15 minutes.</p><a href="#" class="fw-semibold text-decoration-none">Read more →</a>
        </div>
      </article>
    </div>
    <div class="col-md-4">
      <article class="border rounded-4 overflow-hidden bg-white h-100"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop" alt="Team collaborating in meeting" class="w-100" style="height:180px;object-fit:cover">
        <div class="p-3"><span class="badge bg-success-subtle text-success">Design</span>
          <h5 class="fw-bold mt-2">Design systems that scale</h5>
          <p class="small text-muted">Tokens, components, docs — build once, use everywhere.</p><a href="#" class="fw-semibold text-decoration-none">Read more →</a>
        </div>
      </article>
    </div>
    <div class="col-md-4">
      <article class="border rounded-4 overflow-hidden bg-white h-100"><img src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=600&h=400&fit=crop" alt="Notebook and pen on desk" class="w-100" style="height:180px;object-fit:cover">
        <div class="p-3"><span class="badge bg-warning-subtle text-warning">Career</span>
          <h5 class="fw-bold mt-2">Freelancing in 2025</h5>
          <p class="small text-muted">Pricing, contracts, and finding your first 3 clients.</p><a href="#" class="fw-semibold text-decoration-none">Read more →</a>
        </div>
      </article>
    </div>
  </div>
</div>