Skip to content

Elements:Overlays

Useful colour overlay classes so you can overlay background images or videos.

Basics

Overlays allow you to use background images or content and overlay them with a semi-transparent colour block. Use the class .overlay class or inline per element using the .overlay-inline .

Background image overlays

Background images can be applied quickly & easily using the attribute: data-bg-img="IMAGE-PATH" .

Simple Background Overlay

<div class="p-4 py-lg-8 bg-grey-dark text-center overlay overlay-op-7" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="text-uppercase fw-bold m-0 text-white">
    Simple Background Overlay
  </h4>
</div>

Hover Overlays

You can also use overlays to show hidden content in an overlay when it's hovered.

<a href="./assets/img/projects/project-3.jpg" class="overlay-hover">
  <!-- Wrapper: must have overlay-hover class -->
  <img src="assets/img/projects/project-5-sm.jpg" alt="Project 5" class="img-fluid rounded" />
  <!-- Background shown by default -->
  <span class="overlay-hover-content">
    <!-- Hover content: must have overlay-hover-content class -->
    <i class="fa fa-arrow-circle-right icon-3x text-white"></i> 
    <h5 class="mt-4">
      Fere Natu Pagus Tation Vindico
    </h5>
  </span>
</a>

Overlay Colours

You can control the colour of the overlay using the overlay-COLOUR classes.

Default

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default
  </h4>
</div>

.overlay-white

<div class="p-4 py-lg-5 bg-faded text-center overlay overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-inverse">
    .overlay-white
  </h4>
</div>

.overlay-primary

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-primary
  </h4>
</div>

.overlay-info

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-info
  </h4>
</div>

.overlay-success

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-success
  </h4>
</div>

.overlay-warning

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-warning
  </h4>
</div>

.overlay-danger

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-danger
  </h4>
</div>

.overlay-green

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-green
  </h4>
</div>

.overlay-red

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-red
  </h4>
</div>

.overlay-blue

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-blue
  </h4>
</div>

.overlay-purple

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-purple
  </h4>
</div>

.overlay-pink

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-pink
  </h4>
</div>

.overlay-orange

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-orange
  </h4>
</div>

.overlay-brown

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-brown
  </h4>
</div>

.overlay-slate

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-slate
  </h4>
</div>

.overlay-olive

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-olive
  </h4>
</div>

.overlay-teal

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-teal
  </h4>
</div>

.overlay-charcoal

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-charcoal
  </h4>
</div>

Overlay Opacity

You can control the strength or opacity of the overlay using the overlay-op-(1-9) classes, 1 (0.1) being the weakest and 9 (0.9) being the strongest.

Default: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-1
  </h4>
</div>

Default: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-2
  </h4>
</div>

Default: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-3
  </h4>
</div>

Default: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-4
  </h4>
</div>

Default: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-5
  </h4>
</div>

Default: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-6
  </h4>
</div>

Default: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-7
  </h4>
</div>

Default: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-8
  </h4>
</div>

Default: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-default overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default: .overlay-op-9
  </h4>
</div>

White: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-1
  </h4>
</div>

White: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-2
  </h4>
</div>

White: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-3
  </h4>
</div>

White: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-4
  </h4>
</div>

White: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-5
  </h4>
</div>

White: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-6
  </h4>
</div>

White: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-7
  </h4>
</div>

White: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-8
  </h4>
</div>

White: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-white overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-dark">
    White: .overlay-op-9
  </h4>
</div>

Primary: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-1
  </h4>
</div>

Primary: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-2
  </h4>
</div>

Primary: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-3
  </h4>
</div>

Primary: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-4
  </h4>
</div>

Primary: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-5
  </h4>
</div>

Primary: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-6
  </h4>
</div>

Primary: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-7
  </h4>
</div>

Primary: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-8
  </h4>
</div>

Primary: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-primary overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Primary: .overlay-op-9
  </h4>
</div>

