<div class="row g-6 mb-6">
    <!-- Alerts -->
    <div class="col-md">
        <div class="card">
            <h5 class="card-header">Alerts</h5>
            <div class="card-body">

                <div class="alert alert-outline-danger" role="alert">
                    This is a danger outline alert — check it out!
                </div>

                <div class="alert alert-outline-dark" role="alert">
                    This is a dark outline alert — check it out!
                </div>

                <div class="alert alert-danger alert-dismissible" role="alert">
                    This is a danger dismissible 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 mb-0" role="alert">
                    This is a dark dismissible alert — check it out!
                    <button type="button" class="btn-close"
                            data-bs-dismiss="alert"
                            aria-label="Close"></button>
                </div>

            </div>
        </div>
    </div>
    <!--/ Alerts -->
</div>