<div class="d-block mb-2 example-gap">
    <a href="#" class="btn btn-default">Default</a>
    <a href="#" class="btn btn-primary">Primary</a>
    <a href="#" class="btn btn-action">Action</a>
    <a href="#" class="btn btn-success">Success</a>
    <a href="#" class="btn btn-info">Info</a>
    <a href="#" class="btn btn-warning">Warning</a>
    <a href="#" class="btn btn-danger">Danger</a>
    <a href="#" class="btn btn-link">Link</a>
    <a href="#" class="btn btn-outline-primary">Outline-Primary</a>
    <a href="#" class="btn btn-outline-success">Outline-Success</a>
    <a href="#" class="btn btn-outline-info">Outline-Info</a>
    <a href="#" class="btn btn-outline-warning">Outline-Warning</a>
</div>
<div class="d-block bg-black p-3 example-gap">
    <a href="#" class="btn btn-outline-default">Outline-Default</a>
    <a href="#" class="btn btn-outline-white">Outline-White</a>
</div>

<div class="d-block mb-2 example-gap">
    <a href="#" class="btn btn-lg btn-default">Default</a>
    <a href="#" class="btn btn-lg btn-primary">Primary</a>
    <a href="#" class="btn btn-lg btn-action">Action</a>
    <a href="#" class="btn btn-lg btn-success">Success</a>
    <a href="#" class="btn btn-lg btn-info">Info</a>
    <a href="#" class="btn btn-lg btn-warning">Warning</a>
    <a href="#" class="btn btn-lg btn-danger">Danger</a>
    <a href="#" class="btn btn-lg btn-link">Link</a>
    <a href="#" class="btn btn-lg btn-outline-primary">Outline-Primary</a>
    <a href="#" class="btn btn-lg btn-outline-success">Outline-Success</a>
    <a href="#" class="btn btn-lg btn-outline-info">Outline-Info</a>
    <a href="#" class="btn btn-lg btn-outline-warning">Outline-Warning</a>
</div>
<div class="d-block bg-black p-3 example-gap">
    <a href="#" class="btn btn-lg btn-outline-default">Outline-Default</a>
    <a href="#" class="btn btn-lg btn-outline-white">Outline-White</a>
</div>

<div class="d-block mb-2 example-gap">
    <a href="#" class="btn disabled btn-default">Default</a>
    <a href="#" class="btn disabled btn-primary">Primary</a>
    <a href="#" class="btn disabled btn-action">Action</a>
    <a href="#" class="btn disabled btn-success">Success</a>
    <a href="#" class="btn disabled btn-info">Info</a>
    <a href="#" class="btn disabled btn-warning">Warning</a>
    <a href="#" class="btn disabled btn-danger">Danger</a>
    <a href="#" class="btn disabled btn-link">Link</a>
    <a href="#" class="btn disabled btn-outline-primary">Outline-Primary</a>
    <a href="#" class="btn disabled btn-outline-success">Outline-Success</a>
    <a href="#" class="btn disabled btn-outline-info">Outline-Info</a>
    <a href="#" class="btn disabled btn-outline-warning">Outline-Warning</a>
</div>
<div class="d-block bg-black p-3 example-gap">
    <a href="#" class="btn disabled btn-outline-default">Outline-Default</a>
    <a href="#" class="btn disabled btn-outline-white">Outline-White</a>
</div>

<div class="d-block mb-2 example-gap">
    <a href="#" class="btn btn-sm btn-default">Default</a>
    <a href="#" class="btn btn-sm btn-primary">Primary</a>
    <a href="#" class="btn btn-sm btn-action">Action</a>
    <a href="#" class="btn btn-sm btn-success">Success</a>
    <a href="#" class="btn btn-sm btn-info">Info</a>
    <a href="#" class="btn btn-sm btn-warning">Warning</a>
    <a href="#" class="btn btn-sm btn-danger">Danger</a>
    <a href="#" class="btn btn-sm btn-link">Link</a>
    <a href="#" class="btn btn-sm btn-outline-primary">Outline-Primary</a>
    <a href="#" class="btn btn-sm btn-outline-success">Outline-Success</a>
    <a href="#" class="btn btn-sm btn-outline-info">Outline-Info</a>
    <a href="#" class="btn btn-sm btn-outline-warning">Outline-Warning</a>