Info: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-1
  </h4>
</div>

Info: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-2
  </h4>
</div>

Info: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-3
  </h4>
</div>

Info: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-4
  </h4>
</div>

Info: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-5
  </h4>
</div>

Info: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-6
  </h4>
</div>

Info: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-7
  </h4>
</div>

Info: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-8
  </h4>
</div>

Info: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-info overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Info: .overlay-op-9
  </h4>
</div>

Success: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-1
  </h4>
</div>

Success: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-2
  </h4>
</div>

Success: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-3
  </h4>
</div>

Success: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-4
  </h4>
</div>

Success: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-5
  </h4>
</div>

Success: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-6
  </h4>
</div>

Success: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-7
  </h4>
</div>

Success: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-8
  </h4>
</div>

Success: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-success overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Success: .overlay-op-9
  </h4>
</div>

Warning: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-1
  </h4>
</div>

Warning: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-2
  </h4>
</div>

Warning: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-3
  </h4>
</div>

Warning: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-4
  </h4>
</div>

Warning: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-5
  </h4>
</div>

Warning: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-6
  </h4>
</div>

Warning: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-7
  </h4>
</div>

Warning: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-8
  </h4>
</div>

Warning: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-warning overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Warning: .overlay-op-9
  </h4>
</div>

Danger: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-1
  </h4>
</div>

Danger: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-2
  </h4>
</div>

Danger: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-3
  </h4>
</div>

Danger: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-4
  </h4>
</div>

Danger: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-5
  </h4>
</div>

Danger: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-6
  </h4>
</div>

Danger: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-7
  </h4>
</div>

Danger: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-8
  </h4>
</div>

Danger: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-danger overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Danger: .overlay-op-9
  </h4>
</div>

Green: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-1
  </h4>
</div>

Green: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-2
  </h4>
</div>

Green: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-3
  </h4>
</div>

Green: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-4
  </h4>
</div>

Green: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-5
  </h4>
</div>

Green: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-6
  </h4>
</div>

Green: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-7
  </h4>
</div>

Green: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-8
  </h4>
</div>

Green: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-green overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Green: .overlay-op-9
  </h4>
</div>

Red: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-1
  </h4>
</div>

Red: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-2
  </h4>
</div>

Red: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-3
  </h4>
</div>

Red: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-4
  </h4>
</div>

Red: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-5
  </h4>
</div>

Red: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-6
  </h4>
</div>

Red: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-7
  </h4>
</div>

Red: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-8
  </h4>
</div>

Red: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-red overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Red: .overlay-op-9
  </h4>
</div>

Blue: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-1
  </h4>
</div>

Blue: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-2
  </h4>
</div>

Blue: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-3
  </h4>
</div>

Blue: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-4
  </h4>
</div>

Blue: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-5
  </h4>
</div>

Blue: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-6
  </h4>
</div>

Blue: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-7
  </h4>
</div>

Blue: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-8
  </h4>
</div>

Blue: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-blue overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Blue: .overlay-op-9
  </h4>
</div>

Purple: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-1
  </h4>
</div>

Purple: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-2
  </h4>
</div>

Purple: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-3
  </h4>
</div>

Purple: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-4
  </h4>
</div>

Purple: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-5
  </h4>
</div>

Purple: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-6
  </h4>
</div>

Purple: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-7
  </h4>
</div>

Purple: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-8
  </h4>
</div>

Purple: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-purple overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Purple: .overlay-op-9
  </h4>
</div>

Pink: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-1
  </h4>
</div>

Pink: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-2
  </h4>
</div>

Pink: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-3
  </h4>
</div>

Pink: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-4
  </h4>
</div>

Pink: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-5
  </h4>
</div>

Pink: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-6
  </h4>
</div>

Pink: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-7
  </h4>
</div>

Pink: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-8
  </h4>
</div>

Pink: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-pink overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Pink: .overlay-op-9
  </h4>
