Bootstrap 5 Alerts Icons
Bootstrap 5 Alerts Icons are used to add icons to the alert bar to format the bar and make it more informative. To include the icon using <svg> tag we have to define its path inside the <path> tag in svg tag. We also need to specify its height and width to adjust its size according to the notification size.
Alert Icons Classes: No special classes are used in Alerts Icons. You can customize the List using Bootstrap icon classes and style them with flexbox utilities. (We must include the bootstrap 5 icons CSS file)
Alert icon Attributes(for svg tag only):
- width: To specify width inside of the icon.
- height: To specify height of icon.
- fill: To specify color of the icon usually set to currentColor.
- d: Used inside path tag to specify the path.
Syntax:
<div class="alert alert-...> // To display icon using i tag <i class="bi bi-..."></i> </div> // To display icon using svg tag <svg width="..." height="..." fill="..." class="bi bi-"> <path d="..."> </svg>
Example 1: The following code demonstrates the Alert Icons using the svg tag.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" > </ head > < body class = "m-3" > < h1 class = "text-success" > w3wiki </ h1 > < strong > Bootstrap 5 Alert Icons </ strong > < div class = "alert alert-danger d-flex align-items-center" > < svg width = "24" height = "24" fill = "currentColor" class = "bi bi-exclamation-triangle-fill flex-shrink-0 mt-2" > < path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" /> </ svg > < div > :Alert danger </ div > </ body > </ html > |
Output:
Example 2: The following code demonstrates multiple icons using the Bootstrap 5 Alert properties with the help of <i> tag.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" > </ head > < body class = "m-3" > < h1 class = "text-success" > w3wiki </ h1 > < strong > Bootstrap 5 Alert with icons </ strong > < div class = "alert alert-danger d-flex" > < i class = "bi bi-exclamation-triangle-fill " > Alert box Danger </ i > </ div > < div class = "alert alert-primary d-flex" > < i class = "bi bi-info-circle-fill" > Alert box Primary </ i > </ div > < div class = "alert alert-warning d-flex" > < i class = "bi bi-exclamation-triangle-fill" > Alert box Warning </ i > </ div > < div class = "alert alert-success d-flex" > < i class = "bi bi-check-circle-fill" > Alert box Success </ i > </ div > </ body > </ html > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/alerts/#icons
Contact Us