## 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"><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"><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"><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"><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"><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"><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

#### Body colors

    <div class="row g-0">
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-body" style="height: 180px"><code class="text-body">.bg-body</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-body-highlight" style="height: 180px"><code class="text-body">.bg-body-highlight</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-body-secondary" style="height: 180px"><code class="text-body">.bg-body-secondary</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-body-tertiary" style="height: 180px"><code class="text-body">.bg-body-tertiary</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-body-quaternary" style="height: 180px"><code class="text-body">.bg-body-quaternary</code></div>
      </div>
    </div>

`.bg-body`
`.bg-body-highlight`
`.bg-body-secondary`
`.bg-body-tertiary`
`.bg-body-quaternary`

#### Subtle colors

    <div class="row g-0">
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-primary-subtle" style="height: 180px"><code class="text-primary-emphasis">.text-primary-emphasis</code><br /><code class="text-primary-emphasis">.bg-primary-subtle</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-secondary-subtle" style="height: 180px"><code class="text-secondary-emphasis">.text-secondary-emphasis</code><br /><code class="text-secondary-emphasis">.bg-secondary-subtle</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-success-subtle" style="height: 180px"><code class="text-success-emphasis">.text-success-emphasis</code><br /><code class="text-success-emphasis">.bg-success-subtle</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-info-subtle" style="height: 180px"><code class="text-info-emphasis">.text-info-emphasis</code><br /><code class="text-info-emphasis">.bg-info-subtle</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-warning-subtle" style="height: 180px"><code class="text-warning-emphasis">.text-warning-emphasis</code><br /><code class="text-warning-emphasis">.bg-warning-subtle</code></div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 bg-danger-subtle" style="height: 180px"><code class="text-danger-emphasis">.text-danger-emphasis</code><br /><code class="text-danger-emphasis">.bg-danger-subtle</code></div>
      </div>
    </div>

`.text-primary-emphasis`
`.bg-primary-subtle`
`.text-secondary-emphasis`
`.bg-secondary-subtle`
`.text-success-emphasis`
`.bg-success-subtle`
`.text-info-emphasis`
`.bg-info-subtle`
`.text-warning-emphasis`
`.bg-warning-subtle`
`.text-danger-emphasis`
`.bg-danger-subtle`

#### 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

#### 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-gray-1100  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-1100  </code><br/><code class="mt-2 d-dark-none text-gray-100">#15181b</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-1000  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-1000  </code><br/><code class="mt-2 d-dark-none text-gray-100">#2b3036</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-900  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-900  </code><br/><code class="mt-2 d-dark-none text-gray-100">#49525d</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-800  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-800  </code><br/><code class="mt-2 d-dark-none text-gray-100">#5a6573</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-700  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-700  </code><br/><code class="mt-2 d-dark-none text-gray-100">#6d7a8a</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-600  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-600  </code><br/><code class="mt-2 d-dark-none text-gray-100">#84909e</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-500  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-500  </code><br/><code class="mt-2 d-dark-none text-gray-100">#9aa3af</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-400  false" style="height: 180px">
          <pre class="text-center"><code class="text-gray-100">.bg-gray-400  </code><br/><code class="mt-2 d-dark-none text-gray-100">#b1b9c2</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-300  false" style="height: 180px">
          <pre class="text-center"><code class="text-body-emphasis">.bg-gray-300  </code><br/><code class="mt-2 d-dark-none text-body-emphasis">#e2e5e9</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-200  border" style="height: 180px">
          <pre class="text-center"><code class="text-body-emphasis">.bg-gray-200  </code><br/><code class="mt-2 d-dark-none text-body-emphasis">#f1f2f4</code></pre>
        </div>
      </div>
      <div class="col-6 col-sm-4 col-lg-3">
        <div class="p-3 d-flex flex-center bg-gray-100  border" style="height: 180px">
          <pre class="text-center"><code class="text-body-emphasis">.bg-gray-100  </code><br/><code class="mt-2 d-dark-none text-body-emphasis">#f6f7f8</code></pre>
        </div>
      </div>
    </div>

    .bg-gray-1100
    #15181b

    .bg-gray-1000
    #2b3036

    .bg-gray-900
    #49525d

    .bg-gray-800
    #5a6573

    .bg-gray-700
    #6d7a8a

    .bg-gray-600
    #84909e

    .bg-gray-500
    #9aa3af

    .bg-gray-400
    #b1b9c2

    .bg-gray-300
    #e2e5e9

    .bg-gray-200
    #f1f2f4

    .bg-gray-100
    #f6f7f8

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize