Elements - Alerts

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
               <h2>Style 1</h2>
                <div class="alert alert-primary d-flex align-items-center" role="alert">
                    <i class="fas fa-info-circle">&nbsp;</i><div><strong>Info:</strong> Nulla leo nibh, porta et felis non, scelerisque pellentesque lorem. Pellentesque eget velit id nulla pellentesque semper.</div>
                </div>
            </div>
        </div>
    </div>
</section>

                        Copy to clipboard
                    

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Style 2</h2>
                <div class="alert alert-success d-flex align-items-center" role="alert">
                    <i class="fas fa-check-circle">&nbsp;</i><div><strong>Success:</strong> Nulla leo nibh, porta et felis non, scelerisque pellentesque lorem. Pellentesque eget velit id nulla pellentesque semper.
                </div>
            </div>
        </div>
    </div>
</section>
                        Copy to clipboard
                    

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
            <h2>Style 3</h2>
                <div class="alert alert-warning d-flex align-items-center" role="alert">
                    <i class="fas fa-exclamation-circle">&nbsp;</i><div><strong>Warning:</strong> Nulla leo nibh, porta et felis non, scelerisque pellentesque lorem. Pellentesque eget velit id nulla pellentesque semper.</div>
                </div>
            </div>
        </div>
    </div>
</section>
                        Copy to clipboard
                    

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Style 4</h2>
                <div class="alert alert-danger d-flex align-items-center" role="alert">
                    <i class="fas fa-times-circle">&nbsp;</i><div><strong>Danger:</strong> Nulla leo nibh, porta et felis non, scelerisque pellentesque lorem. Pellentesque eget velit id nulla pellentesque semper.</div>
                </div>
            </div>
        </div>
    </div>
 </section>
                        Copy to clipboard
                    

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Style 5</h2>
                <div class="alert alert-primary alert-dismissible fade show d-flex align-items-center" role="alert">
                    <i class="fas fa-info-circle">&nbsp;</i><div><strong>Info:</strong> Nulla leo nibh, porta et felis non, scelerisque pellentesque lorem. Pellentesque eget velit id nulla pellentesque semper.</div><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>
</section>
                        Copy to clipboard
                    

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Style 6</h2>
                <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                    <i class="fas fa-check-circle">&nbsp;</i><div><strong>Success:</strong> Nulla leo nibh, porta et felis non, scelerisque pellentesque lorem. Pellentesque eget velit id nulla pellentesque semper.</div><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>
</section>

                        Copy to clipboard
                    

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Style 7</h2>
                <div class="alert alert-warning alert-dismissible fade show d-flex align-items-center" role="alert">
                    <i class="fas fa-exclamation-circle">&nbsp;</i><div><strong>Warning:</strong> Nulla leo nibh, porta et felis non, scelerisque pellentesque lorem. Pellentesque eget velit id nulla pellentesque semper.</div><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>
</section>

                        Copy to clipboard