Colored boxes boostrap 5.1.3

1<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
2<!--
3View more in https://hostcwb.com.br/tutoriais/playground/show/como-criar-boxes-center-center-com-o-bootstrap
4-->
5<div class="container-full mt-3">
6    <div class="row g-3 mx-0">
7      <!-- start bg-info -->
8      <div class="col-6 col-md-4 col-lg-4">
9        <div class="border border-info position-relative rounded-3 shadow" style="height:250px">
10          <div class="p-3 m-0 bg-info bg-gradient text-center text-white ">
11            header box
12          </div>
13          <div class="position-absolute top-50 start-50 translate-middle">
14            text center
15          </div>
16          <div class="position-absolute bottom-0 text-white w-100 p-3 text-center  bg-info bg-gradient">
17            footer box
18          </div>
19        </div>
20      </div>
21      <!-- start bg-danger -->
22      <div class="col-6 col-md-4 col-lg-4">
23        <div class="border border-danger position-relative rounded-3 shadow" style="height:250px">
24          <div class="p-3 m-0 bg-danger bg-gradient text-center text-white ">
25            header box
26          </div>
27          <div class="position-absolute top-50 start-50 translate-middle">
28            text center
29          </div>
30          <div class="position-absolute bottom-0 text-white w-100 p-3 text-center  bg-danger bg-gradient">
31            footer box
32          </div>
33        </div>
34      </div>
35      <!-- start bg-dark -->
36      <div class="col-6 col-md-4 col-lg-4">
37        <div class="border border-dark position-relative rounded-3 shadow" style="height:250px">
38          <div class="bg-dark bg-gradient p-3 m-0 text-center text-white ">
39            header box
40          </div>
41          <div class="position-absolute top-50 start-50 translate-middle">
42            text center
43          </div>
44          <div class="  bg-dark bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center">
45            footer box
46          </div>
47        </div>
48      </div>
49      <!-- start bg-success -->
50      <div class="col-6 col-md-4 col-lg-4">
51        <div class="border border-success position-relative rounded-3 shadow" style="height:250px">
52          <div class="bg-success bg-gradient p-3 m-0 text-center text-white ">
53            header box
54          </div>
55          <div class="position-absolute top-50 start-50 translate-middle">
56            text center
57          </div>
58          <div class="  bg-success bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center">
59            footer box
60          </div>
61        </div>
62      </div>
63      <!-- start bg-warning -->
64      <div class="col-6 col-md-4 col-lg-4">
65        <div class="border border-warning position-relative rounded-3 shadow" style="height:250px">
66          <div class="bg-warning bg-gradient p-3 m-0 text-center text-white ">
67            header box
68          </div>
69          <div class="position-absolute top-50 start-50 translate-middle">
70            text center
71          </div>
72          <div class="  bg-warning bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center">
73            footer box
74          </div>
75        </div>
76      </div>
77      <!-- start bg-secondary -->
78      <div class="col-6 col-md-4 col-lg-4">
79        <div class="border border-secondary position-relative rounded-3 shadow" style="height:250px">
80          <div class="bg-secondary bg-gradient p-3 m-0 text-center text-white ">
81            header box
82          </div>
83          <div class="position-absolute top-50 start-50 translate-middle">
84            text center
85          </div>
86          <div class="  bg-secondary bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center">
87            footer box
88          </div>
89        </div>
90      </div>
91    </div>
92  </div>