Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #45 | Alerts Tutorial. Earlier I have shared the Bootstrap 5 Tutorial In Hindi #44 | Popover Tutorial. and now it’s time to Bootstrap 5 Alerts Tutorial.
In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is below Hope it will help you all thank you for visiting.
In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Alerts Tutorial. Here You can learn what is a bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!
Creating Alert Messages with Bootstrap
Alert boxes are used quite often to stand out the information that requires immediate attention of the end users such as warning, error or confirmation messages.
With Bootstrap you can easily create elegant alert messages for various purposes by adding the contextual classes (e.g., .alert-success, .alert-warning, .alert-info etc.) to the .alert base class. You can also add an optional close button to dismiss any alert.
Bootstrap provides total 8 different types of alerts. The following example will show you the most commonly used alerts, which are: success, error or danger, warning and info alerts.
Adding Icons to Bootstrap Alerts
You can also place icons inside Bootstrap alerts. You can either use Bootstrap icons or third-party icons like Font Awesome.
Additional Content inside Alerts
You can also place additional HTML elements like headings, paragraphs and dividers inside an alert. To manage spacing between the elements you can use margin utility classes,
Matching Links Color inside Alerts
You can apply the utility class .alert-link to the links inside any alert boxes to quickly create matching.
Closing Alerts via Data Attribute
Data attributes provides a simple and easy way to add close functionality to the alert boxes.
Just add the data-bs-dismiss="alert" to the close button and it will automatically enable the dismissal of the containing alert message box. Also, add the class .alert-dismissible to the .alert element for proper positioning of the .btn-close button.
getOrCreateInstance
This is a static method which allows you to get the alert instance associated with a DOM element, or create a new one in case if the alert wasn’t initialized.