<div> 
    <div class="alert alert-primary" role="alert"> A simplesss primary alert</div>
    <div class="alert alert-secondary" role="alert"> A simple secondary alert </div>
    <div class="alert alert-success" role="alert"> A simple success alert </div>
    <div class="alert alert-danger" role="alert"> A simple danger alert </div>
    <div class="alert alert-warning" role="alert"> A simple warning alert </div>
    <div class="alert alert-info" role="alert"> A simple info alert </div>
    <div class="alert alert-light" role="alert"> A simple light alert </div>
    <div class="alert alert-dark" role="alert"> A simple dark alert </div>
</div>

<div>
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        <i class="uil uil-user-circle me-2"></i>
        A simple primary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-secondary alert-dismissible fade show" role="alert">
        <i class="uil uil-pen me-2"></i>
        A simple secondary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="uil uil-check me-2"></i>
        A simple success alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-purple alert-dismissible fade show" role="alert">
        <i class="uil uil-bag me-2"></i>
        A simple purple alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="uil uil-exclamation-octagon me-2"></i>
        A simple danger alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <i class="uil uil-exclamation-triangle me-2"></i>
        A simple warning alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <i class="uil uil-question-circle me-2"></i>
        A simple info alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-light alert-dismissible fade show" role="alert">
        <i class="uil uil-moon me-2"></i>
        A simple light alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
        <i class="uil uil-location-arrow-alt me-2"></i>
        A simple dark alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>

<div>
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        A simple primary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">  
        </button>
    </div>
    <div class="alert alert-secondary alert-dismissible fade show" role="alert">
        A simple secondary alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        A simple success alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    <div class="alert alert-purple alert-dismissible fade show" role="alert">
        A simple purple alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        A simple danger alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        A simple warning alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        A simple info alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    <div class="alert alert-light alert-dismissible fade show" role="alert">
        A simple light alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
    <div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
        A simple dark alert—check it out!
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
    </div>
</div>

<div>
    <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>
    <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>
    <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>
    <div class="alert alert-purple" role="alert">
        A simple purple alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <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>
    <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>
    <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> 
    <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>
    <div class="alert alert-dark mb-0" role="alert">
        A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div> 
</div>

<div>
    <div class="alert alert-border alert-border-primary alert-dismissible fade show" role="alert">
        <i class="uil uil-user-circle text-primary font-size-16 me-2"></i>
        A simple border primary alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-border alert-border-secondary alert-dismissible fade show" role="alert">
        <i class="uil uil-pen font-size-16 text-secondary me-2"></i>
        A simple border secondary alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
    </div>
    <div class="alert alert-border alert-border-success alert-dismissible fade show" role="alert">
        <i class="uil uil-check font-size-16 text-success me-2"></i>
        A simple border success alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-border alert-border-purple alert-dismissible fade show" role="alert">
        <i class="uil uil-bag font-size-16 text-purple me-2"></i>
        A simple border purple alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-border alert-border-danger alert-dismissible fade show" role="alert">
        <i class="uil uil-exclamation-octagon font-size-16 text-danger me-2"></i>
        A simple border danger alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-border alert-border-warning alert-dismissible fade show" role="alert">
        <i class="uil uil-exclamation-triangle font-size-16 text-warning me-2"></i>
        A simple border warning alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-border alert-border-info alert-dismissible fade show" role="alert">
        <i class="uil uil-question-circle font-size-16 text-info me-2"></i>
        A simple border info alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-border alert-border-light alert-dismissible fade show" role="alert">
        <i class="uil uil-moon font-size-16 text-secondary me-2"></i>
        A simple border light alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-border alert-border-dark alert-dismissible fade show mb-0" role="alert">
        <i class="uil uil-location-arrow-alt font-size-16 text-dark me-2"></i>
        A simple border dark alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>

<div>
    <div class="alert alert-primary alert-outline alert-dismissible fade show" role="alert">
        <i class="uil uil-user-circle text-primary font-size-16 me-2"></i>
        A simple outline primary alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-secondary alert-outline alert-dismissible fade show" role="alert">
        <i class="uil uil-pen font-size-16 text-secondary me-2"></i>
        A simple outline secondary alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-success alert-outline alert-dismissible fade show" role="alert">
        <i class="uil uil-check font-size-16 text-success me-2"></i>
        A simple outline success alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-purple alert-outline alert-dismissible fade show" role="alert">
        <i class="uil uil-bag font-size-16 text-purple me-2"></i>
        A simple outline purple alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-danger alert-outline alert-dismissible fade show" role="alert">
        <i class="uil uil-exclamation-octagon font-size-16 text-danger me-2"></i>
        A simple outline danger alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-warning alert-outline alert-dismissible fade show" role="alert">
        <i class="uil uil-exclamation-triangle font-size-16 text-warning me-2"></i>
        A simple outline warning alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-info alert-outline alert-dismissible fade show" role="alert">
        <i class="uil uil-question-circle font-size-16 text-info me-2"></i>
        A simple outline info alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-light alert-outline text-secondary alert-dismissible fade show" role="alert">
        <i class="uil uil-moon font-size-16 text-secondary me-2"></i>
        A simple outline light alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <div class="alert alert-dark alert-outline alert-dismissible fade show mb-0" role="alert">
        <i class="uil uil-location-arrow-alt font-size-16 text-dark me-2"></i>
        A simple outline dark alert
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>

<div>
    <div class="alert alert-primary px-4 rounded-pill" role="alert">
        A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary px-4 rounded-pill" role="alert">
        A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success px-4 rounded-pill" role="alert">
        A simple success alert—check it out!
    </div>
    <div class="alert alert-purple px-4 rounded-pill" role="alert">
        A simple success alert—check it out!
    </div>
    <div class="alert alert-danger px-4 rounded-pill" role="alert">
        A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning px-4 rounded-pill" role="alert">
        A simple warning alert—check it out!
    </div>
    <div class="alert alert-info px-4 rounded-pill" role="alert">
        A simple info alert—check it out!
    </div>
    <div class="alert alert-light px-4 rounded-pill" role="alert">
        A simple warning alert—check it out!
    </div>
    <div class="alert alert-dark mb-0 px-4 rounded-pill" role="alert">
        A simple warning alert—check it out!
    </div>
</div>