#### Default Alerts

Primary! Lorem Ipsum is simply dummy text of the printing.
Warning! Lorem Ipsum is simply dummy text of the printing.
Success! Lorem Ipsum is simply dummy text of the printing.
Info! Lorem Ipsum is simply dummy text of the printing.
Error! Lorem Ipsum is simply dummy text of the printing.
Error! Lorem Ipsum is simply dummy text of the printing.

    <div class="alert alert-light-primary alert-dismissible fade show border-0 mb-4" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.</button>
    </div>

#### Outline Alerts

Primary! Lorem Ipsum is simply dummy text of the printing.
Error! Lorem Ipsum is simply dummy text of the printing.

    <div class="alert alert-outline-primary alert-dismissible fade show mb-4" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
    </div>

#### Solid Alerts

Warning! Lorem Ipsum is simply dummy text of the printing.
Info! Lorem Ipsum is simply dummy text of the printing.

    <div class="alert alert-warning alert-dismissible fade show mb-4" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
    </div>

#### Alerts with icon

Warning! Lorem Ipsum is simply dummy printing.
Warning! Lorem Ipsum is simply dummy printing.

    <div class="alert alert-icon-left alert-light-primary alert-dismissible fade show mb-4" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg  data-bs-dismiss="alert"> ... </svg></button>
        <svg> ... </svg>
        <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
    </div>

    <div class="alert alert-icon-right alert-light-primary alert-dismissible fade show mb-4" role="alert">
        <svg> ... </svg>
        <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
    </div>

#### Arrowed Alerts

Warning! Lorem Ipsum is simply dummy printing.
Warning! Lorem Ipsum is simply dummy printing.

    <div class="alert alert-arrow-left alert-icon-left alert-light-primary mb-4"
    role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <svg> ... </svg>
        <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
    </div>

    <div class="alert alert-arrow-right alert-icon-right alert-light-primary mb-4"
    role="alert">
        <svg> ... </svg>
        <strong>Warning!</strong> Lorem Ipsum is simply dummy printing.
    </div>

#### Custom Alerts

Warning! Lorem Ipsum is simply dummy text of the printing.

    <div class="alert custom-alert-1 alert-dismissible fade show mb-4" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> .... </svg></button>
        <div class="media">
            <div class="alert-icon">
                <svg> .... </svg>
            </div>
            <div class="media-body">
                <div class="alert-text">
                    <strong>Warning! </strong><span> Lorem Ipsum is simply dummy text of the printing.</span>
                </div>
                <div class="alert-btn">
                    <button type="button" class="btn btn-secondary">Accept</button>
                </div>
            </div>
        </div>
    </div>

New! Alert with gradient.

    <div class="alert alert-gradient alert-dismissible fade show mb-4" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <strong>New!</strong> Alert with gradient.
    </div>

New! Alert with background image.

    <div class="alert alert-background alert-dismissible fade show mb-4" role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <strong>New!</strong> Alert with background image.
    </div>