Alert card Bootstrap 5

by Suman

HTML CSS JS Tidy

<div class="container d-flex justify-content-center">
    <div class="card shaodw-lg  card-1">
        <div class="card-header pt-3 pb-0 ml-auto border-0 ">
            <svg class=" cursor-pointer" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 172 172" style=" fill:#000000;">
                <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
                    <path d="M0,172v-172h172v172z" fill="none"></path>
                    <g fill="#ffffff">
                        <path d="M33.73372,23.59961l-10.13411,10.13411l52.26628,52.26628l-52.26628,52.26628l10.13411,10.13411l52.26628,-52.26628l52.26628,52.26628l10.13411,-10.13411l-52.26628,-52.26628l52.26628,-52.26628l-10.13411,-10.13411l-52.26628,52.26628z"></path>
                    </g>
                </g>
            </svg>
        </div>
        <div class="card-body  d-flex pt-0">
            <div class="row no-gutters  mx-auto justify-content-start flex-sm-row flex-column">
                <div class="col-md-4  text-center">
                    <svg width="80px" height="80px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path d="M960.1 258.4H245.8l-36.1-169H63.9v44h110.2l26.7 125 100.3 469.9 530 0.4v-44l-494.4-0.3-22.6-105.9H832l128.1-320.1z m-65 44L855.6 401H276.3l-21.1-98.6h639.9zM304.8 534.5L279.7 417h569.5l-47 117.5H304.8z" fill="#ffffff" />
                        <path d="M375.6 810.6c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52m0-20c-39.7 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.3-72-72-72zM732 810.6c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52m0-20c-39.7 0-72 32.2-72 72s32.2 72 72 72c39.7 0 72-32.2 72-72s-32.3-72-72-72zM447.5 302.4h16v232.1h-16zM652 302.4h16v232.1h-16z" fill="#ffffff" />
                        <path d="M276.3 401l3.4 16-3.4-16z" fill="#343535" /> </svg>
                </div>
                <div class="col-md-6 ">
                    <div class="card border-0 ">
                        <div class="card-body">
                            <h5 class="card-title "><b>Alert Box</b></h5>
                            <p class="card-text ">
                                <p>This is alert box create in Bootstrap 5 Library</p>
                            </p>
                            <button type="button" class="btn btn-info btn-round-lg btn-lg"> Ok</button>
                            <button type="button" class="btn btn-info btn-round-lg btn-lg"> Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

HTML CSS JS Tidy

Alert card Bootstrap 5

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply