Alertscomponents/_alerts.scss
Alerts are available in a range of styles and span 100% width of their containing element. They can be dismissed with javascript
Basic Alert
Primary alert
Secondary alert
Info alert
✖TITLE:
This is a success alert that can be dismissed
This is a success alert that can be dismissed
Warning alert
Danger alert
Sass Configuration:
Name | Type | Default | Description |
---|---|---|---|
$alert-border | Boolean | false |
Set border on alerts |
$alert-padding | Number | 1.4rem |
Set alerts padding |
$alert-radius | true | White |
Set radius on alerts |
Example Code:
<div class="alert"><!-- Basic Alert --></div>
<div class="alert primary"><!-- Primary alert --></div>
<div class="alert secondary"><!-- Secondary alert --></div>
<div class="alert info"><!-- Info alert --></div>
<!-- Success alert, dismissable -->
<div class="alert success">
<a class="dismiss-alert" data-dismiss="alert">✖</a>Success alert
</div>
<div class="alert warning"><!-- Warning alert --></div>
<div class="alert danger"><!-- Danger alert --></div>