View on GitHub

Growl

Use the Growl plugin to turn any Bootstrap alert into a macOS style notification. Growls are fixed to the top right of your viewport and can be dismissed, just like normal Bootstrap alerts.

On this page

Examples

Well done!

You successfully read this important alert message.

html

<div class="growl growl-static">
  <div class="alert alert-dismissible fade show" role="alert">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    <strong class="alert-heading">Well done!</strong>
    <p>You successfully read this important alert message.</p>
  </div>
</div>

CSS

Variables

    --#{$prefix}growl-alert-bg: #{$growl-alert-bg};
    --#{$prefix}growl-alert-padding-start: #{$growl-alert-padding-start};
    --#{$prefix}growl-alert-padding-end: #{$growl-alert-padding-end};
    --#{$prefix}growl-alert-padding-y: #{$growl-alert-padding-y};
    --#{$prefix}growl-alert-color: #{$growl-alert-color};
    --#{$prefix}growl-alert-border: #{$growl-alert-border-width} solid var(--#{$prefix}alert-border-color);
    --#{$prefix}growl-alert-border-radius: #{$growl-alert-border-radius};

Sass variables

$growl-top:                        $spacer * 4.1;
$growl-space-x:                    $spacer * .9;
$growl-width:                      $spacer * 21.625;

$growl-alert-padding-start:        $alert-padding-x * .625;
$growl-alert-padding-end:          $alert-padding-x * 2.0625;
$growl-alert-padding-y:            $alert-padding-y * .8125;
$growl-alert-color:                rgba($black, .85);
$growl-alert-bg-factor:            .6;
$growl-alert-bg:                   rgba(#f6f6f6, $growl-alert-bg-factor);
$growl-alert-blur:                 $spacer * 1.875;
$growl-alert-box-shadow:           0 ($spacer * .5) ($growl-alert-blur * 1.333) rgba($black, .25), 0 0 ($growl-alert-blur * .1) rgba($black, .55);
$growl-alert-box-shadow-inset:     inset 0 0 ($growl-alert-blur * .1) rgba($white, .1);
$growl-alert-margin-bottom:        $spacer * .6;
$growl-alert-font-family:          "SF Pro", $font-family-sans-serif;
$growl-alert-font-size:            $font-size-base * .8125;
$growl-alert-line-height:          $line-height-base * 1.06;
$growl-alert-border-radius:        $border-radius-xl;
$growl-alert-border-width:         0;
$growl-alert-dismissable-color:    $white;
$growl-alert-dismissable-top:      min($growl-alert-padding-start, $growl-alert-padding-y) * .25;
$growl-alert-dismissable-width:    min($growl-alert-padding-start, $growl-alert-padding-y);
$growl-alert-dismissable-height:   $growl-alert-dismissable-width;
$growl-alert-dismissiable-padding: div(min($growl-alert-padding-start, $growl-alert-padding-end, $growl-alert-padding-y), 2);