A flash message (or notification) element with four different levels.


<b-flash-message visible="true" type="info" duration="2000">
    <strong>Hello, World!</strong> Foo Bar
    <button flash-message-dismiss>x</button>

Will display an info flash message during 2 secs containing the string "Hello, World! Foo Bar". You can make it dismissable without any JS by adding a flash-message-dismiss or data-flash-message-dismiss attribute to any link or button inside the dialog content.



  • visible: controls the display of the message. Valid values are true or false. By default it is set to false.
  • type: four possible values: info, success, warning and error, respectively blue, green, yellow and red. By default this attribute is set to info. -duration: Trigger a timeout when the message is displayed (see show accessor). Valid value is a number given in milliseconds.


  • show(): displays the flash message. If the attribute duration is set to a valid value, the message will be hidden automatically after specified number of milliseconds.
  • close(): hides the flash message.


  • b-flash-message-show: will fire when the flash message is shown.
  • b-flash-message-close: will fire when the flash message is closed.