@extends('layouts.app')
@section('content')
    <div class="content-heading">Buttons</div>
    <!-- START row-->
    <div class="row">
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button colors</h3>
                </div>
                <div class="card-body">
                    <button class="mb-1 btn btn-secondary" type="button">Secondary</button>
                    <button class="mb-1 btn btn-primary" type="button">Primary</button>
                    <button class="mb-1 btn btn-success" type="button">Success</button>
                    <button class="mb-1 btn btn-info" type="button">Info</button>
                    <button class="mb-1 btn btn-warning" type="button">Warning</button>
                    <button class="mb-1 btn btn-danger" type="button">Danger</button>
                    <button class="mb-1 btn btn-inverse" type="button">Inverse</button>
                    <button class="mb-1 btn btn-green" type="button">Green</button>
                    <button class="mb-1 btn btn-purple" type="button">Purple</button>
                    <button class="mb-1 btn btn-pink" type="button">Pink</button>
                    <br />
                    <br />
                    <a class="btn btn-link" href="#">Button Link</a>
                    <button class="btn btn-secondary" type="button"><strong>button tag</strong></button>
                    <a class="btn btn-secondary" href="#"><strong>anchor tag</strong></a>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button Labeled</h3>
                </div>
                <div class="card-body">
                    <!-- Success button with label-->
                    <button class="btn btn-labeled btn-success mb-2" type="button">
                        <span class="btn-label"><i class="fa fa-check"></i></span>
                        Success
                    </button>
                    <!-- Danger button with label-->
                    <button class="btn btn-labeled btn-danger mb-2" type="button">
                        <span class="btn-label"><i class="fa fa-times"></i></span>
                        Danger
                    </button>
                    <!-- Info button with label-->
                    <button class="btn btn-labeled btn-info mb-2" type="button">
                        <span class="btn-label"><i class="fa fa-exclamation"></i></span>
                        Info
                    </button>
                    <!-- Warning button with label-->
                    <button class="btn btn-labeled btn-warning mb-2" type="button">
                        <span class="btn-label"><i class="fas fa-exclamation-triangle"></i></span>
                        Warning
                    </button>
                    <br />
                    <!-- Standard button with label-->
                    <button class="btn btn-labeled btn-secondary" type="button">
                        <span class="btn-label"><i class="fa fa-arrow-left"></i></span>
                        Left
                    </button>
                    <!-- Standard button with label on the right side-->
                    <button class="btn btn-labeled btn-secondary" type="button">
                        Right
                        <span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span>
                    </button>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button sizing</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-6">
                            <p>
                                <button class="btn btn-primary btn-lg" type="button">Large button</button>
                                <button class="btn btn-secondary btn-lg" type="button">Large button</button>
                            </p>
                            <p>
                                <button class="btn btn-primary" type="button">Secondary button</button>
                                <button class="btn btn-secondary" type="button">Secondary button</button>
                            </p>
                        </div>
                        <div class="col-xl-6">
                            <p>
                                <button class="btn btn-primary btn-sm" type="button">Small button</button>
                                <button class="btn btn-secondary btn-sm" type="button">Small button</button>
                            </p>
                            <p>
                                <button class="btn btn-primary btn-xs" type="button">Extra small button</button>
                                <button class="btn btn-secondary btn-xs" type="button">Extra small button</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button group</h3>
                </div>
                <div class="card-body">
                    <p></p>
                    <div class="btn-group">
                        <button class="btn btn-secondary" type="button">Left</button>
                        <button class="btn btn-secondary" type="button">Middle</button>
                        <button class="btn btn-secondary" type="button">Right</button>
                    </div>
                    <p></p>
                    <p></p>
                    <div class="btn-group">
                        <button class="btn btn-secondary" type="button">1</button>
                        <button class="btn btn-secondary" type="button">2</button>
                        <button class="btn btn-secondary" type="button">3</button>
                        <button class="btn btn-secondary" type="button">4</button>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-secondary" type="button">5</button>
                        <button class="btn btn-secondary" type="button">6</button>
                        <button class="btn btn-secondary" type="button">7</button>
                    </div>
                    <div class="btn-group"><button class="btn btn-secondary" type="button">8</button></div>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START card-->
    <div class="card card-default">
        <div class="card-header">
            <h3 class="card-title">Outline Buttons</h3>
        </div>
        <div class="card-body">
            <button class="mb-1 btn btn-outline-secondary" type="button">Secondary</button>
            <button class="mb-1 btn btn-outline-primary" type="button">Primary</button>
            <button class="mb-1 btn btn-outline-success" type="button">Success</button>
            <button class="mb-1 btn btn-outline-info" type="button">Info</button>
            <button class="mb-1 btn btn-outline-warning" type="button">Warning</button>
            <button class="mb-1 btn btn-outline-danger" type="button">Danger</button>
            <button class="mb-1 btn btn-outline-inverse" type="button">Inverse</button>
            <button class="mb-1 btn btn-outline-green" type="button">Green</button>
            <button class="mb-1 btn btn-outline-purple" type="button">Purple</button>
            <button class="mb-1 btn btn-outline-pink" type="button">Pink</button>
            <br />
            <br />
            <button class="mb-1 btn-lg btn btn-outline-primary" type="button">Outline Large</button>
            <button class="mb-1 btn-sm btn btn-outline-primary" type="button">Outline Small</button>
            <button class="mb-1 btn-xs btn btn-outline-primary" type="button">Outline xSmall</button>
        </div>
    </div>
    <!-- END card-->
    <!-- START row-->
    <div class="row">
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button Pills</h3>
                </div>
                <div class="card-body">
                    <p>Pill left</p>
                    <p>
                        <button class="btn btn-pill-left btn-secondary" type="button">Secondary</button>
                        <button class="btn btn-pill-left btn-primary" type="button">Primary</button>
                        <button class="btn btn-pill-left btn-success" type="button">Success</button>
                        <button class="btn btn-pill-left btn-info" type="button">Info</button>
                        <button class="btn btn-pill-left btn-warning" type="button">Warning</button>
                        <button class="btn btn-pill-left btn-danger" type="button">Danger</button>
                        <button class="btn btn-pill-left btn-inverse" type="button">Inverse</button>
                    </p>
                    <p>Pill right</p>
                    <p>
                        <button class="btn btn-pill-right btn-secondary" type="button">Secondary</button>
                        <button class="btn btn-pill-right btn-primary" type="button">Primary</button>
                        <button class="btn btn-pill-right btn-success" type="button">Success</button>
                        <button class="btn btn-pill-right btn-info" type="button">Info</button>
                        <button class="btn btn-pill-right btn-warning" type="button">Warning</button>
                        <button class="btn btn-pill-right btn-danger" type="button">Danger</button>
                        <button class="btn btn-pill-right btn-inverse" type="button">Inverse</button>
                    </p>
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button Oval</h3>
                </div>
                <div class="card-body">
                    <button class="btn btn-oval btn-secondary" type="button">Secondary</button>
                    <button class="btn btn-oval btn-primary" type="button">Primary</button>
                    <button class="btn btn-oval btn-success" type="button">Success</button>
                    <button class="btn btn-oval btn-info" type="button">Info</button>
                    <button class="btn btn-oval btn-warning" type="button">Warning</button>
                    <button class="btn btn-oval btn-danger" type="button">Danger</button>
                    <button class="btn btn-oval btn-inverse" type="button">Inverse</button>
                </div>
            </div>
            <!-- END card-->
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button Square</h3>
                </div>
                <div class="card-body">
                    <button class="btn btn-square btn-secondary" type="button">Secondary</button>
                    <button class="btn btn-square btn-primary" type="button">Primary</button>
                    <button class="btn btn-square btn-success" type="button">Success</button>
                    <button class="btn btn-square btn-info" type="button">Info</button>
                    <button class="btn btn-square btn-warning" type="button">Warning</button>
                    <button class="btn btn-square btn-danger" type="button">Danger</button>
                    <button class="btn btn-square btn-inverse" type="button">Inverse</button>
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Button dropdown</h3>
                </div>
                <div class="card-body">
                    <!-- START button group-->
                    <div class="btn-group mb-1">
                        <button class="btn dropdown-toggle btn-secondary" type="button" data-toggle="dropdown">secondary</button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group mb-1">
                        <button class="btn dropdown-toggle btn-primary" type="button" data-toggle="dropdown">primary</button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group mb-1">
                        <button class="btn dropdown-toggle btn-success" type="button" data-toggle="dropdown">success</button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group mb-1">
                        <button class="btn dropdown-toggle btn-info" type="button" data-toggle="dropdown">info</button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group mb-1">
                        <button class="btn dropdown-toggle btn-warning" type="button" data-toggle="dropdown">warning</button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group mb-1">
                        <button class="btn dropdown-toggle btn-danger" type="button" data-toggle="dropdown">danger</button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group mb-1">
                        <button class="btn dropdown-toggle btn-inverse" type="button" data-toggle="dropdown">inverse</button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                </div>
            </div>
            <!-- END card-->
        </div>
        <div class="col-lg-6">
            <!-- START card-->
            <div class="card card-default">
                <div class="card-header">
                    <h3 class="card-title">Split button dropdown</h3>
                </div>
                <div class="card-body">
                    <!-- START button group-->
                    <div class="btn-group">
                        <button class="btn btn-secondary" type="button">Action</button>
                        <button class="btn dropdown-toggle btn-secondary" type="button" data-toggle="dropdown"><span class="sr-only">secondary</span></button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group">
                        <button class="btn btn-primary" type="button">Action</button>
                        <button class="btn dropdown-toggle btn-primary" type="button" data-toggle="dropdown"><span class="sr-only">primary</span></button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group">
                        <button class="btn btn-success" type="button">Action</button>
                        <button class="btn dropdown-toggle btn-success" type="button" data-toggle="dropdown"><span class="sr-only">success</span></button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group">
                        <button class="btn btn-info" type="button">Action</button>
                        <button class="btn dropdown-toggle btn-info" type="button" data-toggle="dropdown"><span class="sr-only">info</span></button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group">
                        <button class="btn btn-warning" type="button">Action</button>
                        <button class="btn dropdown-toggle btn-warning" type="button" data-toggle="dropdown"><span class="sr-only">warning</span></button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group">
                        <button class="btn btn-danger" type="button">Action</button>
                        <button class="btn dropdown-toggle btn-danger" type="button" data-toggle="dropdown"><span class="sr-only">danger</span></button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                    <!-- START button group-->
                    <div class="btn-group">
                        <button class="btn btn-inverse" type="button">Action</button>
                        <button class="btn dropdown-toggle btn-inverse" type="button" data-toggle="dropdown"><span class="sr-only">inverse</span></button>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Separated link</a>
                        </div>
                    </div>
                    <!-- END button group-->
                </div>
            </div>
            <!-- END card-->
        </div>
    </div>
    <!-- END row-->
    <!-- START card-->
    <div class="card card-default">
        <div class="card-header">
            <h3 class="card-title">Button actions</h3>
        </div>
        <div class="card-body">
            <!-- START row-->
            <div class="row">
                <div class="col-xl-4 mb-3">
                    <h4>Single toggle</h4>
                    <button class="btn btn-primary" type="button" data-toggle="button" aria-pressed="false">Single toggle</button>
                </div>
                <div class="col-xl-4 mb-3">
                    <h4>Checkbox</h4>
                    <div class="btn-group-toggle" data-toggle="buttons">
                        <label class="btn btn-primary active">
                            <input type="checkbox" checked="" />
                            Checkbox 1
                        </label>
                        <label class="btn btn-primary">
                            <input type="checkbox" />
                            Checkbox 2
                        </label>
                        <label class="btn btn-primary">
                            <input type="checkbox" />
                            Checkbox 3
                        </label>
                    </div>
                </div>
                <div class="col-xl-4">
                    <h4>Radio</h4>
                    <div class="btn-group-toggle" data-toggle="buttons">
                        <label class="btn btn-primary active">
                            <input id="option1" type="radio" name="options" checked="" />
                            Radio 1
                        </label>
                        <label class="btn btn-primary">
                            <input id="option2" type="radio" name="options" />
                            Radio 2
                        </label>
                        <label class="btn btn-primary">
                            <input id="option3" type="radio" name="options" />
                            Radio 3
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- START card-->
    <div class="card card-default">
        <div class="card-header">
            <h3 class="card-title">Pagination</h3>
        </div>
        <div class="card-body">
            <!-- START row-->
            <div class="row">
                <div class="col-xl-6">
                    <div>
                        <h4>Sizes</h4>
                        <nav>
                            <ul class="pagination pagination-lg">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                <li class="page-item"><a class="page-link" href="#">5</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                                </li>
                            </ul>
                        </nav>
                        <nav>
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item active"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                <li class="page-item"><a class="page-link" href="#">5</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                                </li>
                            </ul>
                        </nav>
                        <nav>
                            <ul class="pagination pagination-sm">
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">4</a></li>
                                <li class="page-item active"><a class="page-link" href="#">5</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-xl-6">
                    <h4>Pager</h4>
                    <nav>
                        <ul class="pagination">
                            <li class="page-item previous">
                                <a class="page-link" href="#">
                                    <span class="mr-2" aria-hidden="true">&larr;</span>
                                    Older
                                </a>
                            </li>
                            <li class="page-item next ml-auto">
                                <a class="page-link" href="#">
                                    Newer
                                    <span class="ml-2" aria-hidden="true">&rarr;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav>
                        <ul class="pagination justify-content-center">
                            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                            <li class="page-item"><a class="page-link" href="#">Next</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- END row-->
        </div>
    </div>
    <!-- END card-->
@endsection
@section('styles')
    <style>
        .btn-group,
        .btn {
            margin: 0 0.25rem 0.25rem 0;
        }

        .btn-group > .btn {
            margin-right: 0;
        }
    </style>
@endsection
@section('scripts')@endsection