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><br/><code class="mt-2 d-dark-none text-white">#3874ff</code></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><br/><code class="mt-2 d-dark-none text-white">#49525d</code></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><br/><code class="mt-2 d-dark-none text-white">#25b003</code></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><br/><code class="mt-2 d-dark-none text-white">#0097eb</code></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><br/><code class="mt-2 d-dark-none text-white">#e5780b</code></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><br/><code class="mt-2 d-dark-none text-white">#ec1f00</code></pre>
    </div>
  </div>
</div>

.bg-primary  
#3874ff

.bg-secondary  
#49525d

.bg-success  
#25b003

.bg-info  
#0097eb

.bg-warning  
#e5780b

.bg-danger  
#ec1f00

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><br/><code class="mt-2 d-dark-none text-white">#000</code></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><br/><code class="mt-2 d-dark-none text-white">#15181b</code></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><br/><code class="mt-2 d-dark-none text-white">#2b3036</code></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><br/><code class="mt-2 d-dark-none text-white">#49525d</code></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><br/><code class="mt-2 d-dark-none text-white">#5a6573</code></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><br/><code class="mt-2 d-dark-none text-white">#6d7a8a</code></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><br/><code class="mt-2 d-dark-none text-white">#84909e</code></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><br/><code class="mt-2 d-dark-none text-white">#9aa3af</code></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><br/><code class="mt-2 d-dark-none text-black">#b1b9c2</code></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><br/><code class="mt-2 d-dark-none text-black">#e2e5e9</code></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><br/><code class="mt-2 d-dark-none text-black">#f1f2f4</code></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><br/><code class="mt-2 d-dark-none text-black">#f6f7f8</code></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><br/><code class="mt-2 d-dark-none text-black">#fcfcfd</code></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><br/><code class="mt-2 d-dark-none text-black">#fff</code></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><br/></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><br/></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><br/></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><br/></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><br/></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><br/></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
On this page
Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize