<?php require 'inc/_global/config.php'; ?>
<?php require 'inc/backend/config.php'; ?>
<?php require 'inc/_global/views/head_start.php'; ?>
<?php require 'inc/_global/views/head_end.php'; ?>
<?php require 'inc/_global/views/page_start.php'; ?>

<!-- Hero -->
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
            <h1 class="flex-sm-fill h3 my-2">
                Buttons <small class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted">Custom buttons styles to fulfill any design approach.</small>
            </h1>
            <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                <ol class="breadcrumb breadcrumb-alt">
                    <li class="breadcrumb-item">Elements</li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a class="link-fx" href="">Buttons</a>
                    </li>
                </ol>
            </nav>
        </div>
   </div>
</div>
<!-- END Hero -->

<!-- Page Content -->
<div class="content">
    <!-- Buttons Styles -->
    <h2 class="content-heading">Styles</h2>

    <!-- Default -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Default</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                The default button style with various colors to choose from. Prefer using 2 or max 3 button color variations in your web project to make it easier and more accesible for your users.
            </p>
            <div class="row items-push-2x text-center text-sm-left">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-primary">Primary</button>
                    <div class="mt-2">
                        <code>btn-primary</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-secondary">Secondary</button>
                    <div class="mt-2">
                        <code>btn-secondary</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-success">Success</button>
                    <div class="mt-2">
                        <code>btn-success</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-info">Info</button>
                    <div class="mt-2">
                        <code>btn-info</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-warning">Warning</button>
                    <div class="mt-2">
                        <code>btn-warning</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-danger">Danger</button>
                    <div class="mt-2">
                        <code>btn-danger</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-dark">Dark</button>
                    <div class="mt-2">
                        <code>btn-dark</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-light">Light</button>
                    <div class="mt-2">
                        <code>btn-light</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END Default -->

    <!-- Outline -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Outline</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                Outline styles are also available for all previous color variations
            </p>
            <div class="row items-push-2x text-center text-sm-left">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-primary">Primary</button>
                    <div class="mt-2">
                        <code>btn-outline-primary</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
                    <div class="mt-2">
                        <code>btn-outline-secondary</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-success">Success</button>
                    <div class="mt-2">
                        <code>btn-outline-success</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-info">Info</button>
                    <div class="mt-2">
                        <code>btn-outline-info</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-warning">Warning</button>
                    <div class="mt-2">
                        <code>btn-outline-warning</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-danger">Danger</button>
                    <div class="mt-2">
                        <code>btn-outline-danger</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-dark">Dark</button>
                    <div class="mt-2">
                        <code>btn-outline-dark</code>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-light">Light</button>
                    <div class="mt-2">
                        <code>btn-outline-light</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END Outline -->
    <!-- END Buttons Styles -->

    <!-- Button Effects -->
    <h2 class="content-heading">Effects</h2>

    <!-- Ripple -->
    <!-- Ripple functionality ([data-toggle="click-ripple"] is initialized in Helpers.coreRipple()) -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Ripple</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                Inspired by Material design, adding a ripple animation on click is just a data attribute away <code>data-toggle=&quot;click-ripple&quot;</code>
            </p>

            <!-- Default -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-primary" data-toggle="click-ripple">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-secondary" data-toggle="click-ripple">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-success" data-toggle="click-ripple">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-info" data-toggle="click-ripple">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-warning" data-toggle="click-ripple">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-danger" data-toggle="click-ripple">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-dark" data-toggle="click-ripple">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-light" data-toggle="click-ripple">Light</button>
                </div>
            </div>
            <!-- END Default -->

            <!-- Outline -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-primary" data-toggle="click-ripple">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-secondary" data-toggle="click-ripple">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-success" data-toggle="click-ripple">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-info" data-toggle="click-ripple">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-warning" data-toggle="click-ripple">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-danger" data-toggle="click-ripple">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-dark" data-toggle="click-ripple">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-light" data-toggle="click-ripple">Light</button>
                </div>
            </div>
            <!-- END Outline -->
        </div>
    </div>
    <!-- END Ripple -->
    <!-- END Button Effects -->

    <!-- Button Variations -->
    <h2 class="content-heading">Variations</h2>

    <!-- Small Size -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Small Size</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                You can use the class <code>btn-sm</code> to make your buttons smaller
            </p>

            <!-- Default -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-light">Light</button>
                </div>
            </div>
            <!-- Default -->

            <!-- Outline -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-sm btn-outline-light">Light</button>
                </div>
            </div>
            <!-- END Outline -->
        </div>
    </div>
    <!-- END Small Size -->

    <!-- Large Size -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Large Size</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                You can use the class <code>btn-lg</code> to make your buttons larger
            </p>

            <!-- Default -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-light">Light</button>
                </div>
            </div>
            <!-- END Default -->

            <!-- Outline -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-lg btn-outline-light">Light</button>
                </div>
            </div>
            <!-- END Outline -->
        </div>
    </div>
    <!-- END Large Size -->

    <!-- Square -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Square</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                You can remove border radius from your buttons if you are looking for a sharp look by using the class <code>btn-square</code>
            </p>

            <!-- Default -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-light">Light</button>
                </div>
            </div>
            <!-- END Default -->

            <!-- Outline -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-square btn-outline-light">Light</button>
                </div>
            </div>
            <!-- END Outline -->
        </div>
    </div>
    <!-- END Square -->

    <!-- Rounded -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Rounded</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                Fully rounded buttons are available for all available button styles
            </p>

            <!-- Default -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-light">Light</button>
                </div>
            </div>
            <!-- END Default -->

            <!-- Outline -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-primary">Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-success">Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-info">Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-warning">Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-rounded btn-outline-light">Light</button>
                </div>
            </div>
            <!-- END Outline -->
        </div>
    </div>
    <!-- END Rounded -->

    <!-- Disabled -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Disabled</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                If an action is not available in a specific state of your website/app, you can easily disable your buttons
            </p>

            <!-- Default -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-primary" disabled>Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-secondary" disabled>Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-success" disabled>Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-info" disabled>Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-warning" disabled>Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-danger" disabled>Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-dark" disabled>Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-light" disabled>Light</button>
                </div>
            </div>
            <!-- END Default -->

            <!-- Outline -->
            <div class="row items-push text-center text-sm-left mb-4">
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-primary" disabled>Primary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-success" disabled>Success</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-info" disabled>Info</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-warning" disabled>Warning</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-danger" disabled>Danger</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-dark" disabled>Dark</button>
                </div>
                <div class="col-sm-6 col-xl-4">
                    <button type="button" class="btn btn-outline-light" disabled>Light</button>
                </div>
            </div>
            <!-- END Outline -->
        </div>
    </div>
    <!-- END Disabled -->

    <!-- Icons -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Icons</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                You can use any of the <a href="be_ui_icons.php">available icons</a> in your buttons to visualize its intended action
            </p>

            <!-- Default -->
            <div class="mb-4">
                <button type="button" class="btn btn-success mr-1 mb-3">
                    <i class="fa fa-fw fa-plus mr-1"></i> Add User
                </button>
                <button type="button" class="btn btn-info mr-1 mb-3">
                    <i class="fa fa-fw fa-download mr-1"></i> Download
                </button>
                <button type="button" class="btn btn-warning mr-1 mb-3">
                    <i class="fa fa-fw fa-exclamation-triangle mr-1"></i> Are you sure?
                </button>
                <button type="button" class="btn btn-primary mr-1 mb-3">
                    <i class="fa fa-fw fa-upload mr-1"></i> Upload
                </button>
                <button type="button" class="btn btn-secondary mr-1 mb-3">
                    <i class="fab fa-fw fa-bluetooth-b mr-1"></i> 3 Connections
                </button>
                <button type="button" class="btn btn-danger mr-1 mb-3">
                    <i class="fa fa-fw fa-times mr-1"></i> Delete
                </button>
                <button type="button" class="btn btn-primary mr-1 mb-3">
                    <i class="fa fa-fw fa-thumbs-up mr-1"></i> Like
                </button>
                <button type="button" class="btn btn-secondary mr-1 mb-3">
                    <i class="fa fa-fw fa-play mr-1"></i> Play
                </button>
                <button type="button" class="btn btn-dark mr-1 mb-3">
                    <i class="fa fa-fw fa-box mr-1"></i> 10 Products
                </button>
            </div>
            <!-- END Default -->

            <!-- Outline -->
            <div class="mb-4">
                <button type="button" class="btn btn-outline-success mr-1 mb-3">
                    <i class="fa fa-fw fa-plus mr-1"></i> Add User
                </button>
                <button type="button" class="btn btn-outline-info mr-1 mb-3">
                    <i class="fa fa-fw fa-download mr-1"></i> Download
                </button>
                <button type="button" class="btn btn-outline-warning mr-1 mb-3">
                    <i class="fa fa-fw fa-exclamation-triangle mr-1"></i> Are you sure?
                </button>
                <button type="button" class="btn btn-outline-primary mr-1 mb-3">
                    <i class="fa fa-fw fa-upload mr-1"></i> Upload
                </button>
                <button type="button" class="btn btn-outline-secondary mr-1 mb-3">
                    <i class="fab fa-fw fa-bluetooth-b mr-1"></i> 3 Connections
                </button>
                <button type="button" class="btn btn-outline-danger mr-1 mb-3">
                    <i class="fa fa-fw fa-times mr-1"></i> Delete
                </button>
                <button type="button" class="btn btn-outline-primary mr-1 mb-3">
                    <i class="fa fa-fw fa-thumbs-up mr-1"></i> Like
                </button>
                <button type="button" class="btn btn-outline-secondary mr-1 mb-3">
                    <i class="fa fa-fw fa-play mr-1"></i> Play
                </button>
                <button type="button" class="btn btn-outline-dark mr-1 mb-3">
                    <i class="fa fa-fw fa-box mr-1"></i> 10 Products
                </button>
            </div>
            <!-- END Outline -->
        </div>
    </div>
    <!-- END Icons -->

    <!-- Be Creative -->
    <div class="block">
        <div class="block-header">
            <h3 class="block-title">Be Creative</h3>
        </div>
        <div class="block-content">
            <p class="font-size-sm text-muted">
                Mix any of the available classes to create the button style you want to use in your project
            </p>
            <button type="button" class="btn btn-lg btn-square btn-secondary mr-1 mb-3">
                <i class="fa fa-fw fa-wifi mr-1"></i> Wifi Available
            </button>
            <button type="button" class="btn btn-rounded btn-danger mr-1 mb-3">
                <i class="fa fa-fw fa-times mr-1"></i> Rounded
            </button>
            <button type="button" class="btn btn-success mr-1 mb-3">
                <i class="fa fa-fw fa-check"></i>
            </button>
            <button type="button" class="btn btn-sm btn-warning mr-1 mb-3">
                <i class="fa fa-fw fa-exclamation-circle"></i>
            </button>
            <button type="button" class="btn btn-lg btn-outline-primary mr-1 mb-3">
                <i class="fab fa-fw fa-instagram mr-1"></i> Post your image
            </button>
            <button type="button" class="btn btn-rounded btn-success mr-1 mb-3">
                <i class="fa fa-fw fa-pencil-alt"></i>
            </button>
            <button type="button" class="btn btn-lg btn-secondary mr-1 mb-3">
                <i class="fab fa-fw fa-youtube mr-1"></i> YouTube
            </button>
            <button type="button" class="btn btn-sm btn-square btn-outline-warning mr-1 mb-3">
                <i class="far fa-fw fa-envelope mr-1"></i> Messages
            </button>
            <button type="button" class="btn btn-sm btn-dark mr-1 mb-3">
                <i class="fab fa-fw fa-dribbble mr-1"></i> Dribbble
            </button>
            <button type="button" class="btn btn-sm btn-primary mr-1 mb-3">
                <i class="fa fa-fw fa-archive mr-1"></i> Archive
            </button>
            <button type="button" class="btn btn-sm btn-secondary mr-1 mb-3">
                <i class="fa fa-fw fa-wrench mr-1"></i> Preferences
            </button>
            <button type="button" class="btn btn-lg btn-square btn-light mr-1 mb-3">
                <i class="fa fa-fw fa-cog mr-1"></i> Options
            </button>
            <button type="button" class="btn btn-sm btn-rounded btn-outline-dark mr-1 mb-3">
                <i class="fa fa-fw fa-image mr-1"></i> Picture
            </button>
            <button type="button" class="btn btn-lg btn-warning mr-1 mb-3">
                <i class="fa fa-fw fa-tint mr-1"></i> Themes
            </button>
            <button type="button" class="btn btn-sm btn-primary mr-1 mb-3">
                <i class="fa fa-fw fa-arrow-down mr-1"></i> Down
            </button>
            <button type="button" class="btn btn-lg btn-rounded btn-success mr-1 mb-3">
                <i class="si si-rocket mr-1"></i> Launch Product
            </button>
            <button type="button" class="btn btn-sm btn-square btn-info mr-1 mb-3">
                <i class="si si-chemistry mr-1"></i> Lab
            </button>
        </div>
    </div>
    <!-- END Be Creative -->
    <!-- END Button Variations -->
</div>
<!-- END Page Content -->

<?php require 'inc/_global/views/page_end.php'; ?>
<?php require 'inc/_global/views/footer_start.php'; ?>
<?php require 'inc/_global/views/footer_end.php'; ?>
