Default Alerts

<div class="alert alert-light-primary alert-dismissible fade show border-0 mb-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
<strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.</button>
</div>

Outline Alerts

<div class="alert alert-outline-primary alert-dismissible fade show mb-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
<strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
</div>

Solid Alerts

<div class="alert alert-warning alert-dismissible fade show mb-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
<strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
</div>

Alerts with icon

<div class="alert alert-icon-left alert-light-primary alert-dismissible fade show mb-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg  data-bs-dismiss="alert"> ... </svg></button>
<svg> ... </svg>
<strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

<div class="alert alert-icon-right alert-light-primary alert-dismissible fade show mb-4" role="alert">
<svg> ... </svg>
<strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

Arrowed Alerts

<div class="alert alert-arrow-left alert-icon-left alert-light-primary mb-4"
role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
<svg> ... </svg>
<strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

<div class="alert alert-arrow-right alert-icon-right alert-light-primary mb-4"
role="alert">
<svg> ... </svg>
<strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
</div>

Custom Alerts

<div class="alert custom-alert-1 alert-dismissible fade show mb-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> .... </svg></button>
<div class="media">
<div class="alert-icon">
<svg> .... </svg>
</div>
<div class="media-body">
<div class="alert-text">
<strong>Warning! </strong><span> Lorem Ipsum is simply dummy text of the printing.</span> 
</div>
<div class="alert-btn">
<button type="button" class="btn btn-secondary">Accept</button>
</div>
</div>
</div>
</div>
<div class="alert alert-gradient alert-dismissible fade show mb-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
<strong>New!</strong> Alert with gradient.
</div> 
<div class="alert alert-background alert-dismissible fade show mb-4" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
<strong>New!</strong> Alert with background image.
</div>

Copyright © 2022 DesignReset, All rights reserved.

Coded with