Responsive Bootstrap image carousel slider snippets — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1<div class="container">
2 <div class="row">
3 <!-- Carousel -->
4 <div id="carousel-example-generic" class="carousel slide" data-bs-ride="carousel">
5 <!-- Indicators -->
6 <ol class="carousel-indicators">
7 <li data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active"></li>
8 <li data-bs-target="#carousel-example-generic" data-bs-slide-to="1"></li>
9 <li data-bs-target="#carousel-example-generic" data-bs-slide-to="2"></li>
10 </ol>
11 <!-- Wrapper for slides -->
12 <div class="carousel-inner">
13 <div class="item active">
14 <img src="https://i.imgur.com/Ct6Ipr5.jpg" alt="First slide">
15 <!-- Static Header -->
16 <div class="header-text hidden-xs">
17 <div class="col-md-12 text-center">
18 <h2>
19 <span>Welcome to <strong>LOREM IPSUM</strong></span>
20 </h2>
21 <br>
22 <h3>
23 <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
24 </h3>
25 <br>
26 <div class="">
27 <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
28 </div>
29 </div><!-- /header-text -->
30 </div>
31 <div class="item">
32 <img src="https://i.imgur.com/XmVOoJH.jpg" alt="Second slide">
33 <!-- Static Header -->
34 <div class="header-text hidden-xs">
35 <div class="col-md-12 text-center">
36 <h2>
37 <span>Welcome to LOREM IPSUM</span>
38 </h2>
39 <br>
40 <h3>
41 <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
42 </h3>
43 <br>
44 <div class="">
45 <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
46 </div>
47 </div><!-- /header-text -->
48 </div>
49 <div class="item">
50 <img src="https://i.imgur.com/OhPKqnI.jpg" alt="Third slide">
51 <!-- Static Header -->
52 <div class="header-text hidden-xs">
53 <div class="col-md-12 text-center">
54 <h2>
55 <span>Welcome to LOREM IPSUM</span>
56 </h2>
57 <br>
58 <h3>
59 <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
60 </h3>
61 <br>
62 <div class="">
63 <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div>
64 </div>
65 </div><!-- /header-text -->
66 </div>
67 </div>
68 <!-- Controls -->
69 <a class="left carousel-control" href="#carousel-example-generic" data-bs-slide="prev">
70 <span class="glyphicon glyphicon-chevron-left"></span>
71 </a>
72 <a class="right carousel-control" href="#carousel-example-generic" data-bs-slide="next">
73 <span class="glyphicon glyphicon-chevron-right"></span>
74 </a>
75 </div><!-- /carousel -->
76 </div>
77</div>
Bootstrap 5 carousel with multiple cards
Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
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.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.