I am working on a dashboard project using Bootstrap 5.
The horizontal gap (gx) is not functioning as expected.Could there be a reason why the gx class isn't applying the desired horizontal gap in this Bootstrap-based code?
<div class="container-fluid"><div class="row"><div class="col-xl-9"><div class="row g-3"><div class="col-6 col-md-3 d-flex align-items-center bg-white p-3"><div class="stats-icon me-4 bg-purple"><i class="bi bi-eye-fill text-white fs-3"></i></div><div class=""><h6 class="fs-7 text-muted m-0"> Profile</h6><h6 class="fw-b purecounter pt-2 m-0" >0</h6></div></div><div class="col-6 col-md-3 d-flex align-items-center bg-white p-3"><div class="stats-icon me-4 bg-blue"><i class="bi bi-person-fill text-white fs-3"></i></div><div class=""><h6 class="fs-7 text-muted m-0"> Report</h6><h6 class="fw-b purecounter pt-2 m-0" >0</h6></div></div><div class="col-6 col-md-3 d-flex align-items-center bg-white p-3"><div class="stats-icon me-4 bg-red"><i class="bi bi-eye-fill text-white fs-3"></i></div><div class=""><h6 class="fs-7 text-muted m-0"> Status</h6><h6 class="fw-b purecounter pt-2 m-0" >0</h6></div></div><div class="col-6 col-md-3 d-flex align-items-center bg-white p-3"><div class="stats-icon me-4 bg-green"><i class="bi bi-eye-fill text-white fs-3"></i></div><div class=""><h6 class="fs-7 text-muted m-0"> Income</h6><h6 class="fw-b purecounter pt-2 m-0" >0</h6></div></div></div></div></div></div>