<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- View more in https://hostcwb.com.br/tutoriais/playground/show/como-criar-boxes-center-center-com-o-bootstrap --> <div class="container-full mt-3"> <div class="row g-3 mx-0"> <!-- start bg-info --> <div class="col-6 col-md-4 col-lg-4"> <div class="border border-info position-relative rounded-3 shadow" style="height:250px"> <div class="p-3 m-0 bg-info bg-gradient text-center text-white "> header box </div> <div class="position-absolute top-50 start-50 translate-middle"> text center </div> <div class="position-absolute bottom-0 text-white w-100 p-3 text-center bg-info bg-gradient"> footer box </div> </div> </div> <!-- start bg-danger --> <div class="col-6 col-md-4 col-lg-4"> <div class="border border-danger position-relative rounded-3 shadow" style="height:250px"> <div class="p-3 m-0 bg-danger bg-gradient text-center text-white "> header box </div> <div class="position-absolute top-50 start-50 translate-middle"> text center </div> <div class="position-absolute bottom-0 text-white w-100 p-3 text-center bg-danger bg-gradient"> footer box </div> </div> </div> <!-- start bg-dark --> <div class="col-6 col-md-4 col-lg-4"> <div class="border border-dark position-relative rounded-3 shadow" style="height:250px"> <div class="bg-dark bg-gradient p-3 m-0 text-center text-white "> header box </div> <div class="position-absolute top-50 start-50 translate-middle"> text center </div> <div class=" bg-dark bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> footer box </div> </div> </div> <!-- start bg-success --> <div class="col-6 col-md-4 col-lg-4"> <div class="border border-success position-relative rounded-3 shadow" style="height:250px"> <div class="bg-success bg-gradient p-3 m-0 text-center text-white "> header box </div> <div class="position-absolute top-50 start-50 translate-middle"> text center </div> <div class=" bg-success bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> footer box </div> </div> </div> <!-- start bg-warning --> <div class="col-6 col-md-4 col-lg-4"> <div class="border border-warning position-relative rounded-3 shadow" style="height:250px"> <div class="bg-warning bg-gradient p-3 m-0 text-center text-white "> header box </div> <div class="position-absolute top-50 start-50 translate-middle"> text center </div> <div class=" bg-warning bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> footer box </div> </div> </div> <!-- start bg-secondary --> <div class="col-6 col-md-4 col-lg-4"> <div class="border border-secondary position-relative rounded-3 shadow" style="height:250px"> <div class="bg-secondary bg-gradient p-3 m-0 text-center text-white "> header box </div> <div class="position-absolute top-50 start-50 translate-middle"> text center </div> <div class=" bg-secondary bg-gradient position-absolute bottom-0 text-white w-100 p-3 text-center"> footer box </div> </div> </div> </div> </div>