Alerts
Basic Colors
This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.
<!-- Primary -->
<div class="alert alert-primary d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-primary fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-primary">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Secondary -->
<div class="alert alert-secondary d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-secondary fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-secondary">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Success -->
<div class="alert alert-success d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-success fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-success">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Warning -->
<div class="alert alert-warning d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-warning fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-warning">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Danger -->
<div class="alert alert-danger d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-danger fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-danger">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Info -->
<div class="alert alert-info d-flex align-items-center p-5">
<i class="ki-duotone ki-shield-tick text-info fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-info">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
University Colors
This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.
<!-- Blue -->
<div class="alert alert-blue d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-blue fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-blue">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Aqua -->
<div class="alert alert-aqua d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-aqua fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-aqua">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FK -->
<div class="alert alert-fk d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fk fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fk">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FKG -->
<div class="alert alert-fkg d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fkg fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fkg">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FP -->
<div class="alert alert-fp d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fp fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fp">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FHIK -->
<div class="alert alert-fhik d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fhik fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fhik">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FHBD -->
<div class="alert alert-fhbd d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fhbd fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fhbd">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FTRC -->
<div class="alert alert-ftrc d-flex align-items-center p-5">
<i class="ki-duotone ki-shield-tick text-ftrc fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-ftrc">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
Solid Colors
This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.
<!-- Primary -->
<div class="alert bg-primary d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Secondary -->
<div class="alert bg-secondary d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Success -->
<div class="alert bg-success d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Warning -->
<div class="alert bg-warning d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Danger -->
<div class="alert bg-danger d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Info -->
<div class="alert bg-info d-flex align-items-center p-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
University Solid Colors
This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.
<!-- Blue -->
<div class="alert bg-blue d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Aqua -->
<div class="alert bg-aqua d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FK -->
<div class="alert bg-fk d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FKG -->
<div class="alert bg-fkg d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FP -->
<div class="alert bg-fp d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FHIK -->
<div class="alert bg-fhik d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FHBD -->
<div class="alert bg-fhbd d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FTRC -->
<div class="alert bg-ftrc d-flex align-items-center p-5">
<i class="ki-duotone ki-shield-tick text-light fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-light">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
Subtle Colors
This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.
<!-- Primary -->
<div class="alert bg-primary-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-primary fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-primary">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Secondary -->
<div class="alert bg-secondary-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-secondary fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-secondary">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Success -->
<div class="alert bg-success-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-success fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-success">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Warning -->
<div class="alert bg-warning-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-warning fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-warning">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Danger -->
<div class="alert bg-danger-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-danger fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-danger">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Info -->
<div class="alert bg-info-subtle d-flex align-items-center p-5">
<i class="ki-duotone ki-shield-tick text-info fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-info">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
University Subtle Colors
This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.This is an alert
The alert component can be used to highlight certain parts of your page for higher content visibility.
<!-- Blue -->
<div class="alert bg-primary-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-primary fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-primary">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- Aqua -->
<div class="alert bg-aqua-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-aqua fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-aqua">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FK -->
<div class="alert bg-fk-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fk fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fk">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FKG -->
<div class="alert bg-fkg-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fkg fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fkg">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FP -->
<div class="alert bg-fp-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fp fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fp">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FHIK -->
<div class="alert bg-fhik-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fhik fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fhik">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FHBD -->
<div class="alert bg-fhbd-subtle d-flex align-items-center p-5 mb-5">
<i class="ki-duotone ki-shield-tick text-fhbd fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-fhbd">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>
<!-- FTRC -->
<div class="alert bg-ftrc-subtle d-flex align-items-center p-5 mb-0">
<i class="ki-duotone ki-shield-tick text-ftrc fs-3x me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
<div class="d-flex flex-column text-ftrc">
<h4 class="mb-1">This is an alert</h4>
<span>The alert component can be used to highlight certain parts of your page for higher content visibility.</span>
</div>
</div>