<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
body {
  padding: 10px;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background-color: #000;
}

.alert-primary {
  filter: invert(74%) sepia(56%) saturate(225%) hue-rotate(188deg) brightness(108%) contrast(102%);
}

.alert-secondary {
  filter: invert(100%) sepia(0%) saturate(364%) hue-rotate(45deg) brightness(96%) contrast(86%);
}

.alert-success {
  filter: invert(100%) sepia(14%) saturate(3095%) hue-rotate(10deg) brightness(93%) contrast(87%)
}

.alert-danger {
  filter: invert(80%) sepia(4%) saturate(1196%) hue-rotate(306deg) brightness(111%) contrast(95%);
}

.alert-warning {
  filter: invert(87%) sepia(98%) saturate(226%) hue-rotate(309deg) brightness(104%) contrast(102%);
}

.alert-info {
  filter: invert(93%) sepia(17%) saturate(323%) hue-rotate(152deg) brightness(98%) contrast(92%);
}

.alert-light {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(45deg) brightness(103%) contrast(103%);
}

.alert-dark {
  filter: invert(91%) sepia(0%) saturate(250%) hue-rotate(263deg) brightness(95%) contrast(95%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.