BOOTSTRAP 4 ALERTS
Bootstrap provides us easy way create predefined flexible alert messages.
Alert messages are used quite often for an information to have some special focus, or immidiate attention, like warning message or alert message.
The alert snippets are available for any length of text as well as it has an optional button to dismiss the message.
Bootstrap Create Alert Message
To create simple alert message use bootstrap class
alert with the type of alert message you want like :
Bootstrap Dismissing Alert Message
Bootstrap allow us to create a close button to the alert message, which when clicked closes the alert message.
To create a dismissible alert message we need following things:
bootstrap.jsfile which contain code to close the alert message, and since bootstrap use jquery as dependency so you also need to includes jquery also.
.alert-dismissibleclass to alert message, which creates extra padding to the right of alert and positions the close button.
- Create a button with attribute
- (Optional): You can add
.showto create animation while dismissing the message.
Bootstrap Alert Link
.alert-link class provide relavant color to links within any alert message.
Within any alert message just add
.alert-link class to the link.
Additional Content In Alert Messages
Alert message can also contain additional HTML element inside alert message like heading, paragraph, horizontal bar, etc. Using more HTML elements inside alert message you can create a more informative alert message, which can also contain some action buttons.
Please check resources your system is overloading. Work on the issue!
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
- To create alert message use
.alertclass with the type of alert message like
- To create dismissible alert message create a button with attribute
data-dismiss="alert", and load
- Alert can be made more informative by adding other HTML elements within alert message.