BootstrapVue Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible BootstrapVue alerts.
Examples
Default! This is a default alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
Copy
<b-alert show variant="default">
<strong>Default!</strong> This is a default alert—check it out!
</b-alert>
<b-alert show variant="primary">
<strong>Primary!</strong> This is a primary alert—check it out!
</b-alert>
<b-alert show variant="secondary">
<strong>Secondary!</strong> This is a secondary alert—check it out!
</b-alert>
<b-alert show variant="info">
<strong>Info!</strong> This is a info alert—check it out!
</b-alert>
<b-alert show variant="success">
<strong>Success!</strong> This is a success alert—check it out!
</b-alert>
<b-alert show variant="danger">
<strong>Danger!</strong> This is a danger alert—check it out!
</b-alert>
<b-alert show variant="warning">
<strong>Warning!</strong> This is a warning alert—check it out!
</b-alert>
With icon
Warning! This is a warning alert—check it out that has an icon too!
Copy
<b-alert show variant="warning">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
</b-alert>Dismissing
Default! This is a default alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
Copy
<b-alert show dismissible variant="default">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Default!</strong> This is a default alert—check it out!</span>
</b-alert>
<b-alert show dismissible variant="primary">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
</b-alert>
<b-alert show dismissible variant="secondary">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Secondary!</strong> This is a secondary alert—check it out!</span>
</b-alert>
<b-alert show dismissible variant="info">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Info!</strong> This is a info alert—check it out!</span>
</b-alert>
<b-alert show dismissible variant="success">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Success!</strong> This is a success alert—check it out!</span>
</b-alert>
<b-alert show dismissible variant="danger">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
</b-alert>
<b-alert show dismissible variant="warning">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
</b-alert>
Props
| PROP NAME | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| type | String | default | Alert type |
| dismissible | Boolean | N/A | Whether alert is dismissible (closeable) |
| icon | String | N/A | Alert icon to display |
If you want to see more examples and properties please check the official BootstrapVue Documentation.