</div>

Orange: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-1
  </h4>
</div>

Orange: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-2
  </h4>
</div>

Orange: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-3
  </h4>
</div>

Orange: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-4
  </h4>
</div>

Orange: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-5
  </h4>
</div>

Orange: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-6
  </h4>
</div>

Orange: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-7
  </h4>
</div>

Orange: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-8
  </h4>
</div>

Orange: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-orange overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Orange: .overlay-op-9
  </h4>
</div>

Brown: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-1
  </h4>
</div>

Brown: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-2
  </h4>
</div>

Brown: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-3
  </h4>
</div>

Brown: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-4
  </h4>
</div>

Brown: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-5
  </h4>
</div>

Brown: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-6
  </h4>
</div>

Brown: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-7
  </h4>
</div>

Brown: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-8
  </h4>
</div>

Brown: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-brown overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Brown: .overlay-op-9
  </h4>
</div>

Slate: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-1
  </h4>
</div>

Slate: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-2
  </h4>
</div>

Slate: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-3
  </h4>
</div>

Slate: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-4
  </h4>
</div>

Slate: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-5
  </h4>
</div>

Slate: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-6
  </h4>
</div>

Slate: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-7
  </h4>
</div>

Slate: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-8
  </h4>
</div>

Slate: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-slate overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Slate: .overlay-op-9
  </h4>
</div>

Olive: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-1
  </h4>
</div>

Olive: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-2
  </h4>
</div>

Olive: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-3
  </h4>
</div>

Olive: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-4
  </h4>
</div>

Olive: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-5
  </h4>
</div>

Olive: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-6
  </h4>
</div>

Olive: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-7
  </h4>
</div>

Olive: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-8
  </h4>
</div>

Olive: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-olive overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Olive: .overlay-op-9
  </h4>
</div>

Teal: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-1
  </h4>
</div>

Teal: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-2
  </h4>
</div>

Teal: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-3
  </h4>
</div>

Teal: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-4
  </h4>
</div>

Teal: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-5
  </h4>
</div>

Teal: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-6
  </h4>
</div>

Teal: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-7
  </h4>
</div>

Teal: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-8
  </h4>
</div>

Teal: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-teal overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Teal: .overlay-op-9
  </h4>
</div>

Charcoal: .overlay-op-1

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-1 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-1
  </h4>
</div>

Charcoal: .overlay-op-2

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-2 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-2
  </h4>
</div>

Charcoal: .overlay-op-3

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-3 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-3
  </h4>
</div>

Charcoal: .overlay-op-4

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-4 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-4
  </h4>
</div>

Charcoal: .overlay-op-5

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-5 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-5
  </h4>
</div>

Charcoal: .overlay-op-6

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-6 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-6
  </h4>
</div>

Charcoal: .overlay-op-7

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-7 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-7
  </h4>
</div>

Charcoal: .overlay-op-8

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-8
  </h4>
</div>

Charcoal: .overlay-op-9

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-charcoal overlay-op-9 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Charcoal: .overlay-op-9
  </h4>
</div>

Overlay Gradients

You can add a gradient effect to the overlay using the overlay-gradient or overlay-gradient-flip classes.

You can control the start & end colour opacity using CSS variables:
--bs-overlay-bg-gradient-start-opacity - default 0.1
--bs-overlay-bg-gradient-end-opacity - default 0.9
Example style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;"

Default+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default+overlay-gradient
  </h4>
</div>

.overlay-white+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-faded text-center overlay overlay-gradient overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-inverse">
    .overlay-white+overlay-gradient
  </h4>
</div>

.overlay-primary+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-primary+overlay-gradient
  </h4>
</div>

.overlay-info+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-info+overlay-gradient
  </h4>
</div>

.overlay-success+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-success+overlay-gradient
  </h4>
</div>

.overlay-warning+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-warning+overlay-gradient
  </h4>
</div>

