Bootstrap carousel with cards in 3 columns

Loading…
Bootstrap carousel with cards in 3 columns | 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

Source Code

More Cards snippets

Comments(0)
