Extend bootstrap 4 with transparent background from bootstrap theme colors

_background-variant-transparent.scss

/**
 * USAGE
 *
 * <div class="bg-light-65"></div>
 * <div class="bg-primary-20"></div>
 *
 * <a href="#" class="btn btn-danger-50">Button too</a>
 * ...
 */

// variables
$opacity: 10; //opacity start value
$opacity_step: 5; //increase opacity by .5


// Mixin
@mixin bg-variant-transparent($parent, $color, $opacity) {
    #{$parent} {
        background: rgba($color, $opacity) !important;
    }
    a#{$parent},
    button#{$parent} {
        @include hover-focus {
            background-color: rgba(darken($color, 10%), $opacity) !important;
        }
    }
}

// Loop
@each $color, $value in $theme-colors {
    @while $opacity < 90 {
        @include bg-variant-transparent(
            ".bg-#{$color}-#{$opacity}",
            $value,
            ($opacity/100)
        );
        $opacity: $opacity + $opacity_step;
    }
}

You should load it after declaring $theme-colors variable, or after importing bootstrap.scss.