bootstrap popup alert

1<!-- Button trigger modal -->
2<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
3  Launch demo modal
4</button>
5
6<!-- Modal -->
7<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
8  <div class="modal-dialog modal-dialog-centered" role="document">
9    <div class="modal-content">
10      <div class="modal-header">
11        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
12        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
13          <span aria-hidden="true">&times;</span>
14        </button>
15      </div>
16      <div class="modal-body">
17        ...
18      </div>
19      <div class="modal-footer">
20        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
21        <button type="button" class="btn btn-primary">Save changes</button>
22      </div>
23    </div>
24  </div>
25</div>

1<div class="alert alert-primary" role="alert">
2  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
3</div>
4<div class="alert alert-secondary" role="alert">
5  This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
6</div>
7<div class="alert alert-success" role="alert">
8  This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
9</div>
10<div class="alert alert-danger" role="alert">
11  This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
12</div>
13<div class="alert alert-warning" role="alert">
14  This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
15</div>
16<div class="alert alert-info" role="alert">
17  This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
18</div>
19<div class="alert alert-light" role="alert">
20  This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
21</div>
22<div class="alert alert-dark" role="alert">
23  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
24</div>

1<div class="alert alert-warning alert-dismissible fade show" role="alert">
2  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
3  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
4    <span aria-hidden="true">&times;</span>
5  </button>
6</div>

1Alerts in Bootstrap:
2--------------------------------
3Alert classes you can use to check
4.alert-primary
5.alert-secondary
6.alert-success
7.alert-danger
8.alert-warning
9.alert-info
10.alert-light
11.alert-dark
12
13Simple alert:
14-------------
15<div class="alert alert-primary" role="alert">
16  This is a primary alert—check it out!
17</div>
18
19Alert with close button and decriptive feature:
20------------------------------------------------
21<div class="alert alert-warning alert-dismissible fade show" role="alert">
22  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
23  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
24    <span aria-hidden="true">&times;</span>
25  </button>
26</div>
27
28Trigger via javascript:
29$(".alert").alert();

1Alerts are available for any length of text, as well as an optional dismiss
2button. For proper styling, use one of the eight required contextual classes
3(e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.
4
5<div class="alert alert-primary" role="alert">
6  A simple primary alert—check it out!
7</div>
8<div class="alert alert-secondary" role="alert">
9  A simple secondary alert—check it out!
10</div>
11<div class="alert alert-success" role="alert">
12  A simple success alert—check it out!
13</div>
14<div class="alert alert-danger" role="alert">
15  A simple danger alert—check it out!
16</div>
17<div class="alert alert-warning" role="alert">
18  A simple warning alert—check it out!
19</div>
20<div class="alert alert-info" role="alert">
21  A simple info alert—check it out!
22</div>
23<div class="alert alert-light" role="alert">
24  A simple light alert—check it out!
25</div>
26<div class="alert alert-dark" role="alert">
27  A simple dark alert—check it out!
28</div>
29
30<div class="alert alert-primary" role="alert">
31  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
32</div>
33<div class="alert alert-secondary" role="alert">
34  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
35</div>
36<div class="alert alert-success" role="alert">
37  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
38</div>
39<div class="alert alert-danger" role="alert">
40  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
41</div>
42<div class="alert alert-warning" role="alert">
43  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
44</div>
45<div class="alert alert-info" role="alert">
46  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
47</div>
48<div class="alert alert-light" role="alert">
49  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
50</div>
51<div class="alert alert-dark" role="alert">
52  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
53</div>

1<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
2  <div class="toast-header">
3    <img src="..." class="rounded mr-2" alt="...">
4    <strong class="mr-auto">Bootstrap</strong>
5    <small>11 mins ago</small>
6    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
7      <span aria-hidden="true">×</span>
8    </button>
9  </div>
10  <div class="toast-body">
11    Hello, world! This is a toast message.
12  </div>
13</div>