Loading...

Menu

Content

Components

Utilities

Buy now

Around utilities

Custom Around classes with a purpose to reduce the frequency of highly repetitive declarations.

Around component

Faded background colors

Primary faded background
Secondary background
Success faded background
Danger faded background
Warning faded background
Info faded background
Dark faded background
<!-- Primary faded background -->
<div class="bg-primary bg-opacity-10">...</div>

<!-- Secondary background -->
<div class="bg-secondary">...</div>

<!-- Success faded background -->
<div class="bg-success bg-opacity-10">...</div>

<!-- Danger faded background -->
<div class="bg-danger bg-opacity-10">...</div>

<!-- Warning faded background -->
<div class="bg-warning bg-opacity-10">...</div>

<!-- Info faded background -->
<div class="bg-info bg-opacity-10">...</div>

<!-- Dark faded background -->
<div class="bg-dark bg-opacity-10">...</div>

Translucent image overlay

Primary overlay
Success overlay
Danger overlay
Warning overlay
Info overlay
Dark overlay
<!-- Primary overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Primary overlay
  </div>
</div>

<!-- Success overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-success opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Success overlay
  </div>
</div>

<!-- Danger overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-danger opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Danger overlay
  </div>
</div>

<!-- Warning overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-warning opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Warning overlay
  </div>
</div>

<!-- Info overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-info opacity-70"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Info overlay
  </div>
</div>

<!-- Dark overlay -->
<div class="position-relative bg-size-cover bg-position-center py-5" style="background-image: url(assets/img/landing/corporate/features/03.jpg);">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-60"></span>
  <div class="position-relative fs-lg fw-semibold text-white text-center z-5 py-5">
    Dark overlay
  </div>
</div>

Gradient text

I'm a gradient text

<!-- Gradient text -->
<h2 class="display-4">
  <span class="text-gradient">I'm a gradient text</span>
</h2>

Opacity

Opacity 10% Opacity 20% Opacity 25% Opacity 30% Opacity 40% Opacity 50% Opacity 60% Opacity 70% Opacity 75% Opacity 80% Opacity 90% Opacity 100%
<!-- Opacity -->
<div class="opacity-0">...</div>
<div class="opacity-10">...</div>
<div class="opacity-20">...</div>
<div class="opacity-25">...</div>
<div class="opacity-30">...</div>
<div class="opacity-40">...</div>
<div class="opacity-50">...</div>
<div class="opacity-60">...</div>
<div class="opacity-70">...</div>
<div class="opacity-75">...</div>
<div class="opacity-80">...</div>
<div class="opacity-90">...</div>
<div class="opacity-100">...</div>