Cards Bootstrap 5Free
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
242.7k views16.1k downloads
gosnippets.com/preview/bootstrap-carousel-with-cards-in-3-columns
Source Code
1<section class="pt-5 pb-5">
2 <div class="container">
3 <div class="row">
4 <div class="col-6">
5 <h3 class="mb-3">Carousel cards title </h3>
6 </div>
7 <div class="col-6 text-end">
8 <a class="btn btn-primary mb-3 me-1" href="#carouselExampleIndicators2" role="button" data-bs-slide="prev">
9 <i class="fa fa-arrow-left"></i>
10 </a>
11 <a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-bs-slide="next">
12 <i class="fa fa-arrow-right"></i>
13 </a>
14 </div>
15 <div class="col-12">
16 <div id="carouselExampleIndicators2" class="carousel slide" data-bs-ride="carousel">
17
18 <div class="carousel-inner">
19 <div class="carousel-item active">
20 <div class="row">
21
22 <div class="col-md-4 mb-3">
23 <div class="card">
24 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
25 <div class="card-body">
26 <h4 class="card-title">Special title treatment</h4>
27 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
28
29 </div>
30
31 </div>
32 </div>
33 <div class="col-md-4 mb-3">
34 <div class="card">
35 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
36 <div class="card-body">
37 <h4 class="card-title">Special title treatment</h4>
38 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
39
40 </div>
41 </div>
42 </div>
43 <div class="col-md-4 mb-3">
44 <div class="card">
45 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
46 <div class="card-body">
47 <h4 class="card-title">Special title treatment</h4>
48 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
49
50 </div>
51 </div>
52 </div>
53
54 </div>
55 </div>
56 <div class="carousel-item">
57 <div class="row">
58
59 <div class="col-md-4 mb-3">
60 <div class="card">
61 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
62 <div class="card-body">
63 <h4 class="card-title">Special title treatment</h4>
64 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
65
66 </div>
67
68 </div>
69 </div>
70 <div class="col-md-4 mb-3">
71 <div class="card">
72 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
73 <div class="card-body">
74 <h4 class="card-title">Special title treatment</h4>
75 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
76
77 </div>
78 </div>
79 </div>
80 <div class="col-md-4 mb-3">
81 <div class="card">
82 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
83 <div class="card-body">
84 <h4 class="card-title">Special title treatment</h4>
85 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
86
87 </div>
88 </div>
89 </div>
90
91 </div>
92 </div>
93 <div class="carousel-item">
94 <div class="row">
95
96 <div class="col-md-4 mb-3">
97 <div class="card">
98 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
99 <div class="card-body">
100 <h4 class="card-title">Special title treatment</h4>
101 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
102
103 </div>
104
105 </div>
106 </div>
107 <div class="col-md-4 mb-3">
108 <div class="card">
109 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
110 <div class="card-body">
111 <h4 class="card-title">Special title treatment</h4>
112 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
113
114 </div>
115 </div>
116 </div>
117 <div class="col-md-4 mb-3">
118 <div class="card">
119 <img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
120 <div class="card-body">
121 <h4 class="card-title">Special title treatment</h4>
122 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
123 </div>
124 </div>
125 </div>
126 </div>
127 </div>
128 </div>
129 </div>
130 </div>
131 </div>
132</div>
133</section>More Cards snippets
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 →
Bootstrap 5 Food Order Card UI Design
Add a card to your UI with Bootstrap 5 Food Order Card UI Design. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
CardsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.