<div class="alert alert-primary" role="alert">Primary Alert</div>

{{ page.inlinestyles }}

      

      @import 'bootstrap/scss/alert.scss';

.alert {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  &-primary {
    color: $primary-supportive;
    border-color: $primary;
  }

  &-success {
    color: white;
    border-color: $success;
  }

  &-info {
    color: $white;
    border-color: $info;
  }

  &-warning {
    color: $warning-supportive;
    border-color: $warning;
  }

  &-danger {
    color: $danger-supportive;
    border-color: $danger;
  }
}

      

      <div class="alert alert-success" role="alert">Success Alert</div>

{{ page.inlinestyles }}

      

      @import 'bootstrap/scss/alert.scss';

.alert {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  &-primary {
    color: $primary-supportive;
    border-color: $primary;
  }

  &-success {
    color: white;
    border-color: $success;
  }

  &-info {
    color: $white;
    border-color: $info;
  }

  &-warning {
    color: $warning-supportive;
    border-color: $warning;
  }

  &-danger {
    color: $danger-supportive;
    border-color: $danger;
  }
}

      

      <div class="alert alert-info" role="alert">Info Alert</div>

{{ page.inlinestyles }}

      

      @import 'bootstrap/scss/alert.scss';

.alert {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  &-primary {
    color: $primary-supportive;
    border-color: $primary;
  }

  &-success {
    color: white;
    border-color: $success;
  }

  &-info {
    color: $white;
    border-color: $info;
  }

  &-warning {
    color: $warning-supportive;
    border-color: $warning;
  }

  &-danger {
    color: $danger-supportive;
    border-color: $danger;
  }
}

      

      <div class="alert alert-warning" role="alert">Warning Alert</div>

{{ page.inlinestyles }}

      

      @import 'bootstrap/scss/alert.scss';

.alert {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  &-primary {
    color: $primary-supportive;
    border-color: $primary;
  }

  &-success {
    color: white;
    border-color: $success;
  }

  &-info {
    color: $white;
    border-color: $info;
  }

  &-warning {
    color: $warning-supportive;
    border-color: $warning;
  }

  &-danger {
    color: $danger-supportive;
    border-color: $danger;
  }
}

      

      <div class="alert alert-danger" role="alert">Error Alert</div>

{{ page.inlinestyles }}

      

      @import 'bootstrap/scss/alert.scss';

.alert {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  &-primary {
    color: $primary-supportive;
    border-color: $primary;
  }

  &-success {
    color: white;
    border-color: $success;
  }

  &-info {
    color: $white;
    border-color: $info;
  }

  &-warning {
    color: $warning-supportive;
    border-color: $warning;
  }

  &-danger {
    color: $danger-supportive;
    border-color: $danger;
  }
}