Card Grid Layout | GoSnippets

Cards Bootstrap 5Free

Add a card to your UI with Card Grid Layout. Free Bootstrap 5 code — HTML ready to copy, MIT licensed.

3.7k views987 downloadslast year

gosnippets.com/preview/card-grid-layout

Source Code

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>

More Cards snippets

Bootstrap carousel with cards in 3 columns

Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.

CardsView →

Bootstrap 5 ecommerce product cards details template

Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

CardsView →

Bootstrap snippet Panels with nav tabs using HTML & CSS

Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

CardsView →

Comments(0)

No comments yet — be the first to start the discussion.

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>