Cool card carousel Bootstrap 5 example — a free Bootstrap 5 card snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
1<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'>
2<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css'>
3<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
4
5<div class="container-fluid">
6 <div class="row">
7 <div class="col-md-12">
8 <div id="news-slider" class="owl-carousel">
9 <div class="post-slide">
10 <div class="post-img">
11 <img src="https://images.unsplash.com/photo-1596265371388-43edbaadab94?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=501" alt="">
12 <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
13 </div>
14 <div class="post-content">
15 <h3 class="post-title">
16 <a href="#">Lorem ipsum dolor sit amet.</a>
17 </h3>
18 <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
19 <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
20 <a href="#" class="read-more">read more</a>
21 </div>
22 </div>
23
24 <div class="post-slide">
25 <div class="post-img">
26 <img src="https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=503" alt="">
27 <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
28 </div>
29 <div class="post-content">
30 <h3 class="post-title">
31 <a href="#">Lorem ipsum dolor sit amet.</a>
32 </h3>
33 <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
34 <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
35 <a href="#" class="read-more">read more</a>
36 </div>
37 </div>
38
39 <div class="post-slide">
40 <div class="post-img">
41 <img src="https://images.unsplash.com/photo-1564979268369-42032c5ca998?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=500" alt="">
42 <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
43 </div>
44 <div class="post-content">
45 <h3 class="post-title">
46 <a href="#">Lorem ipsum dolor sit amet.</a>
47 </h3>
48 <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
49 <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
50 <a href="#" class="read-more">read more</a>
51 </div>
52 </div>
53
54 <div class="post-slide">
55 <div class="post-img">
56 <img src="https://images.unsplash.com/photo-1576659531892-0f4991fca82b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=501" alt="">
57 <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
58 </div>
59 <div class="post-content">
60 <h3 class="post-title">
61 <a href="#">Lorem ipsum dolor sit amet.</a>
62 </h3>
63 <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
64 <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
65 <a href="#" class="read-more">read more</a>
66 </div>
67 </div>
68
69 <div class="post-slide">
70 <div class="post-img">
71 <img src="https://images.unsplash.com/photo-1586083702768-190ae093d34d?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=305&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=505" alt="">
72 <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
73 </div>
74 <div class="post-content">
75 <h3 class="post-title">
76 <a href="#">Lorem ipsum dolor sit amet.</a>
77 </h3>
78 <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
79 <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
80 <a href="#" class="read-more">read more</a>
81 </div>
82 </div>
83
84 <div class="post-slide">
85 <div class="post-img">
86 <img src="https://images.unsplash.com/photo-1484656551321-a1161420a2a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=306&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=506" alt="">
87 <a href="#" class="over-layer"><i class="fa fa-link"></i></a>
88 </div>
89 <div class="post-content">
90 <h3 class="post-title">
91 <a href="#">Lorem ipsum dolor sit amet.</a>
92 </h3>
93 <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora......</p>
94 <span class="post-date"><i class="fa fa-clock-o"></i>Out 27, 2019</span>
95 <a href="#" class="read-more">read more</a>
96 </div>
97 </div>
98 </div>
99 </div>
100 </div>
101</div>
102<script src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
103<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
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.
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.
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.
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
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.