Can I use "Bootstrap 5 cards Gallery" 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 5 cards Gallery — Free Cards Snippet (Bootstrap 5)

Loading…

Bootstrap 5 cards Gallery — Free Cards Snippet (Bootstrap 5) | GoSnippets

Source Code

1<section class="bg-light py-4 my-5">
2    <div class="container">
3        <div class="row">
4            <div class="col-12">
5                <h2 class="mb-3 text-primary">Bootstrap 5 Cards Gallery</h2>
6            </div>
7
8            <div class="col-md-6 col-lg-4">
9                <div class="card my-3">
10                    
11                        <img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg" class="card-image-top" alt="thumbnail">
12        
13                    <div class="card-body">
14                        <h3 class="card-title"><a href="#" class="text-secondary">What is HTML</a></h3>
15                        <p class="card-text">HTML stands for Hyper Text Markup Language, It helps to learn web development and designing. </p>
16                        <a href="#" class="btn btn-primary">Read More</a>
17                    </div>
18                </div>
19            </div>
20
21            <div class="col-md-6 col-lg-4">
22                <div class="card my-3">
23                    
24                        <img src="https://images.pexels.com/photos/3848158/pexels-photo-3848158.jpeg" class="card-image-top" alt="thumbnail">
25                    
26                    <div class="card-body">
27                        <h3 class="card-title"><a href="#" class="text-secondary">Why We Use HTML</a></h3>
28                        <p class="card-text">We use HTML to make website and that website helps to gain very much knowledge.Pellentesque dictum consequat tincidunt. Sed tincidunt tortor nec vulputate gravida.</p>
29                        <a href="#" class="btn btn-primary">Read More</a>
30                    </div>
31                </div>
32            </div>
33
34            <div class="col-md-6 col-lg-4">
35                <div class="card my-3">
36                    
37                        <img src="https://images.pexels.com/photos/2343170/pexels-photo-2343170.jpeg" class="card-image-top" alt="thumbnail">
38                    <div class="card-body">
39                        <h3 class="card-title"><a href="#" class="text-secondary">Where do people came from?</a></h3>
40                        <p class="card-text">Pellentesque dictum consequat tincidunt. Sed tincidunt tortor nec vulputate gravida. Nam sapien nisi, malesuada at sapien suscipit,</p>
41                        <a href="#" class="btn btn-primary">Read More</a>
42                    </div>
43                </div>
44            </div>
45
46            <div class="col-md-6 col-lg-4">
47                <div class="card my-3">
48                        <img src="https://images.pexels.com/photos/1519088/pexels-photo-1519088.jpeg" class="card-image-top" alt="thumbnail">
49                    <div class="card-body">
50                        <h3 class="card-title"><a href="#" class="text-secondary">What is Lorem Ipsum?</a></h3>
51                        <p class="card-text">Pellentesque dictum consequat tincidunt. Sed tincidunt tortor nec vulputate gravida. Nam sapien nisi, malesuada at sapien suscipit.</p>
52                        <a href="#" class="btn btn-primary">Read More</a>
53                    </div>
54                </div>
55            </div>
56
57            <div class="col-md-6 col-lg-4">
58                <div class="card my-3">
59                    
60                        <img src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg" class="card-image-top" alt="thumbnail">
61                    <div class="card-body">
62                        <h3 class="card-title"><a href="#" class="text-secondary">Where is my Pasta?</a></h3>
63                        <p class="card-text">Pellentesque dictum consequat tincidunt. Sed tincidunt tortor nec vulputate gravida. Nam sapien nisi, malesuada at sapien suscipit,</p>
64                        <a href="#" class="btn btn-primary">Read More</a>
65                    </div>
66                </div>
67            </div>
68
69            <div class="col-md-6 col-lg-4">
70                <div class="card my-3">
71                    
72                        <img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg" class="card-image-top" alt="thumbnail">
73
74                    <div class="card-body">
75                        <h3 class="card-title"><a href="#" class="text-secondary">Why is sky blue ?</a></h3>
76                        <p class="card-text">Pellentesque dictum consequat tincidunt. Sed tincidunt tortor nec vulputate gravida. Nam sapien nisi, malesuada at sapien suscipit.</p>
77                        <a href="#" class="btn btn-primary">Read More</a>
78                    </div>
79                </div>
80            </div>
81        </div>
82    </div>
83</section>

Bootstrap 5 cards Gallery

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

Deep Space API Key Manager with Dynamic Glow Effects

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Bootstrap 5 cards Gallery

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

Deep Space API Key Manager with Dynamic Glow Effects

Aurora Mint Neumorphic Event Scheduler with Drag Selection