Cards Bootstrap 5Free
Awesome Bootstrap 5 Cards example: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
6.1k views91 downloads
gosnippets.com/preview/awesome-bootstrap-5-cards-example
Source Code
1<section class="bg-light pt-5 pb-5 shadow-sm">
2 <div class="container">
3 <div class="row pt-5">
4 <div class="col-12">
5 <h3 class="text-uppercase border-bottom mb-4">Awesome Bootstrap 5 cards </h3>
6 </div>
7 </div>
8 <div class="row">
9 <!--Item One -->
10 <div class="col-lg-4 mb-3 d-flex align-items-stretch">
11 <div class="card">
12 <img src="https://images.pexels.com/photos/1423619/pexels-photo-1423619.jpeg" class="card-img-top" alt="Card Image">
13 <div class="card-body d-flex flex-column">
14 <h5 class="card-title">Japanese Street </h5>
15 <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus tortor ac nisi blandit volutpat. Vestibulum pellentesque eros elit, ac blandit ante fringilla quis. </p>
16 <a href="#" class="btn btn-danger text-white mt-auto align-self-start">View Detail</a>
17 </div>
18 </div>
19 </div>
20 <!--Item two -->
21 <div class="col-lg-4 mb-3 d-flex align-items-stretch">
22 <div class="card">
23 <img src="https://images.pexels.com/photos/10154570/pexels-photo-10154570.jpeg" class="card-img-top" alt="Card Image">
24 <div class="card-body d-flex flex-column">
25 <h5 class="card-title">Sahara Desert Mountain</h5>
26 <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus tortor ac nisi blandit volutpat. Vestibulum pellentesque eros elit, ac blandit ante fringilla quis.</p>
27 <a href="#" class="btn btn-danger text-white mt-auto align-self-start">View Detail</a>
28 </div>
29 </div>
30 </div>
31 <!-- Item Three -->
32 <div class="col-lg-4 mb-3 d-flex align-items-stretch">
33 <div class="card">
34 <img src="https://images.pexels.com/photos/9469740/pexels-photo-9469740.jpeg" class="card-img-top" alt="Card Image">
35 <div class="card-body d-flex flex-column">
36 <h5 class="card-title">Beautiful Girl Portrait</h5>
37 <p class="card-text mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus tortor ac nisi blandit volutpat. Vestibulum pellentesque eros elit, ac blandit ante fringilla quis.</p>
38 <a href="#" class="btn btn-danger text-white mt-auto align-self-start">View Detail</a>
39 </div>
40 </div>
41 </div>
42 </div>
43 </div>
44</section>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.
Sign in to join the conversation.