.overlay-danger+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-danger+overlay-gradient
  </h4>
</div>

.overlay-green+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-green+overlay-gradient
  </h4>
</div>

.overlay-red+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-red+overlay-gradient
  </h4>
</div>

.overlay-blue+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-blue+overlay-gradient
  </h4>
</div>

.overlay-purple+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-purple+overlay-gradient
  </h4>
</div>

.overlay-pink+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-pink+overlay-gradient
  </h4>
</div>

.overlay-orange+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-orange+overlay-gradient
  </h4>
</div>

.overlay-brown+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-brown+overlay-gradient
  </h4>
</div>

.overlay-slate+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-slate+overlay-gradient
  </h4>
</div>

.overlay-olive+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-olive+overlay-gradient
  </h4>
</div>

.overlay-teal+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-teal+overlay-gradient
  </h4>
</div>

.overlay-charcoal+overlay-gradient

<div style="--bs-overlay-bg-gradient-start-opacity: 0.3; --bs-overlay-bg-gradient-end-opacity: 0.6;" class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-charcoal+overlay-gradient
  </h4>
</div>

Default+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    Default+overlay-gradient-flip
  </h4>
</div>

.overlay-white+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-faded text-center overlay overlay-gradient-flip overlay-white overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-inverse">
    .overlay-white+overlay-gradient-flip
  </h4>
</div>

.overlay-primary+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-primary overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-primary+overlay-gradient-flip
  </h4>
</div>

.overlay-info+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-info overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-info+overlay-gradient-flip
  </h4>
</div>

.overlay-success+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-success overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-success+overlay-gradient-flip
  </h4>
</div>

.overlay-warning+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-warning overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-warning+overlay-gradient-flip
  </h4>
</div>

.overlay-danger+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-danger overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-danger+overlay-gradient-flip
  </h4>
</div>

.overlay-green+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-green overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-green+overlay-gradient-flip
  </h4>
</div>

.overlay-red+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-red overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-red+overlay-gradient-flip
  </h4>
</div>

.overlay-blue+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-blue overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-blue+overlay-gradient-flip
  </h4>
</div>

.overlay-purple+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-purple overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-purple+overlay-gradient-flip
  </h4>
</div>

.overlay-pink+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-pink overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-pink+overlay-gradient-flip
  </h4>
</div>

.overlay-orange+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-orange overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-orange+overlay-gradient-flip
  </h4>
</div>

.overlay-brown+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-brown overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-brown+overlay-gradient-flip
  </h4>
</div>

.overlay-slate+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-slate overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-slate+overlay-gradient-flip
  </h4>
</div>

.overlay-olive+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-olive overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-olive+overlay-gradient-flip
  </h4>
</div>

.overlay-teal+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-teal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-teal+overlay-gradient-flip
  </h4>
</div>

.overlay-charcoal+overlay-gradient-flip

<div class="p-4 py-lg-5 bg-grey-dark text-center overlay overlay-gradient-flip overlay-charcoal overlay-op-8 mb-3" data-bg-img="./assets/img/backgrounds/ysvazfxdz_8-alvaro-serrano.jpg">
  <h4 class="fw-bold m-0 text-white">
    .overlay-charcoal+overlay-gradient-flip
  </h4>
</div>

Awesome Features

Beginner + developer friendly
Free Lifetime Upgrades
Fully Responsive
About Us

Making the web a prettier place one template at a time! We make beautiful, quality, responsive Drupal & web templates!

Find out more
Contact Us

019223 8092344

info@themelize.me

Sunshine House, Sunville. SUN12 8LU.

Colour Options

AppStrap comes with 11 pre-defined colour options which are shown below.

You can easily switch colours doing one of the following:

  1. via the config colourScheme option
  2. or via ./src/scss/_variables.scss defining a preset colour or by defining your own.


Cookies are NOT enabled so colour selection is not persistent.

To main homepage

To admin homepage

To intro page