Buttons Bootstrap 5Free+ CSS+ JS
Add a button to your UI with Bootstrap 5 Features catalog with use-cases snippet. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
3.5k views33 downloads
gosnippets.com/preview/bootstrap-5-features-catalog-with-use-cases-snippet
Source Code
1<div class="contain">
2 <div class="row">
3 <div class="col-lg-7 p-0 mb-lg-0 mb-3">
4 <div class="card1 pb-0">
5 <div class="row pt-3">
6 <div class="col-lg-4 col-md-6 pb-5">
7 <div class="d-flex"> <span class="fas fa-tasks px-3 py-1"></span>
8 <div class="d-flex flex-column">
9 <p class="fw-bold">Tasks</p>
10 <p class="text-muted">Customize the way you manage work</p>
11 </div>
12 </div>
13 </div>
14 <div class="col-lg-4 col-md-6 pb-5">
15 <div class="d-flex"> <span class="far fa-file-alt px-3 py-1"></span>
16 <div class="d-flex flex-column">
17 <p class="fw-bold">Docs</p>
18 <p class="text-muted">Build docus, wiki's & knowledge bases.</p>
19 </div>
20 </div>
21 </div>
22 <div class="col-lg-4 col-md-6 pb-5">
23 <div class="d-flex"> <span class="fas fa-trophy px-3 py-1"></span>
24 <div class="d-flex flex-column">
25 <p class="fw-bold">Goals</p>
26 <p class="text-muted">Monitor and manage your strategy</p>
27 </div>
28 </div>
29 </div>
30 <div class="col-lg-4 col-md-6 pb-5">
31 <div class="d-flex"> <span class="fas fa-cogs px-3 py-1"></span>
32 <div class="d-flex flex-column">
33 <p class="fw-bold">integrations</p>
34 <p class="text-muted">Connect the platforms you use into one place</p>
35 </div>
36 </div>
37 </div>
38 <div class="col-lg-4 col-md-6 pb-5">
39 <div class="d-flex"> <span class="fab fa-app-store px-3 py-1"></span>
40 <div class="d-flex flex-column">
41 <p class="fw-bold">Apps</p>
42 <p class="text-muted">Download Click onto any device.</p>
43 </div>
44 </div>
45 </div>
46 <div class="col-lg-4 col-md-6 pb-5">
47 <div class="d-flex"> <span class="fas fa-download px-3 py-1"></span>
48 <div class="d-flex flex-column">
49 <p class="fw-bold">Import</p>
50 <p class="text-muted">Bring any existing projects into ClickUp.</p>
51 </div>
52 </div>
53 </div>
54 <div class="px-4 mb-3">
55 <div class="btn btn-primary fw-bold"> SEE ALL FEATURES <span class="fas fa-angle-double-right ps-1"></span> </div>
56 </div>
57 </div>
58 </div>
59 </div>
60 <div class="col-lg-5 p-0">
61 <div class="card2 px-4">
62 <div class="d-flex justify-content-between align-items-center mb-2">
63 <p class="fw-bold">Use Cases</p> <span class="btn btn-secondary fw-600 ">SEE MORE <span class="fas fa-angle-double-right ps-1"></span></span>
64 </div>
65 <div class="row">
66 <div class="col-md-6">
67 <div class="card shadow-sm">
68 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Development</span> </div>
69 </div>
70 </div>
71 <div class="col-md-6">
72 <div class="card shadow-sm">
73 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Marketing</span> </div>
74 </div>
75 </div>
76 <div class="col-md-6">
77 <div class="card shadow-sm">
78 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Project Management</span> </div>
79 </div>
80 </div>
81 <div class="col-md-6">
82 <div class="card shadow-sm">
83 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Enterprise</span> </div>
84 </div>
85 </div>
86 <div class="col-md-6">
87 <div class="card shadow-sm">
88 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Remote work</span> </div>
89 </div>
90 </div>
91 <div class="col-md-6">
92 <div class="card shadow-sm">
93 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Sales</span> </div>
94 </div>
95 </div>
96 <div class="col-md-6">
97 <div class="card shadow-sm">
98 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Desgin</span> </div>
99 </div>
100 </div>
101 <div class="col-md-6">
102 <div class="card shadow-sm">
103 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Human Resources</span> </div>
104 </div>
105 </div>
106 <div class="col-md-6">
107 <div class="card shadow-sm">
108 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Finance</span> </div>
109 </div>
110 </div>
111 <div class="col-md-6">
112 <div class="card shadow-sm">
113 <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Business Operations</span> </div>
114 </div>
115 </div>
116 </div>
117 </div>
118 </div>
119 </div>
120</div>More Buttons snippets
Pure CSS Neon Button
Add a button to your UI with Pure CSS Neon Button. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
ButtonsView →
Firework Animation on Button Click
Firework Animation on Button Click — a free Bootstrap 5 button snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
ButtonsView →
Pure CSS Pulsing Button ripple effect animation
Pure CSS Pulsing Button ripple effect animation: a hand-crafted, open-source Bootstrap 5 button. HTML & CSS included, ready to copy.
ButtonsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.