BootstrapVue Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible BootstrapVue alerts.


Examples

  
   <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

<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

  
    <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.