<div class="uk-section uk-height-viewport uk-flex uk-flex-middle">
    <div class="uk-container uk-container-small uk-flex-auto">

        <div uk-alert>
            <a href="#" class="uk-alert-close" uk-close></a>
            <div uk-grid>
                <div class="uk-width-expand@m">
                    <strong>Default!</strong> Lorem ipsum <a href="#">dolor</a> Lorem ipsum dolor sit amet consetetur sadipscing elitr.
                </div>
                <div class="uk-width-auto@m">
                    <button class="uk-button uk-button-small uk-button-default uk-margin-right">Button</button>
                </div>
            </div>
        </div>

        <div class="uk-alert-primary" uk-alert>
            <a href="#" class="uk-alert-close" uk-close></a>
            <div uk-grid>
                <div class="uk-width-expand@m">
                    <strong>Default!</strong> Lorem ipsum <a href="#">dolor</a> Lorem ipsum dolor sit consetetur sadipscing sed diam nonumy.
                </div>
                <div class="uk-width-auto@m">
                    <button class="uk-button uk-button-small uk-button-default uk-margin-right">Button</button>
                </div>
            </div>
        </div>

        <div class="uk-alert-success" uk-alert>
            <a href="#" class="uk-alert-close" uk-close></a>
            <div uk-grid>
                <div class="uk-width-expand@m">
                    <strong>Default!</strong> Lorem ipsum <a href="#">dolor</a> Lorem ipsum dolor sit amet consetetur.
                </div>
                <div class="uk-width-auto@m">
                    <button class="uk-button uk-button-small uk-button-default uk-margin-right">Button</button>
                </div>
            </div>
        </div>

        <div class="uk-alert-warning" uk-alert>
            <a href="#" class="uk-alert-close" uk-close></a>
            <div uk-grid>
                <div class="uk-width-expand@m">
                    <strong>Default!</strong> Lorem ipsum <a href="#">dolor</a> Lorem ipsum dolor sit consetetur sadipscing nonumy.
                </div>
                <div class="uk-width-auto@m">
                    <button class="uk-button uk-button-small uk-button-default uk-margin-right">Button</button>
                </div>
            </div>
        </div>

        <div class="uk-alert-danger" uk-alert>
            <a href="#" class="uk-alert-close" uk-close></a>
            <div uk-grid>
                <div class="uk-width-expand@m">
                    <strong>Default!</strong> Lorem ipsum <a href="#">dolor</a> sit amet consectetur.
                </div>
                <div class="uk-width-auto@m">
                    <button class="uk-button uk-button-small uk-button-default uk-margin-right">Button</button>
                </div>
            </div>
        </div>

    </div>
</div>
