bootstrap alerts additional content

1<div class="alert alert-primary" role="alert">
2  This is a primary alert—check it out!
3</div>
4<div class="alert alert-secondary" role="alert">
5  This is a secondary alert—check it out!
6</div>
7<div class="alert alert-success" role="alert">
8  This is a success alert—check it out!
9</div>
10<div class="alert alert-danger" role="alert">
11  This is a danger alert—check it out!
12</div>
13<div class="alert alert-warning" role="alert">
14  This is a warning alert—check it out!
15</div>
16<div class="alert alert-info" role="alert">
17  This is a info alert—check it out!
18</div>
19<div class="alert alert-light" role="alert">
20  This is a light alert—check it out!
21</div>
22<div class="alert alert-dark" role="alert">
23  This is a dark alert—check it out!
24</div>

1<div class="alert alert-success 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 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>

1Alerts can also contain additional HTML elements like headings, paragraphs 
2and dividers.
3
4<div class="alert alert-success" role="alert">
5  <h4 class="alert-heading">Well done!</h4>
6  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
7  <hr>
8  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
9</div>