Bootstrap 5 Alerts Icons – GeeksforGeeks

By Ann Roberts On Dec 26, 2022

Improve Article

Save Article

Like Article

Improve Article

Save Article

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=

<link rel="stylesheet"

href=

</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=

<link rel="stylesheet"

href=

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

Output:

Bootstrap 5 Alerts Icons

Reference: https://getbootstrap.com/docs/5.0/components/alerts/#icons

Improve Article

Save Article

Like Article

Improve Article

Save Article

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=

<link rel="stylesheet"

href=

</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=

<link rel="stylesheet"

href=

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

Output:

Bootstrap 5 Alerts Icons

Reference: https://getbootstrap.com/docs/5.0/components/alerts/#icons

Read original article here

Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.