Carousels Bootstrap 5Free+ CSS+ JS
Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
45.5k views1.6k downloads
gosnippets.com/preview/bootstrap-5-carousel-with-multiple-cards
Source Code
1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
2<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
3
4<div id="myCarousel" class="carousel slide container" data-bs-ride="carousel">
5 <div class="carousel-inner w-100">
6 <div class="carousel-item active">
7 <div class="col-md-3">
8 <div class="card card-body">
9 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=1">
10 </div>
11 </div>
12 </div>
13 <div class="carousel-item">
14 <div class="col-md-3">
15 <div class="card card-body">
16 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=2">
17 </div>
18 </div>
19 </div>
20 <div class="carousel-item">
21 <div class="col-md-3">
22 <div class="card card-body">
23 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=3">
24 </div>
25 </div>
26 </div>
27 <div class="carousel-item">
28 <div class="col-md-3">
29 <div class="card card-body">
30 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=4">
31 </div>
32 </div>
33 </div>
34 <div class="carousel-item">
35 <div class="col-md-3">
36 <div class="card card-body">
37 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=5">
38 </div>
39 </div>
40 </div>
41 <div class="carousel-item">
42 <div class="col-md-3">
43 <div class="card card-body">
44 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=6">
45 </div>
46 </div>
47 </div>
48 <div class="carousel-item">
49 <div class="col-md-3">
50 <div class="card card-body">
51 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=7">
52 </div>
53 </div>
54 </div>
55 <div class="carousel-item">
56 <div class="col-md-3">
57 <div class="card card-body">
58 <img class="img-fluid" src="https://via.placeholder.com/640x360?text=8">
59 </div>
60 </div>
61 </div>
62 </div>
63 <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
64 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
65 <span class="visually-hidden">Previous</span>
66 </button>
67 <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
68 <span class="carousel-control-next-icon" aria-hidden="true"></span>
69 <span class="visually-hidden">Next</span>
70 </button>
71</div>
72<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>More Carousels snippets
Sliding tabs | CSS transitions only
Sliding tabs | CSS transitions only — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
CarouselsView →
Bootstrap Services in circle slider snippet
Bootstrap Services in circle slider snippet: a hand-crafted, open-source Bootstrap 5 carousel. HTML, CSS & JS included, ready to copy.
CarouselsView →
Bootstrap 5 Snippet Testimonial Slider CSS
Bootstrap 5 Snippet Testimonial Slider CSS — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
CarouselsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.