Bootstrap 5 Alert

Bootstrap 5 Alerts

Bootstrap 5 alerts message are used to provide instant attention like warning, error, success, etc.

Steps: To create a bootstrap 5 alerts component:

  • Assign .alert together with alert-* to the alert container(<div>) base class.
  • Please keep in mind that,alert-* is a contextual classes that are used for background color. It has following values:.alert class ,followed by one of the contextual classes .alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-light or .alert-dark.

General Syntax For Alert

<span class="alert alert-*">Alert</span>

Note:* Notify one of {primary|secondary|success|danger|bg-warning|bg-info|bg-light|bg-dark}.

Example

General Syntax

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: In this example, a bootstrap basic alert has been created by assigning .alert & alert-* to the alert container base class. Please keep in mind that alert-* is an alert contextual class that is used for providing different background colors to the alert message.

Bootstrap 5 Alerts Link

To create bootstrap 5 alerts link, you have to apply .alert-link class to the <a> element base class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: In this example, the bootstrap alert link is created by assigning .alert-link to the hyper link element(<a>) base class.

Colored Alert Link

To create bootstrap 5 colored alert link, you have to apply alert-link class to any hyperlink(<a>)element base class and add one of the contextual class .alert-success,.alert-info,.alert-warning, .alert-danger,.alert-primary,.alert-secondary,.alert-light or .alert-dark to alert container (i.e parent div) class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Success! You can get your score result..
Success! You can get your score result..

Code Explanation

Note: To create bootstrap colored alert link, you have to assign .alert & .alert-* contextual classes to the alert container and assign .alert-link to the hyperlink element (<a>) base class.

Bootstrap 5 Closing Alert

Steps to create a bootstrap 5 closing alert system:

  • Add .alert-dismissible to alert container i.e Parent <div>.
  • Add .btn-close and data-bs-dismiss="alert" attribute to either link(<a>) element or <button> element.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: To create bootstrap close system, assign .alert-dismissible to the alert container.Add .btn-close to the base class of <button> or link(<a>) element.At the end, assign data attribute data-bs-dismiss="alert" to the <button> or link(<a>) element.

Bootstrap 5 Alerts Animation

Bootstrap 5 animated alerts can be created by applying .fade and .show classes to the alert container that creates fading effect when closing the alert message:

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: To create bootstrap 5 animated alerts, assign .fade & .show classes to the alert container that creates fading effect when closing the alert message.

Online Test / Quiz