%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns:v='https://vecta.io/nano'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20116%2032'%20style='enable-background:new%200%200%20116%2032;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23201D2D;}%20.st1{fill:%23FD5631;}%20.st2{opacity:0.55;fill:%23BE1E2D;enable-background:new%20;}%20.st3{fill:%23FFFFFF;}%20%3c/style%3e%3cpath%20class='st0'%20d='M42,24.4c-0.2-0.2-0.3-0.5-0.3-0.8V8.2c0-0.3,0.1-0.6,0.3-0.8s0.5-0.3,0.8-0.3h9.8c0.3,0,0.6,0.1,0.8,0.3%20c0.2,0.2,0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3H44v5.5h7.7c0.3,0,0.6,0.1,0.8,0.3%20c0.2,0.2,0.3,0.5,0.3,0.8c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3H44v6.7c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3%20C42.5,24.7,42.2,24.6,42,24.4L42,24.4z%20M56.4,8.8C56.1,8.6,56,8.2,56,7.9V7.8c0-0.3,0.1-0.7,0.4-0.9c0.2-0.2,0.6-0.4,0.9-0.4h0.1%20c0.3,0,0.7,0.1,0.9,0.4c0.2,0.2,0.4,0.6,0.4,0.9v0.1c0,0.3-0.1,0.7-0.4,0.9c-0.2,0.2-0.6,0.4-0.9,0.4h-0.1C56.9,9.2,56.6,9,56.4,8.8%20L56.4,8.8z%20M56.5,24.4c-0.2-0.2-0.3-0.5-0.3-0.8V12.8c0-0.3,0.1-0.6,0.3-0.8s0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3s0.3,0.5,0.3,0.8%20v10.8c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3C57,24.7,56.7,24.6,56.5,24.4L56.5,24.4z%20M62.8,24.4c-0.2-0.2-0.3-0.5-0.3-0.8%20V12.8c0-0.3,0.1-0.6,0.3-0.8s0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8v1c0.6-0.7,1.3-1.3,2.1-1.7%20c0.7-0.4,1.6-0.6,2.6-0.6c0.9,0,1.7,0.2,2.4,0.7s1.2,1,1.5,1.8s0.6,1.6,0.6,2.5v7.1c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3%20c-0.6,0-1.1-0.5-1.1-1.1c0,0,0,0,0,0v-6.9c0-2-0.9-3.1-2.8-3.1c-0.8,0-1.6,0.2-2.2,0.7s-1.3,1-1.9,1.8v7.5c0,0.3-0.1,0.6-0.3,0.8%20c-0.2,0.2-0.5,0.3-0.8,0.3C63.2,24.7,63,24.6,62.8,24.4L62.8,24.4z%20M80.1,24c-0.9-0.5-1.7-1.3-2.3-2.3s-0.9-2.2-0.9-3.5%20s0.3-2.5,0.9-3.5s1.3-1.8,2.3-2.3s1.9-0.8,3-0.8c1.7,0,3.1,0.6,4.3,1.9V7.3c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3%20c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8v16.3c0,0.6-0.5,1.1-1.1,1.1c0,0,0,0,0,0c-0.3,0-0.6-0.1-0.8-0.3s-0.3-0.5-0.3-0.8%20v-0.7c-1.2,1.3-2.7,1.9-4.3,1.9C82,24.8,81,24.5,80.1,24L80.1,24z%20M85.5,22.2c0.7-0.3,1.3-0.8,1.8-1.4v-5.3c-0.5-0.6-1.1-1-1.8-1.4%20c-0.7-0.3-1.4-0.5-2.2-0.5c-1.2,0-2.2,0.4-3,1.2s-1.1,1.9-1.1,3.3s0.4,2.5,1.1,3.3s1.8,1.2,3,1.2C84.1,22.7,84.8,22.5,85.5,22.2%20L85.5,22.2z%20M94.5,23.1c-1.1-1.2-1.7-2.8-1.7-4.9c0-1.2,0.2-2.3,0.7-3.3s1.1-1.8,2-2.4s2-0.9,3.3-0.9c1.2,0,2.3,0.3,3.2,0.9%20s1.6,1.3,2.1,2.3s0.7,2,0.7,3.1c0,0.3-0.1,0.6-0.3,0.8s-0.5,0.3-0.8,0.3h-8.5c0.1,1.2,0.6,2.1,1.3,2.7s1.8,1,3.1,1%20c0.7,0,1.3-0.1,1.9-0.2c0.5-0.1,1-0.3,1.5-0.6c0.1-0.1,0.3-0.1,0.4-0.1c0.3,0,0.5,0.1,0.7,0.3c0.2,0.2,0.3,0.4,0.3,0.7%20c0,0.4-0.2,0.7-0.7,0.9c-0.7,0.4-1.3,0.7-1.9,0.8s-1.4,0.3-2.4,0.3C97.2,24.8,95.6,24.2,94.5,23.1L94.5,23.1z%20M102.5,17.1%20c0-0.8-0.3-1.5-0.7-2.1s-0.8-1-1.4-1.2c-0.6-0.3-1.1-0.4-1.7-0.4s-1.1,0.1-1.7,0.4c-0.6,0.3-1,0.7-1.4,1.2s-0.6,1.2-0.6,2.1%20C95.1,17.1,102.5,17.1,102.5,17.1z%20M108.1,24.4c-0.2-0.2-0.3-0.5-0.3-0.8V12.8c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3%20s0.6,0.1,0.8,0.3c0.2,0.2,0.4,0.5,0.3,0.8v1.1c1.2-1.6,2.5-2.4,3.9-2.4h0.1c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8%20s-0.1,0.6-0.3,0.8s-0.5,0.3-0.8,0.3h-0.2c-0.8,0-1.5,0.2-2.2,0.6c-0.7,0.4-1.2,0.9-1.7,1.6v7.6c0,0.3-0.1,0.6-0.3,0.8%20c-0.2,0.2-0.5,0.3-0.8,0.3C108.6,24.7,108.3,24.6,108.1,24.4L108.1,24.4z'/%3e%3cpath%20class='st1'%20d='M16,32c8.8,0,16-7.2,16-16S24.8,0,16,0S0,7.2,0,16S7.2,32,16,32z'/%3e%3cpath%20class='st2'%20d='M31.7,19.3L22,9.6c-3.2-3.2-8.3-3.2-11.5,0c0,0,0,0,0,0l0,0c-3.2,3.2-3.2,8.3,0,11.5c0,0,0,0,0,0l10.2,10.2%20C26.2,29.6,30.5,25,31.7,19.3L31.7,19.3z'/%3e%3cpath%20class='st3'%20d='M26.4,22.2L23.2,19c0.6-1.1,1-2.5,1-3.8c0-4.5-3.6-8.1-8.1-8.1S8,10.7,8,15.2c0,4.5,3.6,8.1,8.1,8.1%20c0,0,0,0,0.1,0c1.3,0,2.7-0.4,3.8-1l3.2,3.2c1,1,2.4,1,3.3,0C27.3,24.6,27.3,23.2,26.4,22.2L26.4,22.2z%20M16.1,21.4%20c-3.4,0-6.2-2.8-6.2-6.2S12.7,9,16.1,9s6.2,2.8,6.2,6.2S19.5,21.4,16.1,21.4z'/%3e%3c/svg%3e)
Buy nowAlerts
Provide contextual feedback messages for typical user actions.
Basic example
A simple primary alert with an example link. Give it a click if you like.
A simple accent alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
<!-- Primary alert -->
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Accent alert -->
<div class="alert alert-accent" role="alert">
A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Success alert -->
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Danger alert -->
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Warning alert -->
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Info alert -->
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Light alert -->
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<!-- Dark alert -->
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</divAlert with icon
A simple primary alert with an example link. Give it a click if you like.
A simple accent alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.
<!-- Primary alert -->
<div class="alert alert-primary d-flex" role="alert">
<i class="fi-bell me-2 me-sm-3 lead"></i>
<div>A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Accent alert -->
<div class="alert alert-accent d-flex" role="alert">
<i class="fi-star me-2 me-sm-3 lead"></i>
<div>A simple accent alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary d-flex" role="alert">
<i class="fi-clock me-2 me-sm-3 lead"></i>
<div>A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Success alert -->
<div class="alert alert-success d-flex" role="alert">
<i class="fi-check-circle me-2 me-sm-3 lead"></i>
<div>A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Danger alert -->
<div class="alert alert-danger d-flex" role="alert">
<i class="fi-x-circle me-2 me-sm-3 lead"></i>
<div>A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Warning alert -->
<div class="alert alert-warning d-flex" role="alert">
<i class="fi-alert-triangle me-2 me-sm-3 lead"></i>
<div>A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Info alert -->
<div class="alert alert-info d-flex" role="alert">
<i class="fi-alert-circle me-2 me-sm-3 lead"></i>
<div>A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Light alert -->
<div class="alert alert-light d-flex" role="alert">
<i class="fi-unlock me-2 me-sm-3 lead"></i>
<div>A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</div>
<!-- Dark alert -->
<div class="alert alert-dark d-flex" role="alert">
<i class="fi-map-pin me-2 me-sm-3 lead"></i>
<div>A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
</divDismissible alerts
Primary alert: Dismiss me by clicking the close button on the right.
Accent alert: Dismiss me by clicking the close button on the right.
Secondary alert: Dismiss me by clicking the close button on the right.
Success alert: Dismiss me by clicking the close button on the right.
Danger alert: Dismiss me by clicking the close button on the right.
Warning alert: Dismiss me by clicking the close button on the right.
Info alert: Dismiss me by clicking the close button on the right.
Light alert: Dismiss me by clicking the close button on the right.
Dark alert: Dismiss me by clicking the close button on the right.
<!-- Primary alert -->
<div class="alert alert-primary alert-dismissible fade show" role="alert">
<span class="fw-bold">Primary alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Secondary alert -->
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
<span class="fw-bold">Secondary alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Success alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<span class="fw-bold">Success alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Danger alert -->
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<span class="fw-bold">Danger alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Warning alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span class="fw-bold">Warning alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Info alert -->
<div class="alert alert-info alert-dismissible fade show" role="alert">
<span class="fw-bold">Info alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Light alert -->
<div class="alert alert-light alert-dismissible fade show" role="alert">
<span class="fw-bold">Light alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Dark alert -->
<div class="alert alert-dark alert-dismissible fade show" role="alert">
<span class="fw-bold">Dark alert:</span> Dismiss me by clicking the close button on the right.
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
</divAdditional content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<!-- Accent alert -->
<div class="alert alert-accent" role="alert">
<h4 class="pt-2 alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="pt-3 mb-2">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div