### Alerts

#### Default

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-primary mb-4" role="alert">
        <button type="button" class="close" data-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 mb-4" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <strong>Primary!</strong> Lorem Ipsum is simply dummy text of the printing.
    </div>

#### Light 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-light-warning mb-4" role="alert">
        <button type="button" class="close" data-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 mb-4" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg  data-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 mb-4" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg  data-dismiss="alert"> ... </svg></button>
        <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="close" data-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">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <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 mb-4" role="alert">
        <button type="button" class="close" data-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-default btn-dismiss">Accept</button>
                </div>
            </div>
        </div>
    </div>

New! Alert with gradient.

    <div class="alert alert-gradient mb-4" role="alert">
        <button type="button" class="close" data-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 mb-4" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><svg> ... </svg></button>
        <strong>New!</strong> Alert with background image.
    </div>