Bootstrap 5 Alerts Icons

Last Updated : 26 Dec, 2022

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"> 
        GeeksforGeeks 
    </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"> 
        GeeksforGeeks 
    </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>