<div class="row gx-3">
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-primary text-white" style="height: 100px;">.bg-primary</div>
</div>
span class="token tag"><div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-success text-white" style="height: 100px;">.bg-success</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-danger text-white" style="height: 100px;">.bg-danger</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-warning text-white" style="height: 100px;">.bg-warning</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-info text-white" style="height: 100px;">.bg-info</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-gray-100 border" style="height: 100px;">.bg-gray-100</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-dark text-white" style="height: 100px;">.bg-dark</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-white " style="height: 100px;">.bg-white</div>
</div>
</div><div class="row gx-3">
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-primary-subtle
text-primary-emphasis" style="height: 100px;">.bg-primary-subtle
.text-primary-emphasis
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-success-subtle
text-success-emphasis" style="height: 100px;">.bg-success-subtle
.text-success-emphasis
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-danger-subtle text-danger-emphasis" style="height: 100px;">.bg-danger-subtle
.text-danger-emphasis
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-warning-subtle
text-warning-emphasis" style="height: 100px;">.bg-warning-subtle
.text-warning-emphasis
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-info-subtle text-info-emphasis" style="height: 100px;">.bg-info-subtle
.text-info-emphasis
</div>
</div>
</div><div class="row gx-3">
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-primary-dark text-primary-lighter" style="height: 100px;">.bg-primary-dark
.text-primary-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-success-dark text-success-lighter" style="height: 100px;">.bg-success-dark
.text-success-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-danger-dark text-danger-lighter" style="height: 100px;">.bg-danger-dark
.text-danger-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-warning-dark text-warning-lighter" style="height: 100px;">.bg-warning-dark
.text-warning-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-info-dark text-info-lighter" style="height: 100px;">.bg-info-dark
.text-info-lighter
</div>
</div>
</div><div class="row gx-3">
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-primary-dark text-primary-lighter" style="height: 100px;">.bg-primary-dark
.text-primary-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-success-dark text-success-lighter" style="height: 100px;">.bg-success-dark
.text-success-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-danger-dark text-danger-lighter" style="height: 100px;">.bg-danger-dark
.text-danger-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-warning-dark text-warning-lighter" style="height: 100px;">.bg-warning-dark
.text-warning-lighter
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-info-dark text-info-lighter" style="height: 100px;">.bg-info-dark
.text-info-lighter
</div>
</div>
</div> <div class="row gx-3">
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-primary bg-gradient text-white" style="height: 100px;">.bg-primary
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-success bg-gradient text-white" style="height: 100px;">.bg-success
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-danger bg-gradient text-white" style="height: 100px;">.bg-danger
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-warning bg-gradient text-white" style="height: 100px;">.bg-warning
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-info bg-gradient text-white" style="height: 100px;">.bg-info
.bg-gradient
</div>
</div>
</div><!-- background color -->
<div class="row gx-3">
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-primary bg-gradient text-white" style="height: 100px;">.bg-primary
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-success bg-gradient text-white" style="height: 100px;">.bg-success
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-danger bg-gradient text-white" style="height: 100px;">.bg-danger
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-warning bg-gradient text-white" style="height: 100px;">.bg-warning
.bg-gradient
</div>
</div>
<div class="col-lg-4 col-12">
<div class="p-2 mb-2 bg-info bg-gradient text-white" style="height: 100px;">.bg-info
.bg-gradient
</div>
</div>
</div>