Colored responsive boxes boostrap 5.1.3: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.
1<!DOCTYPE html>
2<html lang="pt-br" dir="ltr">
3
4<head>
5 <meta charset="utf-8">
6 <title></title>
7 <link href="css/bootstrap.min.css" rel="stylesheet">
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
9 <script src="scripts/bootstrap.bundle.min.js"></script>
10
11</head>
12<!-- by https://www.codesnippets.dev.br/post/boxes-responsivos-com-icone-e-bootstrap -->
13<body>
14 <div class="container mt-3 pt-3 bg-light">
15 <div class="row g-3 pb-3">
16 <div class="col-6 col-lg-4">
17 <div class="text-center px-5 h-100 bg-white shadow rounded">
18 <div class="py-4">
19 <strong>title card here</strong>
20 </div>
21 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
22 <i class="align-self-center bi bi-house-heart text-white"></i>
23 </div>
24 <div class="pb-3">
25 typesetting, remaining essentially unchanged.
26 </div>
27 </div>
28 </div>
29
30 <div class="col-6 col-lg-4">
31 <div class="text-center px-5 h-100 bg-white shadow rounded">
32 <div class="py-4">
33 <strong>title card here</strong>
34 </div>
35 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
36 <i class="align-self-center bi bi-file-code text-white"></i>
37 </div>
38 <div class="pb-3">
39 typesetting, remaining essentially unchanged.
40 </div>
41 </div>
42 </div>
43
44 <div class="col-6 col-lg-4">
45 <div class="text-center px-5 h-100 bg-white shadow rounded">
46 <div class="py-4">
47 <strong>title card here</strong>
48 </div>
49 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
50 <i class="align-self-center bi bi-file-pdf text-white"></i>
51 </div>
52 <div class="pb-3">
53 typesetting, remaining essentially unchanged.
54 </div>
55 </div>
56 </div>
57
58 <div class="col-6 col-lg-4">
59 <div class="text-center px-5 h-100 bg-white shadow rounded">
60 <div class="py-4">
61 <strong>title card here</strong>
62 </div>
63 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle">
64 <i class="align-self-center bi bi-box-fill text-white"></i>
65 </div>
66 <div class="pb-3">
67 typesetting, remaining essentially unchanged.
68 </div>
69 </div>
70 </div>
71
72 <div class="col-6 col-lg-4">
73 <div class="text-center px-5 h-100 bg-white shadow rounded">
74 <div class="py-4">
75 <strong>title card here</strong>
76 </div>
77 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle bg-warning">
78 <i class="align-self-center bi-calendar2-day text-white"></i>
79 </div>
80 <div class="pb-3">
81 typesetting, remaining essentially unchanged.
82 </div>
83 </div>
84 </div>
85
86 <div class="col-6 col-lg-4">
87 <div class="text-center px-5 h-100 bg-white shadow rounded">
88 <div class="py-4">
89 <strong>title card here</strong>
90 </div>
91 <div class="d-flex justify-content-center custom-icon mx-auto rounded-circle bg-info">
92 <i class="align-self-center bi bi-cart-plus text-white"></i>
93 </div>
94 <div class="pb-3">
95 typesetting, remaining essentially unchanged. typesetting, remaining essentially unchanged.
96 </div>
97 </div>
98 </div>
99
100 </div>
101 </div>
102
103</body>
104
105</html>
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.