@extends('layouts.app')

@section('content')

          <div class="container-fluid">
            <div class="fade-in">
              <div class="row">
                <div class="col">
                  <div class="card">
                    <div class="card-header"> Dropdowns
                      <div class="card-header-actions"><a class="card-header-action" href="http://coreui.io/docs/components/bootstrap-dropdowns/" target="_blank"><small class="text-muted">docs</small></a></div>
                    </div>
                    <div class="card-body">
                      <div class="row">
                        <div class="col">
                          <div class="btn-group">
                            <div class="dropdown">
                              <button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><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>
                            </div>
                          </div>
                          <div class="btn-group">
                            <div class="dropdown show"><a class="btn btn-secondary dropdown-toggle" id="dropdownMenuLink" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"><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>
                            </div>
                          </div>
                        </div>
                      </div>
                      <hr>
                      <div class="btn-group">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <hr>
                      <div class="btn-group">
                        <button class="btn btn-primary" type="button">Primary</button>
                        <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(71px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-secondary" type="button">Secondary</button>
                        <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(89px, 34px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-success" type="button">Success</button>
                        <button class="btn btn-success dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                        <div class="dropdown-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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-info" type="button">Info</button>
                        <button class="btn btn-info dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                        <div class="dropdown-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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-warning" type="button">Warning</button>
                        <button class="btn btn-warning dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                        <div class="dropdown-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>
                      <!-- /btn-group-->
                      <div class="btn-group">
                        <button class="btn btn-danger" type="button">Danger</button>
                        <button class="btn btn-danger dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                        <div class="dropdown-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>
                      <!-- /btn-group-->
                      <hr>
                      <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group">
                          <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Large button</button>
                          <div class="dropdown-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>
                        <!-- /btn-group-->
                        <div class="btn-group ml-2">
                          <button class="btn btn-lg btn-secondary" type="button">Large split button</button>
                          <button class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                          <div class="dropdown-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>
                        <!-- /btn-group-->
                      </div>
                      <!-- /btn-toolbar-->
                      <hr>
                      <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group">
                          <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Small button</button>
                          <div class="dropdown-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>
                        <!-- /btn-group-->
                        <div class="btn-group ml-2">
                          <button class="btn btn-sm btn-secondary" type="button">Small split button</button>
                          <button class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                          <div class="dropdown-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>
                        <!-- /btn-group-->
                      </div>
                      <!-- /btn-toolbar-->
                      <hr>
                      <div class="bd-example">
                        <div class="btn-group dropup">
                          <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
                          <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -2px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                        <div class="btn-group dropup">
                          <button class="btn btn-secondary" type="button">Split dropup</button>
                          <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
                          <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(101px, -188px, 0px); top: 0px; left: 0px; will-change: transform;"><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>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="card">
                    <div class="card-header"> Menus</div>
                    <div class="card-body">
                      <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenu2" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 34px, 0px); top: 0px; left: 0px; will-change: transform;">
                          <button class="dropdown-item" type="button">Action</button>
                          <button class="dropdown-item" type="button">Another action</button>
                          <button class="dropdown-item" type="button">Something else here</button>
                        </div>
                      </div>
                      <hr>
                      <div class="btn-group">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">This dropdown's menu is right-aligned</button>
                        <div class="dropdown-menu dropdown-menu-right">
                          <button class="dropdown-item" type="button">Action</button>
                          <button class="dropdown-item" type="button">Another action</button>
                          <button class="dropdown-item" type="button">Something else here</button>
                        </div>
                      </div>
                      <hr>
                      <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu header</button>
                        <div class="dropdown-menu">
                          <h6 class="dropdown-header">Dropdown header</h6><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a>
                        </div>
                      </div>
                      <hr>
                      <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu divider</button>
                        <div class="dropdown-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>
                      <hr>
                      <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu forms</button>
                        <div class="dropdown-menu">
                          <form class="px-4 py-3">
                            <div class="form-group">
                              <label for="exampleDropdownFormEmail1">Email address</label>
                              <input class="form-control" id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com">
                            </div>
                            <div class="form-group">
                              <label for="exampleDropdownFormPassword1">Password</label>
                              <input class="form-control" id="exampleDropdownFormPassword1" type="password" placeholder="Password">
                            </div>
                            <div class="form-check">
                              <label class="form-check-label">
                                <input class="form-check-input" type="checkbox"> Remember me
                              </label>
                            </div>
                            <button class="btn btn-primary" type="submit">Sign in</button>
                          </form>
                          <div class="dropdown-divider"></div><a class="dropdown-item" href="#">New around here? Sign up</a><a class="dropdown-item" href="#">Forgot password?</a>
                        </div>
                      </div>
                      <hr>
                      <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Disabled item</button>
                        <div class="dropdown-menu"><a class="dropdown-item" href="#">Regular link</a><a class="dropdown-item disabled" href="#">Disabled link</a><a class="dropdown-item" href="#">Another link</a></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

@endsection

@section('javascript')

@endsection