<!-- Basic Alerts -->
    <div class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary" role="alert">
        A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success" role="alert">
        A simple success alert—check it out!
    </div>
    <div class="alert alert-danger" role="alert">
        A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning" role="alert">
        A simple warning alert—check it out!
    </div>
    <div class="alert alert-info" role="alert">
        A simple info alert—check it out!
    </div>
    <div class="alert alert-light" role="alert">
        A simple light alert—check it out!
    </div>
    <div class="alert alert-dark" role="alert">
        A simple dark alert—check it out!
    </div>
    

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

<!-- Alert with icon -->
        <div class="alert alert-primary d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-bell"></i>
        </div>
        <div>A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-secondary d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-clock"></i>
        </div>
        <div>A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-success d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-check-circle"></i>
        </div>
        <div>A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-danger d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-exclamation-triangle"></i>
        </div>
        <div>A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-warning d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-question-circle"></i>
        </div>
        <div>A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-info d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-info-circle"></i>
        </div>
        <div>A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-light d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-lock"></i>
        </div>
        <div>A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-dark d-flex align-items-center" role="alert">
        <div class="alert-icon">
            <i class="bi bi-emoji-smile"></i>
        </div>
        <div>A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    

<!-- Alert with icon bg -->
    <div class="alert alert-primary d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-bell"></i>
        </div>
        <div>A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-secondary d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-clock"></i>
        </div>
        <div>A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-success d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-check-circle"></i>
        </div>
        <div>A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-danger d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-exclamation-triangle"></i>
        </div>
        <div>A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-warning d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-question-circle"></i>
        </div>
        <div>A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-info d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-info-circle"></i>
        </div>
        <div>A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-light d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-lock"></i>
        </div>
        <div>A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    <div class="alert alert-dark d-flex align-items-center" role="alert">
        <div class="alert-icon-bg h-100">
            <i class="bi bi-emoji-smile"></i>
        </div>
        <div>A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
    </div>
    

<!-- Dismissible alerts -->
        <!-- Primary alert -->
        <div class="alert alert-primary alert-dismissible fade show" role="alert">
            <strong>Primary alert:</strong> Dismiss me by clicking the close button on the right.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-plus-lg"></i></button>
        </div>
        
        <!-- Secondary alert -->
        <div class="alert alert-secondary alert-dismissible fade show" role="alert">
            <strong>Secondary alert:</strong> Dismiss me by clicking the close button on the right.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-plus-lg"></i></button>
        </div>
        
        <!-- Success alert -->
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>Success alert:</strong> Dismiss me by clicking the close button on the right.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-plus-lg"></i></button>
        </div>
        
        <!-- Danger alert -->
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Danger alert:</strong> Dismiss me by clicking the close button on the right.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-plus-lg"></i></button>
        </div>
        
        <!-- Warning alert -->
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>Warning alert:</strong> Dismiss me by clicking the close button on the right.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-plus-lg"></i></button>
        </div>
        
        <!-- Info alert -->
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <strong>Info alert:</strong> Dismiss me by clicking the close button on the right.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-plus-lg"></i></button>
        </div>
        
        <!-- Light alert -->
        <div class="alert alert-light alert-dismissible fade show" role="alert">
            <strong>Light alert:</strong> Dismiss me by clicking the close button on the right.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-plus-lg"></i></button>
        </div>
        
        <!-- Dark alert -->
        <div class="alert alert-dark alert-dismissible fade show" role="alert">
            <strong>Dark alert:</strong> 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"><i class="bi bi-plus-lg"></i></button>
        </div>
    

<!-- Additional content -->
        <div class="alert alert-purple additional" role="alert">
        <h4 class="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="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>