Background Color

Utility classes for adjusting background colors.

Background Color Opacity

To change the background color opacity, override custom classes. These should be used alongside the basic background color classes.

View in new window for full preview

        
          <div class="d-flex gap-1">
      <div class="p-3 bg-secondary bg-opacity-5">5%</div>
      <div class="p-3 bg-secondary bg-opacity-10">10%</div>
      <div class="p-3 bg-secondary bg-opacity-15">15%</div>
      <div class="p-3 bg-secondary bg-opacity-20">20%</div>
      <div class="p-3 bg-secondary bg-opacity-25">25%</div>
      <div class="p-3 bg-secondary bg-opacity-30">30%</div>
      <div class="p-3 bg-secondary bg-opacity-35">35%</div>
      <div class="p-3 bg-secondary bg-opacity-40">40%</div>
      <div class="p-3 bg-secondary bg-opacity-45">45%</div>
      <div class="p-3 bg-secondary bg-opacity-50">50%</div>
      <div class="p-3 bg-secondary bg-opacity-55">55%</div>
      <div class="p-3 bg-secondary bg-opacity-60">60%</div>
      <div class="p-3 bg-secondary bg-opacity-65">65%</div>
      <div class="p-3 bg-secondary bg-opacity-70">70%</div>
      <div class="p-3 bg-secondary bg-opacity-75">75%</div>
      <div class="p-3 bg-secondary bg-opacity-80">80%</div>
      <div class="p-3 bg-secondary bg-opacity-85">85%</div>
      <div class="p-3 bg-secondary bg-opacity-90">90%</div>
      <div class="p-3 bg-secondary bg-opacity-95">95%</div>
    </div>

Supported Classes

This is a list of background opacity utility classes.

.bg-opacity-5 - 5%
.bg-opacity-10 - 10%
.bg-opacity-15 - 15%
.bg-opacity-20 - 20%
.bg-opacity-25 - 25%
.bg-opacity-30 - 30%
.bg-opacity-35 - 35%
.bg-opacity-40 - 40%
.bg-opacity-45 - 45%
.bg-opacity-50 - 50%
.bg-opacity-55 - 55%
.bg-opacity-60 - 60%
.bg-opacity-65 - 65%
.bg-opacity-70 - 70%
.bg-opacity-75 - 75%
.bg-opacity-80 - 80%
.bg-opacity-85 - 85%
.bg-opacity-90 - 90%
.bg-opacity-95 - 95%