Alert¶

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

Examples¶

Dismissible, with an icon, and a fully featured example combining both.

DismissibleIconComplete

Usage

{% include 'bootstrap_components:alert' with {
  variant: 'warning',
  dismissible: true,
  message: '<strong>Holy guacamole!</strong> You should check in on some of those fields below.',
} %}

Usage

{% include 'bootstrap_components:alert' with {
  variant: 'primary',
  icon_name: 'bootstrap_ui_kit:exclamation-triangle-fill',
  message: 'An example alert with an icon',
} %}

Alerts can contain additional HTML elements like headings, paragraphs and dividers via message.

Usage

{% include 'bootstrap_components:alert' with {
  variant: 'success',
  heading: 'Well done!',
  message: '<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>',
} %}

Props¶

Prop	Type	Description	Example
`variant`	string (enum)	Which kind of alert this is. Sets Bootstrap's `alert-{variant}` class. Leave as Default for an unstyled alert.	`primary`
`icon_name`	string	Optional icon shown before the content, as `pack:name` — e.g. `bootstrap_ui_kit:info-circle-fill`. Left empty, no icon renders.	`bootstrap_ui_kit:info-circle-fill`
`dismissible`	boolean	Whether the alert can be dismissed inline.	`true`
`heading_level`	integer (enum 2–6)	Heading tag level, when a `heading` is set. Defaults to `4`.	`4`
`heading`	string	The alert heading. Optional.	`Important Notice`
`message`	string (HTML)	The alert message. Accepts rich HTML — paragraphs, links, dividers.	`This is an alert message. Please review the information below.`

Variants¶

Variant	Description
`primary`	A simple primary alert.
`secondary`	A simple secondary alert.
`success`	A simple success alert.
`danger`	A simple danger alert.
`warning`	A simple warning alert.
`info`	A simple info alert.
`light`	A simple light alert.
`dark`	A simple dark alert.