Background

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Background on Bootstrap

Solid colors

<div class="row g-0">
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-primary  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-primary  </code><p class="mt-2 text-white">#3874ff</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-secondary  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-secondary  </code><p class="mt-2 text-white">#49525d</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-success  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-success  </code><p class="mt-2 text-white">#25b003</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-info  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-info  </code><p class="mt-2 text-white">#0097eb</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-warning  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-warning  </code><p class="mt-2 text-white">#e5780b</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-danger  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-danger  </code><p class="mt-2 text-white">#ec1f00</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-light  border border-300" style="height: 180px"><pre class="text-center"><br><code class="text-black">.bg-light  </code><p class="mt-2 text-black">#f6f7f8</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-dark  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-dark  </code><p class="mt-2 text-white">#15181b</p></pre>
    </div>
  </div>
</div>

.bg-primary

#3874ff


.bg-secondary

#49525d


.bg-success

#25b003


.bg-info

#0097eb


.bg-warning

#e5780b


.bg-danger

#ec1f00


.bg-light

#f6f7f8


.bg-dark

#15181b

Grays

<div class="row g-0">
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-black  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-black  </code><p class="mt-2 text-white">#000</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-1100  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-1100  </code><p class="mt-2 text-white">#15181b</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-1000  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-1000  </code><p class="mt-2 text-white">#2b3036</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-900  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-900  </code><p class="mt-2 text-white">#49525d</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-800  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-800  </code><p class="mt-2 text-white">#5a6573</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-700  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-700  </code><p class="mt-2 text-white">#6d7a8a</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-600  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-600  </code><p class="mt-2 text-white">#84909e</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-500  false" style="height: 180px"><pre class="text-center"><br><code class="text-white">.bg-500  </code><p class="mt-2 text-white">#9aa3af</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-400  false" style="height: 180px"><pre class="text-center"><br><code class="text-black">.bg-400  </code><p class="mt-2 text-black">#b1b9c2</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-300  false" style="height: 180px"><pre class="text-center"><br><code class="text-black">.bg-300  </code><p class="mt-2 text-black">#e2e5e9</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-200  border border-300" style="height: 180px"><pre class="text-center"><br><code class="text-black">.bg-200  </code><p class="mt-2 text-black">#f1f2f4</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-100  border border-300" style="height: 180px"><pre class="text-center"><br><code class="text-black">.bg-100  </code><p class="mt-2 text-black">#f6f7f8</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-soft  border border-300" style="height: 180px"><pre class="text-center"><br><code class="text-black">.bg-soft  </code><p class="mt-2 text-black">#fcfcfd</p></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-white  border border-300" style="height: 180px"><pre class="text-center"><br><code class="text-black">.bg-white  </code><p class="mt-2 text-black">#fff</p></pre>
    </div>
  </div>
</div>

.bg-black

#000


.bg-1100

#15181b


.bg-1000

#2b3036


.bg-900

#49525d


.bg-800

#5a6573


.bg-700

#6d7a8a


.bg-600

#84909e


.bg-500

#9aa3af


.bg-400

#b1b9c2


.bg-300

#e2e5e9


.bg-200

#f1f2f4


.bg-100

#f6f7f8


.bg-soft

#fcfcfd


.bg-white

#fff

Gradients

<div class="row g-0">
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-primary bg-gradient false" style="height: 180px"><pre class="text-center"><code class="text-white">.bg-gradient</code><br><code class="text-white">.bg-primary  </code></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-secondary bg-gradient false" style="height: 180px"><pre class="text-center"><code class="text-white">.bg-gradient</code><br><code class="text-white">.bg-secondary  </code></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-success bg-gradient false" style="height: 180px"><pre class="text-center"><code class="text-white">.bg-gradient</code><br><code class="text-white">.bg-success  </code></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-info bg-gradient false" style="height: 180px"><pre class="text-center"><code class="text-white">.bg-gradient</code><br><code class="text-white">.bg-info  </code></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-warning bg-gradient false" style="height: 180px"><pre class="text-center"><code class="text-white">.bg-gradient</code><br><code class="text-white">.bg-warning  </code></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-danger bg-gradient false" style="height: 180px"><pre class="text-center"><code class="text-white">.bg-gradient</code><br><code class="text-white">.bg-danger  </code></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-light bg-gradient border border-300" style="height: 180px"><pre class="text-center"><code class="text-black">.bg-gradient</code><br><code class="text-black">.bg-light  </code></pre>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-3">
    <div class="p-3 d-flex flex-center bg-dark bg-gradient false" style="height: 180px"><pre class="text-center"><code class="text-white">.bg-gradient</code><br><code class="text-white">.bg-dark  </code></pre>
    </div>
  </div>
</div>
.bg-gradient
.bg-primary
.bg-gradient
.bg-secondary
.bg-gradient
.bg-success
.bg-gradient
.bg-info
.bg-gradient
.bg-warning
.bg-gradient
.bg-danger
.bg-gradient
.bg-light
.bg-gradient
.bg-dark