<div class="alert alert-outlined alert-primary-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-info-circle mr-4"></i>This is Primary outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-danger-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-exclamation-triangle mr-4"></i>This is Danger outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-success-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-check-circle mr-4"></i>This is Success outlined Alert with icon
 </div>

 <div class="alert alert-outlined alert-warning-outlined text-sm mx-5 p-4 rounded-sm d-flex align-center">
     <i class="fas fa-exclamation-triangle mr-4"></i>This is Warning outlined Alert with icon
 </div>