Bootstrap 5 alerts message are used to provide instant attention like warning, error, success, etc.
Steps: To create a bootstrap 5 alerts component:
.alert
together with alert-*
to the
alert container(<div>
) base class.
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}.
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.
Note: In this example, the bootstrap alert link is created by assigning .alert-link to the hyper link element(<a>
) base class.
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.
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.
Steps to create a bootstrap 5 closing alert system:
.alert-dismissible
to alert container i.e Parent <div>
.
.btn-close
and data-bs-dismiss="alert"
attribute to either link(<a>
) element or <button>
element.
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 animated alerts can be created by applying .fade
and .show
classes to the alert container that creates fading effect when closing the alert message:
Note: To create bootstrap 5 animated alerts, assign .fade
& .show
classes to the alert container that creates fading effect when closing the alert message.