1
00:00:00,270 --> 00:00:04,770
Using Bootstrap we can easily create predefined alert messages.

2
00:00:04,890 --> 00:00:12,360
This HDMI page on the right side contains an example of commonly used alerts including the success info

3
00:00:12,780 --> 00:00:16,250
warning and danger alert in the source code.

4
00:00:16,260 --> 00:00:21,390
We can see how the alert was created inside our container.

5
00:00:21,390 --> 00:00:28,310
We have a series of div elements 1 2 3 and 4.

6
00:00:28,530 --> 00:00:33,120
The first alert is the success alert.

7
00:00:33,120 --> 00:00:39,330
We've applied the alert class in addition to the alert success class.

8
00:00:39,330 --> 00:00:46,550
We've also inserted the word success inside the alert for the remaining alerts.

9
00:00:46,560 --> 00:00:51,860
All we need to do is swap the alert success with the desired alert type.

10
00:00:51,930 --> 00:00:58,050
For example in the second div we have alert info.

11
00:00:58,050 --> 00:01:00,450
The third is alert warning.

12
00:01:00,450 --> 00:01:04,490
And the fourth is alert danger.

13
00:01:04,920 --> 00:01:09,150
We can make the alert dismissal by adding a few attributes to a link

14
00:01:12,540 --> 00:01:13,770
we'll make the first alert.

15
00:01:13,770 --> 00:01:14,430
This miserable

16
00:01:17,380 --> 00:01:21,670
take the following inside the first div element

17
00:01:31,020 --> 00:01:39,730
adding the class equals close in data dismiss equals alert attributes allow the alert to be dismissed

18
00:01:40,540 --> 00:01:44,140
and to test this will save the document and refresh our web browser.

19
00:01:45,260 --> 00:01:50,500
Now you'll see an x appears on the first alert if you click the X.

20
00:01:50,750 --> 00:01:52,400
The alert is dismissed

21
00:01:57,140 --> 00:02:07,980
we can also add a fade effect when the alert is dismissed and to do that all we have to do is add two

22
00:02:07,980 --> 00:02:16,390
additional classes fade and in so save the file and refresh the page.

23
00:02:16,430 --> 00:02:19,530
And now when we dismiss the alert you'll see it fades out.