Bootstrap 5 cards Gallery

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>