Bootstrap 5 simple catalog template snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.
1<div class="container bg-light rounded">
2 <div class="h4 font-weight-bold text-center py-3">Explore more</div>
3 <div class="row">
4 <div class="col-lg-4 col-md-6 my-lg-0 my-3">
5 <div class="box bg-white">
6 <div class="d-flex align-items-center">
7 <div class="rounded-circle mx-3 text-center d-flex align-items-center justify-content-center blue"> <img src="https://freepngimg.com/thumb/microphone/11-microphone-png-image-thumb.png" alt=""> </div>
8 <div class="d-flex flex-column"> <b>Public Speech</b> <a href="#">
9 <p class="text-muted">23 classes</p>
10 </a> </div>
11 </div>
12 </div>
13 </div>
14 <div class="col-lg-4 col-md-6 my-lg-0 my-3">
15 <div class="box bg-white">
16 <div class="d-flex align-items-center">
17 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-orange"> <img src="https://freepngimg.com/thumb/email_marketing/5-2-email-png-thumb.png" alt=""> </div>
18 <div class="d-flex flex-column"> <b>Write an email</b> <a href="#">
19 <p class="text-muted">5 classes</p>
20 </a> </div>
21 </div>
22 </div>
23 </div>
24 <div class="col-lg-4 col-md-6 my-lg-0 my-3">
25 <div class="box bg-white">
26 <div class="d-flex align-items-center">
27 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-purple"> <img src="https://freepngimg.com/thumb/technology/40061-1-machining-robot-download-free-image-thumb.png" alt=""> </div>
28 <div class="d-flex flex-column"> <b>Technology</b> <a href="#">
29 <p class="text-muted">32 classes</p>
30 </a> </div>
31 </div>
32 </div>
33 </div>
34 <div class="col-lg-4 col-md-6 my-lg-3 my-3">
35 <div class="box bg-white">
36 <div class="d-flex align-items-center">
37 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-cyan"> <img src="https://freepngimg.com/thumb/brain/80003-learning-human-albert-play-scientist-behavior-einstein-thumb.png" alt=""> </div>
38 <div class="d-flex flex-column"> <b>Professions</b> <a href="#">
39 <p class="text-muted">5 classes</p>
40 </a> </div>
41 </div>
42 </div>
43 </div>
44 <div class="col-lg-4 col-md-6 my-lg-3 my-3">
45 <div class="box bg-white">
46 <div class="d-flex align-items-center">
47 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-pink"> <img src="https://freepngimg.com/thumb/google/66809-google-docs-drive-plus-android-document-thumb.png" alt=""> </div>
48 <div class="d-flex flex-column"> <b>Documentation</b> <a href="#">
49 <p class="text-muted">6 classes</p>
50 </a> </div>
51 </div>
52 </div>
53 </div>
54 <div class="col-lg-4 col-md-6 my-lg-3 my-3">
55 <div class="box bg-white">
56 <div class="d-flex align-items-center">
57 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-orange"> <img src="https://www.freepnglogos.com/uploads/plane-png/plane-png-fort-wayne-international-airport-2.png" alt=""> </div>
58 <div class="d-flex flex-column"> <b>Business Trip</b> <a href="#">
59 <p class="text-muted">28 classes</p>
60 </a> </div>
61 </div>
62 </div>
63 </div>
64 <div class="col-lg-4 col-md-6 my-lg-0 my-3">
65 <div class="box bg-white">
66 <div class="d-flex align-items-center">
67 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-orange"> <img src="https://www.freepnglogos.com/uploads/whatsapp-circle-message-messaging-messenger-round-icon--24.png" alt=""> </div>
68 <div class="d-flex flex-column"> <b>On the Phone</b> <a href="#">
69 <p class="text-muted">5 classes</p>
70 </a> </div>
71 </div>
72 </div>
73 </div>
74 <div class="col-lg-4 col-md-6 my-lg-0 my-3">
75 <div class="box bg-white">
76 <div class="d-flex align-items-center">
77 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-green"> <img src="https://freepngimg.com/thumb/technology/63219-bin-recycling-computer-recycle-electronics-waste-electronic-thumb.png" alt=""> </div>
78 <div class="d-flex flex-column"> <b>Electronics</b> <a href="#">
79 <p class="text-muted">5 classes</p>
80 </a> </div>
81 </div>
82 </div>
83 </div>
84 <div class="col-lg-4 col-md-6 my-lg-0 my-3">
85 <div class="box bg-white">
86 <div class="d-flex align-items-center">
87 <div class="rounded-circle mx-3 d-flex align-items-center justify-content-center pale-pista"> <img src="https://freepngimg.com/thumb/happy_person/4-2-happy-person-transparent-thumb.png" alt=""> </div>
88 <div class="d-flex flex-column"> <b>Job Interview</b> <a href="#">
89 <p class="text-muted">5 classes</p>
90 </a> </div>
91 </div>
92 </div>
93 </div>
94 </div>
95</div>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any 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
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.