Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
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>
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.
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.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.