Can I use "Bootstrap carousel with cards in 3 columns" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Bootstrap carousel with cards in 3 columns — Free Cards Snippet (Bootstrap 5)

Loading…

Bootstrap carousel with cards in 3 columns — Free Cards Snippet (Bootstrap 5) | GoSnippets

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>

Bootstrap carousel with cards in 3 columns

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Cards snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Bootstrap carousel with cards in 3 columns

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Cards snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection