hostcwb.com.br playground - Como fazer boxes com ícones de informação com bootstrap 5.1.3

<div class="container-full mt-3">
    <div class="row g-5 mx-0">
      <div class="col-6 col-md-3 col-lg-3">
        <div class="mt-4 pt-4 border alert-warning border-warning position-relative rounded-3 shadow h-100">
          <div class="position-absolute top-0 start-50 translate-middle">
            <i class="bi bi-wrench-adjustable bg-warning fs-3 p-3 rounded-circle "></i>
          </div>
          <div class="text-center text-dark p-3 fs-1">
            <div class="">
              500
            </div>
            total
          </div>
        </div>
      </div>
      
      <div class="col-6 col-md-3 col-lg-3">
        <div class="mt-4 pt-4 border alert-info border-info position-relative rounded-3 shadow h-100">
          <div class="position-absolute top-0 start-50 translate-middle">
            <i class="bi bi-calendar-date-fill bg-info fs-3 p-3 rounded-circle "></i>
          </div>
          <div class="text-center text-dark p-3 fs-1">
            <div class="">
              500
            </div>
            Calendar
          </div>
        </div>
      </div>

<div class="col-6 col-md-3 col-lg-3">
        <div class="mt-4 pt-4 border alert-dark border-dark position-relative rounded-3 shadow h-100">
          <div class="position-absolute top-0 start-50 translate-middle">
            <i class="bi bi-alarm bg-dark text-white fs-3 p-3 rounded-circle "></i>
          </div>
          <div class="text-center text-dark p-3 fs-1">
            <div class="">
              500
            </div>
            Alarm
          </div>
        </div>
      </div>

<div class="col-6 col-md-3 col-lg-3">
        <div class="mt-4 pt-4 border alert-danger text-danger border-danger position-relative rounded-3 shadow h-100">
          <div class="position-absolute top-0 start-50 translate-middle">
            <i class="bi bi-yin-yang bg-danger text-white fs-3 p-3 rounded-circle "></i>
          </div>
          <div class="text-center p-3 fs-1">
            <div class="">
              500
            </div>
            yang
          </div>
        </div>
      </div>
    </div>
  </div>