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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.20.1

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

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
RTL

Change text direction

Support Chat

Toggle support chat

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