Alerts

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

Alerts are available for any length of text, as well as an optional dismiss button (and optional auto-dismissing).

<template>
  <div>
    <b-alert show>Default Alert</b-alert>

    <b-alert variant="success" show>Success Alert</b-alert>

    <b-alert variant="danger"
             dismissible
             :show="showDismissibleAlert"
             @dismissed="showDismissibleAlert=false">
      Dismissible Alert!
    </b-alert>

    <b-alert :show="dismissCountDown"
             dismissible
             variant="warning"
             @dismissed="dismissCountDown=0"
             @dismiss-count-down="countDownChanged">
      <p>This alert will dismiss after {{dismissCountDown}} seconds...</p>
      <b-progress variant="warning"
                  :max="dismissSecs"
                  :value="dismissCountDown"
                  height="4px">
      </b-progress>
    </b-alert>

    <b-btn @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-btn>
    <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
      Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
    </b-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dismissSecs: 10,
      dismissCountDown: 0,
      showDismissibleAlert: false
    }
  },
  methods: {
    countDownChanged (dismissCountDown) {
      this.dismissCountDown = dismissCountDown
    },
    showAlert () {
      this.dismissCountDown = this.dismissSecs
    }
  }
}
</script>

<!-- alert-1.vue -->

Visible state

Use the show prop to control the visibility state of the alert. By default alerts are not shown. Set the prop show to explicity display them.

Alert contextual variants

For proper styling of <b-alert>, use one of the four required contextual variants by setting the variant prop to one of the following: info, success, warning or danger. The default is info.

<div>
  <b-alert show variant="primary">Primary Alert</b-alert>
  <b-alert show variant="secondary">Secondary Alert</b-alert>
  <b-alert show variant="success">Success Alert</b-alert>
  <b-alert show variant="danger">Danger Alert</b-alert>
  <b-alert show variant="warning">Warning Alert</b-alert>
  <b-alert show variant="info">Info Alert</b-alert>
  <b-alert show variant="light">Light Alert</b-alert>
  <b-alert show variant="dark">Dark Alert</b-alert>
</div>

<!-- alert-variants-1.vue -->

Conveying meaning to assistive technologies:

Using color variants to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Additional content inside alerts

<b-alerts> can also contain additional HTML elements like headings and paragraphs, which will be styled with the appropriate color matching the variant.

<b-alert show variant="success">
  <h4 class="alert-heading">Well done!</h4>
  <p>
    Aww yeah, you successfully read this important alert message.
    This example text is going to run a bit longer so that you can see
    how spacing within an alert works with this kind of content.
  </p>
  <hr>
  <p class="mb-0">
    Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
  </p>
</b-alert>

<!-- alert-content-1.vue -->

Use the .alert-link utility CSS class to quickly provide matching colored links within any alert. Use on <a> or <b-link>.

<div>
  <b-alert show variant="primary">
    Primary Alert with <a href="#" class="alert-link">an example link</a>.
  </b-alert>
  <b-alert show variant="secondary">
    Secondary Alert with <a href="#" class="alert-link">an example link</a>.
  </b-alert>
  <b-alert show variant="success">
    Success Alert with <a href="#" class="alert-link">an example link</a>.
  </b-alert>
  <b-alert show variant="danger">
    Danger Alert with <a href="#" class="alert-link">an example link</a>.
  </b-alert>
  <b-alert show variant="warning">
    Warning Alert with <a href="#" class="alert-link">an example link</a>.
  </b-alert>
  <b-alert show variant="info">
    Info Alert with <a href="#" class="alert-link">an example link</a>.
  </b-alert>
  <b-alert show variant="light">
    Light Alert with <a href="#" class="alert-link">an example link</a>.
  </b-alert>
  <b-alert show variant="dark">
    Dark Alert with <b-link href="#" class="alert-link">an example link</b-link>.
  </b-alert>
</div>

<!-- alert-links-1.vue -->

Dismissible alerts

Using the dismissible prop it’s possible to dismiss any <b-alert> inline. This will add a close X button. Use the dismiss-label prop to change the hidden label text associated with the dismiss button.

<div>
  <b-alert show dismissible>
    Dismissible Alert!  Click the close button over there <b>&rArr;</b>
  </b-alert>
</div>

<!-- alert-dismis-1.vue -->

Auto dismissing alerts:

To create a <b-alert> that dismisses automatically after a period of time, set the show prop to the number of seconds you would like the <b-alert> to remain visible for.

<template>
  <div>
    <b-alert :show="dismissCountDown"
             dismissible
             variant="warning"
             @dismissed="dismissCountdown=0"
             @dismiss-count-down="countDownChanged">
      This alert will dismiss after {{dismissCountDown}} seconds...
    </b-alert>
    <b-btn @click="showAlert" variant="info" class="m-1">
      Show alert with count-down timer
    </b-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dismissSecs: 5,
      dismissCountDown: 0
    }
  },
  methods: {
    countDownChanged (dismissCountDown) {
      this.dismissCountDown = dismissCountDown
    },
    showAlert () {
      this.dismissCountDown = this.dismissSecs
    }
  }
}
</script>

<!-- alert-auto-dismiss-1.vue -->

Component Reference

<b-alert>

Properties

PropertyTypeDefault Value
variantStringinfo
dismissibleBooleanfalse
dismiss-labelStringClose
showBoolean or Numberfalse

Slots

SlotDescription
dismissContent for the dismiss button.

Events

EventArgumentsDescription
dismissedAlert dismissed
dismiss-count-down
dismissCountDownTime remaining to dismissed
When dismissAfterSeconds enabled, this event emits every second on countdown.
Trying to get native browser events working on your component? Use the .native modifier to capture browser native events such as: @click.native="...", @mouseover.native="...", etc. See the the official Vue.js documentation for more information.

Importing Individual Components

ComponentImport Path
<b-alert>bootstrap-vue/es/components/alert/alert

Example:

import bAlert from 'bootstrap-vue/es/components/alert/alert';
Vue.component('b-alert', bAlert);

Importing Alert as a Vue plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

import { Alert } from 'bootstrap-vue/es/components';
Vue.use(Alert);