</div>
<div class="d-block bg-black p-3 example-gap">
    <a href="#" class="btn btn-sm btn-outline-default">Outline-Default</a>
    <a href="#" class="btn btn-sm btn-outline-white">Outline-White</a>
</div>

<div class="d-block mb-2 example-gap">
    <a href="#" class="btn btn-xs btn-default">Default</a>
    <a href="#" class="btn btn-xs btn-primary">Primary</a>
    <a href="#" class="btn btn-xs btn-action">Action</a>
    <a href="#" class="btn btn-xs btn-success">Success</a>
    <a href="#" class="btn btn-xs btn-info">Info</a>
    <a href="#" class="btn btn-xs btn-warning">Warning</a>
    <a href="#" class="btn btn-xs btn-danger">Danger</a>
    <a href="#" class="btn btn-xs btn-link">Link</a>
    <a href="#" class="btn btn-xs btn-outline-primary">Outline-Primary</a>
    <a href="#" class="btn btn-xs btn-outline-success">Outline-Success</a>
    <a href="#" class="btn btn-xs btn-outline-info">Outline-Info</a>
    <a href="#" class="btn btn-xs btn-outline-warning">Outline-Warning</a>
</div>
<div class="d-block bg-black p-3 example-gap">
    <a href="#" class="btn btn-xs btn-outline-default">Outline-Default</a>
    <a href="#" class="btn btn-xs btn-outline-white">Outline-White</a>
</div>

<button type="button" class="btn btn-default"><i class="fa fa-user icon-left"></i> Default</button>
<button type="button" class="btn btn-primary"><i class="fa fa-user icon-left"></i> Primary</button>
<button type="button" class="btn btn-action"><i class="fa fa-user icon-left"></i>Action</button>
<button type="button" class="btn btn-gray"><i class="fa fa-user icon-left"></i> Gray</button>

<button type="button" class="btn btn-default">Default <i class="fa fa-user icon-right"></i></button>
<button type="button" class="btn btn-primary">Primary <i class="fa fa-user icon-right"></i></button>
<button type="button" class="btn btn-action">Action <i class="fa fa-user icon-right"></i></button>
<button type="button" class="btn btn-gray">Gray <i class="fa fa-user icon-right"></i></button>

<button type="button" class="btn btn-default"><span class="label label-primary icon-left">NEW</span> Default</button>
<button type="button" class="btn btn-primary"><span class="label label-primary icon-left">NEW</span> Primary</button>
<button type="button" class="btn btn-action"><span class="label label-primary icon-left">NEW</span>Action</button>
<button type="button" class="btn btn-gray"><span class="label label-primary icon-left">NEW</span> Gray</button>

<button type="button" class="btn btn-default">Default <span class="label label-primary icon-right">NEW</span></button>
<button type="button" class="btn btn-primary">Primary <span class="label label-primary icon-right">NEW</span></button>
<button type="button" class="btn btn-action">Action <span class="label label-primary icon-right">NEW</span></button>
<button type="button" class="btn btn-gray">Gray <span class="label label-primary icon-right">NEW</span></button>

        <div class="d-block mb-2 example-gap"><div class="btn-group">
                <a href="#" class="btn btn-default">Default</a>
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-primary">Primary</a>
                <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-action">Action</a>
                <a href="#" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-success">Success</a>
                <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-info">Info</a>
                <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-warning">Warning</a>
                <a href="#" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-danger">Danger</a>
                <a href="#" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-link">Link</a>
                <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-outline-primary">Outline-Primary</a>
                <a href="#" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-outline-success">Outline-Success</a>
                <a href="#" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-outline-info">Outline-Info</a>
                <a href="#" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group">
                <a href="#" class="btn btn-outline-warning">Outline-Warning</a>
                <a href="#" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div></div>

        <div class="d-block mb-2 example-gap"><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-default">Default</a>
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-primary">Primary</a>
                <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-action">Action</a>
                <a href="#" class="btn btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-success">Success</a>
                <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-info">Info</a>
                <a href="#" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-warning">Warning</a>
                <a href="#" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-danger">Danger</a>
                <a href="#" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-link">Link</a>
                <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-outline-primary">Outline-Primary</a>
                <a href="#" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-outline-success">Outline-Success</a>
                <a href="#" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-outline-info">Outline-Info</a>
                <a href="#" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div><div class="btn-group d-flex mb-2">
                <a href="#" class="btn btn-outline-warning">Outline-Warning</a>
                <a href="#" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-caret-down"></i></a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </div></div>