Alert

Link Color In Dark Theme

Use the .alert-link utility class to quickly provide matching colored links within any alert

Primary Alert

Secondary Alert

Success Alert

Info Alert

Warning Alert

Danger Alert

Light Alert

Dark Alert

Link Color In Light Theme

Use the .alert-link utility class to quickly provide matching colored links within any alert

Primary Light Alert

Secondary Light Alert

Success Light Alert

Info Light Alert

Warning Light Alert

Danger Light Alert

White Light Alert

Dark Light Alert

Outline Dark And Light Alerts

Use the .border-*utility class to quickly provide matching border and border-width within any alert.

Alerts With Icons and Text Actions

Use the .dismiss-text class to add dismiss text instead of icon

Dismissing Dark Alerts

Use the .alert-dismissible utility class to quickly remove the alerts.

Dismissing Light Alerts

Use the .alert-dismissible utility class to quickly remove the alerts.

Live Alert

Click the button below to show an alert,then dismiss it with the built-in close button.

Left Border Alert

Use the .border-left-wrapper to change border-left radius.

Additional content

Use the .alert utility class to quickly provide additional content within any alerts.