Colored responsive boxes boostrap 5.1.3

Utilities Bootstrap 5Free+ CSS

Colored responsive boxes boostrap 5.1.3: a hand-crafted, open-source Bootstrap 5 utility. HTML & CSS included, ready to copy.

2.8k views40 downloads4 years ago

gosnippets.com/preview/colored-responsive-boxes-boostrap-5.1.3

Source Code

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>

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.

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 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>