Utilities Bootstrap 5Free+ CSS
Add a utility to your UI with Boxes and icons - Bootstrap 5.1.3. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
3.0k views42 downloads
gosnippets.com/preview/boxes-and-icons---bootstrap-5.1.3
Source Code
1
2 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
3 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
4
5 <!-- by https://hostcwb.com.br/tutoriais/post/como-criar-box-shadow-com-icones-utilizando-bootstrap -->
6
7 <div class="container-full mt-3">
8 <div class="row g-3 mx-0">
9
10 <div class="col-6 col-md-4 col-lg-4">
11 <div class=" bg-light rounded-3 shadow h-100 px-1">
12 <i class="float-end bi bi-star-fill text-info"></i>
13 <span class="d-block text-center"><i class="bigIcon bi bi-person-hearts"></i></span>
14 <span class="d-block text-center p-2 text-info">Teste com ícone de pessoa...</span>
15 </div>
16 </div>
17
18 <div class="col-6 col-md-4 col-lg-4">
19 <div class="rounded-3 shadow h-100 px-1">
20 <i class="float-end bi bi-star-fill text-secondary"></i>
21 <span class="d-block text-center"><i class="bigIcon bi bi-server"></i></span>
22 <span class="d-block text-center p-2 text-secondary">database info ...</span>
23 </div>
24 </div>
25
26 <div class="col-6 col-md-4 col-lg-4">
27 <div class="rounded-3 shadow h-100 px-1">
28 <i class="float-end bi bi-star-fill text-success"></i>
29 <span class="d-block text-center"><i class="bigIcon bi bi-star"></i></span>
30 <span class="d-block text-center p-2 text-success">star info ...</span>
31 </div>
32 </div>
33
34 <div class="col-6 col-md-4 col-lg-4">
35 <div class="rounded-3 shadow h-100 px-1">
36 <i class="float-end bi bi-star-fill text-success"></i>
37 <span class="d-block text-center"><i class="bigIcon bi bi-2-circle-fill"></i></span>
38 <span class="d-block text-center p-2 text-success">message info ...</span>
39 </div>
40 </div>
41
42 <div class="col-6 col-md-4 col-lg-4">
43 <div class="rounded-3 shadow h-100 px-1">
44 <i class="float-end bi bi-star-fill text-danger"></i>
45 <span class="d-block text-center"><i class="bigIcon bi bi-box-seam-fill"></i></span>
46 <span class="d-block text-center p-2 text-danger">box info ...</span>
47 </div>
48 </div>
49
50 <div class="col-6 col-md-4 col-lg-4">
51 <div class="rounded-3 shadow h-100 px-1">
52 <i class="float-end bi bi-star-fill text-success"></i>
53 <span class="d-block text-center"><i class="bigIcon bi bi-camera-fill"></i></span>
54 <span class="d-block text-center p-2 text-success">camera info ...</span>
55 </div>
56 </div>
57
58 </div>
59 </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.