<div class="alert alert-primary" role="alert">Primary Alert</div>
{{ page.inlinestyles }}
@import 'bootstrap/scss/alert.scss';
.alert {
&-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 {
&-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 {
&-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 {
&-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 {
&-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;
}
}