Card Grid Layout

1<div class="container py-5">
2  <div class="row g-4">
3    <div class="col-md-4">
4      <div class="card h-100 border-0 shadow-sm">
5        <img src="https://picsum.photos/seed/card1/400/220"
6          class="card-img-top" alt="Card image">
7        <div class="card-body d-flex flex-column">
8          <span class="badge bg-primary-subtle text-primary mb-2 w-fit">Design</span>
9          <h5 class="card-title fw-bold">Modern UI Patterns</h5>
10          <p class="card-text text-muted flex-grow-1">
11            Explore the latest UI design patterns for building
12            intuitive and accessible web applications.
13          </p>
14          <a href="#" class="btn btn-primary mt-3">Read more →</a>
15        </div>
16      </div>
17    </div>
18    <div class="col-md-4">
19      <div class="card h-100 border-0 shadow-sm">
20        <img src="https://picsum.photos/seed/card2/400/220"
21          class="card-img-top" alt="Card image">
22        <div class="card-body d-flex flex-column">
23          <span class="badge bg-success-subtle text-success mb-2 w-fit">Development</span>
24          <h5 class="card-title fw-bold">React Best Practices</h5>
25          <p class="card-text text-muted flex-grow-1">
26            A comprehensive guide to writing clean, maintainable
27            React code with hooks and modern patterns.
28          </p>
29          <a href="#" class="btn btn-primary mt-3">Read more →</a>
30        </div>
31      </div>
32    </div>
33    <div class="col-md-4">
34      <div class="card h-100 border-0 shadow-sm">
35        <img src="https://picsum.photos/seed/card3/400/220"
36          class="card-img-top" alt="Card image">
37        <div class="card-body d-flex flex-column">
38          <span class="badge bg-warning-subtle text-warning mb-2 w-fit">Performance</span>
39          <h5 class="card-title fw-bold">Web Performance Guide</h5>
40          <p class="card-text text-muted flex-grow-1">
41            Optimise your web apps with proven techniques for
42            faster load times and better Core Web Vitals.
43          </p>
44          <a href="#" class="btn btn-primary mt-3">Read more →</a>
45        </div>
46      </div>
47    </div>
48  </div>
49</div>