<div class="container py-5">
<div class="d-flex gap-3 mb-3 flex-wrap"><span class="d-inline-flex align-items-center gap-1"><span class="rounded" style="width:12px;height:12px;background:#22c55e"></span> Available</span><span class="d-inline-flex align-items-center gap-1"><span class="rounded" style="width:12px;height:12px;background:#f59e0b"></span> Limited</span><span class="d-inline-flex align-items-center gap-1"><span class="rounded" style="width:12px;height:12px;background:#ef4444"></span> Booked</span></div>
<div class="row g-2">
<div class="col text-center p-3 rounded-3" style="background:#dcfce7"><small>Mon</small>
<div class="fw-bold">10</div>
</div>
<div class="col text-center p-3 rounded-3" style="background:#dcfce7"><small>Tue</small>
<div class="fw-bold">11</div>
</div>
<div class="col text-center p-3 rounded-3" style="background:#fef3c7"><small>Wed</small>
<div class="fw-bold">12</div>
</div>
<div class="col text-center p-3 rounded-3" style="background:#fee2e2"><small>Thu</small>
<div class="fw-bold">13</div>
</div>
<div class="col text-center p-3 rounded-3" style="background:#fef3c7"><small>Fri</small>
<div class="fw-bold">14</div>
</div>
<div class="col text-center p-3 rounded-3" style="background:#dcfce7"><small>Sat</small>
<div class="fw-bold">15</div>
</div>
<div class="col text-center p-3 rounded-3" style="background:#dcfce7"><small>Sun</small>
<div class="fw-bold">16</div>
</div>
</div>
</div>