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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.15.0

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