Alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
Alert with Button-Close
Holy guacamole! You should check in on some of those fields below.
Alert HTML-Code Example
1
2 // Alerts
3 <div class="alert alert-primary" role="alert">
4 <strong>A simple primary</strong> alert—check it out!
5 </div>
6 <div class="alert alert-secondary" role="alert">
7 A simple secondary alert—check it out!
8 </div>
9 <div class="alert alert-success" role="alert">
10 A simple success alert—check it out!
11 </div>
12 <div class="alert alert-danger" role="alert">
13 A simple danger alert—check it out!
14 </div>
15 <div class="alert alert-warning" role="alert">
16 A simple warning alert—check it out!
17 </div>
18 <div class="alert alert-info" role="alert">
19 A simple info alert—check it out!
20 </div>
21 <div class="alert alert-light" role="alert">
22 A simple light alert—check it out!
23 </div>
24 <div class="alert alert-dark" role="alert">
25 A simple dark alert—check it out!
26 </div>
27
28 // Alert with close button
29 <div class="alert alert-warning alert-dismissible fade show" role="alert">
30 <strong>Holy guacamole!</strong> You should check in on some of those fields below.
31 <button
32 type="button"
33 class="btn-close"
34 data-bs-dismiss="alert"
35 aria-label="Close"
36 ></button>
37 </div>
38