Bootstrap 4 Alert - W3points | w3schools | TutorialPoint | | w3school

Bootstrapping alerts provide contextual feedback messages for typical user actions with the help of a handful of available and flexible alert messages. Bootstrapping alerts provide the user with a message of any change in the component of the text. The change that happens include, length of the text, optional dismiss button. If you are looking for the proper styling in the text, then go for the contextual classes. One of the best examples of a contextual class is the alert-success.
If you are looking for the inline dismissal, then use the alerts Query plug-in. Alerts are also known for containing the additional elements like headings, paragraphs, and dividers.
Link color
Different color provides the customer with a different link. Also, different colors represent different types of alerts. For example, the red color link represents the danger alert and the blue link represents the success alert.
Dismissing the alert
When you are using the JavaScript plugin, it is possible to dismiss the alert inline. There are some points that you will have to follow.
• Make sure that you have loaded the alert plugin and compiled the bootstrap JavaScript.
• If you are looking for building the JavaScript from the scratch or from the source, then you will have to use the util.js.
• To add extra padding to the right alert and positioning of the. close button, add a dismiss button, and the. alert-dismissable class.
• On the dismiss button adding the data-dismiss=alert syntax will help in triggering the functionality of the JavaScript. Use the button element for proper behavior of the element across different platform, that includes mobile and website.
• When you add the fade and the show class, make sure that alerts get animated when dismissing them.
Bootstrap alert events
With the help of the alert plugin, you can expose the few events for switching on the alert functionality.