Bootstrap 5 Alerts Icons are used so as to add icons to the alert bar to format the bar and make it extra informative. To incorporate the icon utilizing <svg> tag we’ve to outline its path contained in the <path> tag in svg tag. We additionally must specify its top and width to regulate its dimension in accordance with the notification dimension.
Alert Icons Lessons: No particular courses are utilized in Alerts Icons. You possibly can customise the Listing utilizing Bootstrap icon courses and elegance them with flexbox utilities. (We should embody the bootstrap 5 icons CSS file)
Alert icon Attributes(for svg tag solely):
- width: To specify width inside the icon.
- top: To specify top of icon.
- fill: To specify coloration of the icon often set to currentColor.
- d: Used inside path tag to specify the trail.
Syntax:
<div class="alert alert-...>
// To show icon utilizing i tag
<i class="bi bi-..."></i>
</div>
// To show icon utilizing svg tag
<svg width="..." top="..." fill="..." class="bi bi-">
<path d="...">
</svg>
Instance 1: The next code demonstrates the Alert Icons utilizing the svg tag.
HTML
|
|
Output:
Instance 2: The next code demonstrates a number of icons utilizing the Bootstrap 5 Alert properties with the assistance of <i> tag.
HTML
|
|
Output:
Reference: https://getbootstrap.com/docs/5.0/elements/alerts/#icons
