<div class="alert alert-dark" role="alert">
This is a DARK alert—check it out!
</div>
<div class="alert alert-{{ type }}" role="alert">
{% if fa_icons %}
<div class="alert-wrapper">
<i class="{{ fa_icons.class }}"></i><span class="sr-only">{{ fa_icons.description }}</span>
{% endif %}
{{ message }}
{% if fa_icons %}
</div>
{% endif %}
</div>
{
"type": "dark",
"message": "This is a DARK alert—check it out!"
}
.alert {
font-size: 1.5rem;
.alert-wrapper {
display: flex;
flex-direction: row;
align-items: center;
@include media-breakpoint-down(xs) {
flex-direction: column;
justify-content: center;
}
i {
font-size: 2.75rem;
padding: 0 $spacer 0 0;
}
}
}
Display the various alert and what they mean.