Utilities Bootstrap 5Free+ CSS
Bootstrap 5 simple catalog template snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.
2.8k views78 downloads
gosnippets.com/preview/bootstrap-5-simple-catalog-template-snippet
Source Code
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>More Utilities snippets
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.
UtilitiesView →
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.
UtilitiesView →
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.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.