templates/ui-dropdowns.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Dropdowns'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Components', title: 'Dropdowns'}) }}
  28.                         <div class="row">
  29.                             <div class="col-xl-6">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h4 class="card-title">Single button dropdowns</h4>
  33.                                         <p class="card-title-desc">Any single <code
  34.                                                 class="highlighter-rouge">.btn</code> can be turned into a dropdown
  35.                                             toggle with some markup changes. Here’s how you can put them to work
  36.                                             with either <code class="highlighter-rouge">&lt;button&gt;</code>
  37.                                             elements:
  38.                                         </p>
  39.                                     </div><!-- end card header -->
  41.                                     <div class="card-body">
  42.                                         <div class="row">
  43.                                             <div class="col-sm-6">
  44.                                                 <div class="dropdown">
  45.                                                     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
  46.                                                         Dropdown button <i class="mdi mdi-chevron-down"></i>
  47.                                                     </button>
  48.                                                     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  49.                                                         <a class="dropdown-item" href="#">Action</a>
  50.                                                         <a class="dropdown-item" href="#">Another action</a>
  51.                                                         <a class="dropdown-item" href="#">Something else here</a>
  52.                                                     </div>
  53.                                                 </div>
  54.                                             </div><!-- end col -->
  56.                                             <div class="col-sm-6">
  57.                                                 <div class="dropdown mt-4 mt-sm-0">
  58.                                                     <a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  59.                                                         Dropdown link <i class="mdi mdi-chevron-down"></i>
  60.                                                     </a>
  62.                                                     <div class="dropdown-menu">
  63.                                                         <a class="dropdown-item" href="#">Action</a>
  64.                                                         <a class="dropdown-item" href="#">Another action</a>
  65.                                                         <a class="dropdown-item" href="#">Something else here</a>
  66.                                                     </div>
  67.                                                 </div>
  68.                                             </div><!-- end col -->
  69.                                         </div><!-- end row -->
  70.                                     </div><!-- end card-body -->
  71.                                 </div><!-- end card -->
  72.                             </div><!-- end col -->
  74.                             <div class="col-xl-6">
  75.                                 <div class="card">
  76.                                     <div class="card-header">
  77.                                         <h4 class="card-title">Variant</h4>
  78.                                         <p class="card-title-desc">The best part is you can do this with any button variant, too:</p>
  79.                                     </div><!-- end card header -->
  81.                                     <div class="card-body">
  82.                                         <div class="d-flex gap-2 flex-wrap">
  83.                                             <div class="btn-group">
  84.                                                 <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary <i class="mdi mdi-chevron-down"></i></button>
  85.                                                 <div class="dropdown-menu">
  86.                                                     <a class="dropdown-item" href="#">Action</a>
  87.                                                     <a class="dropdown-item" href="#">Another action</a>
  88.                                                     <a class="dropdown-item" href="#">Something else here</a>
  89.                                                     <div class="dropdown-divider"></div>
  90.                                                     <a class="dropdown-item" href="#">Separated link</a>
  91.                                                 </div>
  92.                                             </div><!-- /btn-group -->
  93.                                             <div class="btn-group">
  94.                                                 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary <i class="mdi mdi-chevron-down"></i></button>
  95.                                                 <div class="dropdown-menu">
  96.                                                     <a class="dropdown-item" href="#">Action</a>
  97.                                                     <a class="dropdown-item" href="#">Another action</a>
  98.                                                     <a class="dropdown-item" href="#">Something else here</a>
  99.                                                     <div class="dropdown-divider"></div>
  100.                                                     <a class="dropdown-item" href="#">Separated link</a>
  101.                                                 </div>
  102.                                             </div><!-- /btn-group -->
  103.                                             <div class="btn-group">
  104.                                                 <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success <i class="mdi mdi-chevron-down"></i></button>
  105.                                                 <div class="dropdown-menu">
  106.                                                     <a class="dropdown-item" href="#">Action</a>
  107.                                                     <a class="dropdown-item" href="#">Another action</a>
  108.                                                     <a class="dropdown-item" href="#">Something else here</a>
  109.                                                     <div class="dropdown-divider"></div>
  110.                                                     <a class="dropdown-item" href="#">Separated link</a>
  111.                                                 </div>
  112.                                             </div><!-- /btn-group -->
  113.                                             <div class="btn-group">
  114.                                                 <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info <i class="mdi mdi-chevron-down"></i></button>
  115.                                                 <div class="dropdown-menu">
  116.                                                     <a class="dropdown-item" href="#">Action</a>
  117.                                                     <a class="dropdown-item" href="#">Another action</a>
  118.                                                     <a class="dropdown-item" href="#">Something else here</a>
  119.                                                     <div class="dropdown-divider"></div>
  120.                                                     <a class="dropdown-item" href="#">Separated link</a>
  121.                                                 </div>
  122.                                             </div><!-- /btn-group -->
  123.                                             <div class="btn-group">
  124.                                                 <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning <i class="mdi mdi-chevron-down"></i></button>
  125.                                                 <div class="dropdown-menu">
  126.                                                     <a class="dropdown-item" href="#">Action</a>
  127.                                                     <a class="dropdown-item" href="#">Another action</a>
  128.                                                     <a class="dropdown-item" href="#">Something else here</a>
  129.                                                     <div class="dropdown-divider"></div>
  130.                                                     <a class="dropdown-item" href="#">Separated link</a>
  131.                                                 </div>
  132.                                             </div><!-- /btn-group -->
  133.                                             <div class="btn-group">
  134.                                                 <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger <i class="mdi mdi-chevron-down"></i></button>
  135.                                                 <div class="dropdown-menu">
  136.                                                     <a class="dropdown-item" href="#">Action</a>
  137.                                                     <a class="dropdown-item" href="#">Another action</a>
  138.                                                     <a class="dropdown-item" href="#">Something else here</a>
  139.                                                     <div class="dropdown-divider"></div>
  140.                                                     <a class="dropdown-item" href="#">Separated link</a>
  141.                                                 </div>
  142.                                             </div><!-- /btn-group -->
  143.                                         </div>
  144.                                     </div><!-- end card-body -->
  145.                                 </div><!-- end card -->
  146.                             </div><!-- end col -->
  147.                         </div> <!-- end row -->
  149.                         <div class="row">
  150.                             <div class="col-xl-12">
  151.                                 <div class="card">
  152.                                     <div class="card-header">
  153.                                         <h4 class="card-title">Dropdown Menu Item Color</h4>
  154.                                         <p class="card-title-desc">Example of dropdown menu item color</p>
  155.                                     </div><!-- end card header -->
  157.                                     <div class="card-body">
  158.                                         <div class="row">
  159.                                             <div class="col-lg-3">
  160.                                                 
  161.                                                 <div class="">
  162.                                                     <h5 class="font-size-13 mb-3">Dropdown Menu Success link example</h5>
  163.                                                     <div class="clearfix">
  164.                                                         <div class="dropdown-menu d-inline-block position-relative dropdownmenu-success" style="z-index: 1;">
  165.                                                             <a class="dropdown-item" href="#">Action</a>
  166.                                                             <a class="dropdown-item" href="#">Another action</a>
  167.                                                             <a class="dropdown-item active" href="#">Something else here</a>
  168.                                                             <div class="dropdown-divider"></div>
  169.                                                             <a class="dropdown-item" href="#">Separated link</a>
  170.                                                         </div>
  171.                                                     </div>
  172.                                                 </div>
  173.                                             </div>
  175.                                             <div class="col-lg-9">
  176.                                                 <div class="mt-lg-0 mt-3">
  177.                                                     <h5 class="font-size-13 mb-0">Dropdown Menu link Color example</h5>
  178.                                                     <div>
  179.                                                         <div class="row">
  180.                                                             <div class="col-lg-4 col-sm-6">
  181.                                                                 <div class="mt-3">
  182.                                                                     <p class="font-size-13 mb-2">Dropdown menu Primary link</p>
  183.                                                                     <div class="btn-group">
  184.                                                                         <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary <i class="mdi mdi-chevron-down"></i></button>
  185.                                                                         <div class="dropdown-menu dropdownmenu-primary">
  186.                                                                             <a class="dropdown-item" href="#">Action</a>
  187.                                                                             <a class="dropdown-item" href="#">Another action</a>
  188.                                                                             <a class="dropdown-item" href="#">Something else here</a>
  189.                                                                             <div class="dropdown-divider"></div>
  190.                                                                             <a class="dropdown-item" href="#">Separated link</a>
  191.                                                                         </div>
  192.                                                                     </div><!-- /btn-group -->
  193.                                                                 </div>
  194.                                                             </div>
  195.                                                             <div class="col-lg-4 col-sm-6">
  196.                                                                 <div class="mt-3">
  197.                                                                     <p class="font-size-13 mb-2">Dropdown menu Secondary link</p>
  198.                                                                     <div class="btn-group">
  199.                                                                         <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary <i class="mdi mdi-chevron-down"></i></button>
  200.                                                                         <div class="dropdown-menu dropdownmenu-secondary">
  201.                                                                             <a class="dropdown-item" href="#">Action</a>
  202.                                                                             <a class="dropdown-item" href="#">Another action</a>
  203.                                                                             <a class="dropdown-item" href="#">Something else here</a>
  204.                                                                             <div class="dropdown-divider"></div>
  205.                                                                             <a class="dropdown-item" href="#">Separated link</a>
  206.                                                                         </div>
  207.                                                                     </div><!-- /btn-group -->
  208.                                                                 </div>
  209.                                                             </div>
  210.                                                             <div class="col-lg-4 col-sm-6">
  211.                                                                 <div class="mt-3">
  212.                                                                     <p class="font-size-13 mb-2">Dropdown menu Success link</p>
  213.                                                                     <div class="btn-group">
  214.                                                                         <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success <i class="mdi mdi-chevron-down"></i></button>
  215.                                                                         <div class="dropdown-menu dropdownmenu-success">
  216.                                                                             <a class="dropdown-item" href="#">Action</a>
  217.                                                                             <a class="dropdown-item" href="#">Another action</a>
  218.                                                                             <a class="dropdown-item" href="#">Something else here</a>
  219.                                                                             <div class="dropdown-divider"></div>
  220.                                                                             <a class="dropdown-item" href="#">Separated link</a>
  221.                                                                         </div>
  222.                                                                     </div><!-- /btn-group -->
  223.                                                                 </div>
  224.                                                             </div>
  225.                                                             <div class="col-lg-4 col-sm-6">
  226.                                                                 <div class="mt-3">
  227.                                                                     <p class="font-size-13 mb-2">Dropdown menu Warning link</p>
  228.                                                                     <div class="btn-group">
  229.                                                                         <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning <i class="mdi mdi-chevron-down"></i></button>
  230.                                                                         <div class="dropdown-menu dropdownmenu-warning">
  231.                                                                             <a class="dropdown-item" href="#">Action</a>
  232.                                                                             <a class="dropdown-item" href="#">Another action</a>
  233.                                                                             <a class="dropdown-item" href="#">Something else here</a>
  234.                                                                             <div class="dropdown-divider"></div>
  235.                                                                             <a class="dropdown-item" href="#">Separated link</a>
  236.                                                                         </div>
  237.                                                                     </div><!-- /btn-group -->
  238.                                                                 </div>
  239.                                                             </div>
  240.                                                             <div class="col-lg-4 col-sm-6">
  241.                                                                 <div class="mt-3">
  242.                                                                     <p class="font-size-13 mb-2">Dropdown menu Info link</p>
  243.                                                                     <div class="btn-group">
  244.                                                                         <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info <i class="mdi mdi-chevron-down"></i></button>
  245.                                                                         <div class="dropdown-menu dropdownmenu-info">
  246.                                                                             <a class="dropdown-item" href="#">Action</a>
  247.                                                                             <a class="dropdown-item" href="#">Another action</a>
  248.                                                                             <a class="dropdown-item" href="#">Something else here</a>
  249.                                                                             <div class="dropdown-divider"></div>
  250.                                                                             <a class="dropdown-item" href="#">Separated link</a>
  251.                                                                         </div>
  252.                                                                     </div><!-- /btn-group -->
  253.                                                                 </div>
  254.                                                             </div>
  255.                                                             <div class="col-lg-4 col-sm-6">
  256.                                                                 <div class="mt-3">
  257.                                                                     <p class="font-size-13 mb-2">Dropdown menu Danger link</p>
  258.                                                                     <div class="btn-group">
  259.                                                                         <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger <i class="mdi mdi-chevron-down"></i></button>
  260.                                                                         <div class="dropdown-menu dropdownmenu-danger">
  261.                                                                             <a class="dropdown-item" href="#">Action</a>
  262.                                                                             <a class="dropdown-item" href="#">Another action</a>
  263.                                                                             <a class="dropdown-item" href="#">Something else here</a>
  264.                                                                             <div class="dropdown-divider"></div>
  265.                                                                             <a class="dropdown-item" href="#">Separated link</a>
  266.                                                                         </div>
  267.                                                                     </div><!-- /btn-group -->
  268.                                                                 </div>
  269.                                                             </div>
  270.                                                         </div>
  271.                                                        
  272.                                                     </div>
  273.                                                 </div>
  274.                                             </div>
  275.                                         </div>
  276.                                     </div><!-- end card-body -->
  277.                                 </div><!-- end card -->
  278.                             </div><!-- end col -->
  279.                         </div> <!-- end row -->
  280.         
  281.                         <div class="row">
  282.                             <div class="col-xl-6">
  283.                                 <div class="card">
  284.                                     <div class="card-header">
  285.                                         <h4 class="card-title">Split Button Dropdowns</h4>
  286.                                         <p class="card-title-desc">The best part is you can do this with any button variant, too:</p>
  287.                                     </div><!-- end card header -->
  289.                                     <div class="card-body">
  290.                                         <div class="d-flex gap-2 flex-wrap">
  291.                                             <div class="btn-group">
  292.                                                 <button type="button" class="btn btn-primary">Primary</button>
  293.                                                 <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  294.                                                     <i class="mdi mdi-chevron-down"></i>
  295.                                                 </button>
  296.                                                 <div class="dropdown-menu">
  297.                                                     <a class="dropdown-item" href="#">Action</a>
  298.                                                     <a class="dropdown-item" href="#">Another action</a>
  299.                                                     <a class="dropdown-item" href="#">Something else here</a>
  300.                                                     <div class="dropdown-divider"></div>
  301.                                                     <a class="dropdown-item" href="#">Separated link</a>
  302.                                                 </div>
  303.                                             </div><!-- /btn-group -->
  304.                                             <div class="btn-group">
  305.                                                 <button type="button" class="btn btn-secondary">Secondary</button>
  306.                                                 <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  307.                                                     <i class="mdi mdi-chevron-down"></i>
  308.                                                 </button>
  309.                                                 <div class="dropdown-menu">
  310.                                                     <a class="dropdown-item" href="#">Action</a>
  311.                                                     <a class="dropdown-item" href="#">Another action</a>
  312.                                                     <a class="dropdown-item" href="#">Something else here</a>
  313.                                                     <div class="dropdown-divider"></div>
  314.                                                     <a class="dropdown-item" href="#">Separated link</a>
  315.                                                 </div>
  316.                                             </div><!-- /btn-group -->
  317.                                             <div class="btn-group">
  318.                                                 <button type="button" class="btn btn-success">Success</button>
  319.                                                 <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  320.                                                     <i class="mdi mdi-chevron-down"></i>
  321.                                                 </button>
  322.                                                 <div class="dropdown-menu">
  323.                                                     <a class="dropdown-item" href="#">Action</a>
  324.                                                     <a class="dropdown-item" href="#">Another action</a>
  325.                                                     <a class="dropdown-item" href="#">Something else here</a>
  326.                                                     <div class="dropdown-divider"></div>
  327.                                                     <a class="dropdown-item" href="#">Separated link</a>
  328.                                                 </div>
  329.                                             </div><!-- /btn-group -->
  330.                                             <div class="btn-group">
  331.                                                 <button type="button" class="btn btn-info">Info</button>
  332.                                                 <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  333.                                                     <i class="mdi mdi-chevron-down"></i>
  334.                                                 </button>
  335.                                                 <div class="dropdown-menu">
  336.                                                     <a class="dropdown-item" href="#">Action</a>
  337.                                                     <a class="dropdown-item" href="#">Another action</a>
  338.                                                     <a class="dropdown-item" href="#">Something else here</a>
  339.                                                     <div class="dropdown-divider"></div>
  340.                                                     <a class="dropdown-item" href="#">Separated link</a>
  341.                                                 </div>
  342.                                             </div><!-- /btn-group -->
  343.                                             <div class="btn-group">
  344.                                                 <button type="button" class="btn btn-warning">Warning</button>
  345.                                                 <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  346.                                                     <i class="mdi mdi-chevron-down"></i>
  347.                                                 </button>
  348.                                                 <div class="dropdown-menu">
  349.                                                     <a class="dropdown-item" href="#">Action</a>
  350.                                                     <a class="dropdown-item" href="#">Another action</a>
  351.                                                     <a class="dropdown-item" href="#">Something else here</a>
  352.                                                     <div class="dropdown-divider"></div>
  353.                                                     <a class="dropdown-item" href="#">Separated link</a>
  354.                                                 </div>
  355.                                             </div><!-- /btn-group -->
  356.                                             <div class="btn-group">
  357.                                                 <button type="button" class="btn btn-danger">Danger</button>
  358.                                                 <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  359.                                                     <i class="mdi mdi-chevron-down"></i>
  360.                                                 </button>
  361.                                                 <div class="dropdown-menu">
  362.                                                     <a class="dropdown-item" href="#">Action</a>
  363.                                                     <a class="dropdown-item" href="#">Another action</a>
  364.                                                     <a class="dropdown-item" href="#">Something else here</a>
  365.                                                     <div class="dropdown-divider"></div>
  366.                                                     <a class="dropdown-item" href="#">Separated link</a>
  367.                                                 </div>
  368.                                             </div><!-- /btn-group -->
  369.                                         </div>
  370.                                     </div><!-- end card-body -->
  371.                                 </div><!-- end card -->
  372.                             </div><!-- end col -->
  373.         
  374.                             <div class="col-xl-6">
  375.                                 <div class="card">
  376.                                     <div class="card-header">
  377.                                         <h4 class="card-title">Sizing</h4>
  378.                                         <p class="card-title-desc">Button dropdowns work with buttons of
  379.                                             all sizes, including default and split dropdown buttons.</p>
  380.                                     </div><!-- end card header -->
  382.                                     <div class="card-body">
  383.                                         <!-- Large button groups (default and split) -->
  384.                                         <div class="btn-group me-1 mt-2">
  385.                                             <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  386.                                                 Large button <i class="mdi mdi-chevron-down"></i>
  387.                                             </button>
  388.                                             <div class="dropdown-menu">
  389.                                                 <a class="dropdown-item" href="#">Action</a>
  390.                                                 <a class="dropdown-item" href="#">Another action</a>
  391.                                                 <a class="dropdown-item" href="#">Something else here</a>
  392.                                                 <div class="dropdown-divider"></div>
  393.                                                 <a class="dropdown-item" href="#">Separated link</a>
  394.                                             </div>
  395.                                         </div>
  396.                                         <div class="btn-group me-1 mt-2">
  397.                                             <button class="btn btn-secondary btn-lg" type="button">
  398.                                                 Large button
  399.                                             </button>
  400.                                             <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  401.                                                 <i class="mdi mdi-chevron-down"></i>
  402.                                             </button>
  403.                                             <div class="dropdown-menu">
  404.                                                 <a class="dropdown-item" href="#">Action</a>
  405.                                                 <a class="dropdown-item" href="#">Another action</a>
  406.                                                 <a class="dropdown-item" href="#">Something else here</a>
  407.                                                 <div class="dropdown-divider"></div>
  408.                                                 <a class="dropdown-item" href="#">Separated link</a>
  409.                                             </div>
  410.                                         </div>
  411.                                         <!-- Small button groups (default and split) -->
  412.                                         <div class="btn-group me-1 mt-2">
  413.                                             <button class="btn btn-info btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  414.                                                 Small button <i class="mdi mdi-chevron-down"></i>
  415.                                             </button>
  416.                                             <div class="dropdown-menu">
  417.                                                 <a class="dropdown-item" href="#">Action</a>
  418.                                                 <a class="dropdown-item" href="#">Another action</a>
  419.                                                 <a class="dropdown-item" href="#">Something else here</a>
  420.                                                 <div class="dropdown-divider"></div>
  421.                                                 <a class="dropdown-item" href="#">Separated link</a>
  422.                                             </div>
  423.                                         </div>
  424.                                         <div class="btn-group me-1 mt-2">
  425.                                             <button class="btn btn-secondary btn-sm" type="button">
  426.                                                 Small button
  427.                                             </button>
  428.                                             <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  429.                                                 <i class="mdi mdi-chevron-down"></i>
  430.                                             </button>
  431.                                             <div class="dropdown-menu">
  432.                                                 <a class="dropdown-item" href="#">Action</a>
  433.                                                 <a class="dropdown-item" href="#">Another action</a>
  434.                                                 <a class="dropdown-item" href="#">Something else here</a>
  435.                                                 <div class="dropdown-divider"></div>
  436.                                                 <a class="dropdown-item" href="#">Separated link</a>
  437.                                             </div>
  438.                                         </div>
  439.                                     </div><!-- end card-body -->
  440.                                 </div><!-- end card -->
  441.                             </div><!-- end col -->
  442.                         </div><!-- end row -->
  444.                         <div class="row">
  445.                             <div class="col-xl-6">
  446.                                 <div class="card">
  447.                                     <div class="card-header">
  448.                                         <h4 class="card-title">Dark Dropdowns</h4>
  449.                                         <p class="card-title-desc">Option into darker dropdowns to match a dark navbar or custom style by adding <code>.dropdown-menu-dark</code> onto an existing <code>.dropdown-menu</code>. No changes are required to the dropdown items.</p>
  450.                                     </div><!-- end card header -->
  452.                                     <div class="card-body">
  453.                                         <div class="dropdown">
  454.                                             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2"
  455.                                                 data-bs-toggle="dropdown" aria-expanded="false">
  456.                                                 Dropdown button <i class="mdi mdi-chevron-down"></i>
  457.                                             </button>
  458.                                             <div class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
  459.                                                 <a class="dropdown-item" href="#">Action</a>
  460.                                                 <a class="dropdown-item" href="#">Another action</a>
  461.                                                 <a class="dropdown-item" href="#">Something else here</a>
  462.                                                 <div class="dropdown-divider"></div>
  463.                                                 <a class="dropdown-item" href="#">Separated link</a>
  464.                                             </div>
  465.                                         </div>
  466.                                     </div><!-- end card-body -->
  467.                                 </div><!-- end card -->
  468.                             </div><!-- end col -->
  470.                             <div class="col-xl-6">
  471.                                 <div class="card">
  472.                                     <div class="card-header">
  473.                                         <h4 class="card-title">Menu Content</h4>
  474.                                         <p class="card-title-desc">Example of dropdown menu Headers, Text, Forms content</p>
  475.                                     </div><!-- end card header -->
  477.                                     <div class="card-body">
  478.                                         <div class="d-flex flex-wrap gap-2">
  479.                                             <!-- Header -->
  480.                                             <div class="btn-group">
  481.                                                 <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
  482.                                                     aria-expanded="false">
  483.                                                     Header <i class="mdi mdi-chevron-down"></i>
  484.                                                 </button>
  485.                                                 <div class="dropdown-menu">
  486.                                                     <div class="dropdown-header noti-title">
  487.                                                         <h5 class="font-size-13 text-muted text-truncate mn-0">Welcome Jessie!</h5>
  488.                                                     </div>
  489.                                                     <!-- item-->
  490.                                                     <a class="dropdown-item" href="#">Action</a>
  491.                                                     <a class="dropdown-item" href="#">Another action</a>
  492.                                                     <a class="dropdown-item" href="#">Something else here</a>
  493.                                                     <div class="dropdown-divider"></div>
  494.                                                     <a class="dropdown-item" href="#">Separated link</a>
  495.                                                 </div>
  496.                                             </div>
  497.                                         
  498.                                             <!-- Text -->
  499.                                             <div class="btn-group">
  500.                                                 <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
  501.                                                     aria-expanded="false">
  502.                                                     Text <i class="mdi mdi-chevron-down"></i>
  503.                                                 </button>
  504.                                                 <div class="dropdown-menu dropdown-menu-md p-3">
  505.                                                     <p>
  506.                                                         Some example text that's free-flowing within the dropdown menu.
  507.                                                     </p>
  508.                                                     <p class="mb-0">
  509.                                                         And this is more example text.
  510.                                                     </p>
  511.                                                 </div>
  512.                                             </div>
  513.                                         
  514.                                             <!-- Forms -->
  515.                                             <div class="btn-group">
  516.                                                 <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
  517.                                                     aria-expanded="false">
  518.                                                     Forms <i class="mdi mdi-chevron-down"></i>
  519.                                                 </button>
  520.                                                 <div class="dropdown-menu dropdown-menu-md p-4">
  521.                                                     <form>
  522.                                                         <div class="mb-2">
  523.                                                             <label class="form-label" for="exampleDropdownFormEmail">Email address</label>
  524.                                                             <input type="email" class="form-control" id="exampleDropdownFormEmail"
  525.                                                                 placeholder="email@example.com">
  526.                                                         </div>
  527.                                                         <div class="mb-2">
  528.                                                             <label class="form-label" for="exampleDropdownFormPassword">Password</label>
  529.                                                             <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password">
  530.                                                         </div>
  531.                                                         <div class="mb-2">
  532.                                                             <div class="form-check custom-checkbox">
  533.                                                                 <input type="checkbox" class="form-check-input" id="rememberdropdownCheck">
  534.                                                                 <label class="form-check-label" for="rememberdropdownCheck">Remember me</label>
  535.                                                             </div>
  536.                                                         </div>
  537.                                                         <button type="submit" class="btn btn-primary">Sign in</button>
  538.                                                     </form>
  539.                                                 </div>
  540.                                             </div>
  541.                                         </div>
  542.                                     </div><!-- end card-body -->
  543.                                 </div><!-- end card -->
  544.                             </div><!-- end col -->
  546.                         </div>
  547.                         <div class="row">        
  548.                             <div class="col-xl-6">
  549.                                 <div class="card">
  550.                                     <div class="card-header">
  551.                                         <h4 class="card-title">Menu Alignment</h4>
  552.                                         <p class="card-title-desc">Add <code class="highlighter-rouge">.dropdown-menu-end</code>
  553.                                             to a <code class="highlighter-rouge">.dropdown-menu</code> to right
  554.                                             align the dropdown menu.</p>
  555.                                     </div><!-- end card header -->
  557.                                     <div class="card-body">
  558.                                         <div class="d-flex flex-wrap gap-3">
  559.                                             <div class="btn-group">
  560.                                                 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  561.                                                     Right-aligned menu example  <i class="mdi mdi-chevron-down"></i>
  562.                                                 </button>
  563.                                                 <ul class="dropdown-menu dropdown-menu-end">
  564.                                                     <li><button class="dropdown-item" type="button">Action</button></li>
  565.                                                     <li><button class="dropdown-item" type="button">Another action</button></li>
  566.                                                     <li><button class="dropdown-item" type="button">Something else here</button></li>
  567.                                                 </ul>
  568.                                             </div>
  569.                                         
  570.                                             <div class="btn-group">
  571.                                                 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
  572.                                                     data-bs-display="static" aria-expanded="false">
  573.                                                     Left-aligned but right aligned when large screen <i class="mdi mdi-chevron-down"></i>
  574.                                                 </button>
  575.                                                 <ul class="dropdown-menu dropdown-menu-lg-end">
  576.                                                     <li><button class="dropdown-item" type="button">Action</button></li>
  577.                                                     <li><button class="dropdown-item" type="button">Another action</button></li>
  578.                                                     <li><button class="dropdown-item" type="button">Something else here</button></li>
  579.                                                 </ul>
  580.                                             </div>
  581.                                         
  582.                                         
  583.                                             <div class="btn-group">
  584.                                                 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
  585.                                                     data-bs-display="static" aria-expanded="false">
  586.                                                     Right-aligned but left aligned when large screen <i class="mdi mdi-chevron-down"></i>
  587.                                                 </button>
  588.                                                 <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
  589.                                                     <li><button class="dropdown-item" type="button">Action</button></li>
  590.                                                     <li><button class="dropdown-item" type="button">Another action</button></li>
  591.                                                     <li><button class="dropdown-item" type="button">Something else here</button></li>
  592.                                                 </ul>
  593.                                             </div>
  594.                                         </div>
  595.                                     </div><!-- end card-body -->
  596.                                 </div><!-- end card -->
  597.                             </div><!-- end col -->
  599.                             <div class="col-xl-6">
  600.                                 <div class="card">
  601.                                     <div class="card-header">
  602.                                         <h4 class="card-title">Auto Close Behavior</h4>
  603.                                         <p class="card-title-desc">Trigger dropdown menus at the right of the elements by adding <code>.dropstart</code> to the parent element.
  604.                                         </p>
  605.                                     </div><!-- end card header -->
  607.                                     <div class="card-body">
  608.                                         <div class="d-flex gap-2 flex-wrap">
  609.                                             <div class="btn-group">
  610.                                                 <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown"
  611.                                                     data-bs-auto-close="true" aria-expanded="false">
  612.                                                     Default dropdown <i class="mdi mdi-chevron-down"></i>
  613.                                                 </button>
  614.                                                 <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
  615.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  616.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  617.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  618.                                                 </ul>
  619.                                             </div>
  620.                                             
  621.                                             <div class="btn-group">
  622.                                                 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside"
  623.                                                     data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
  624.                                                     Clickable outside <i class="mdi mdi-chevron-down"></i>
  625.                                                 </button>
  626.                                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
  627.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  628.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  629.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  630.                                                 </ul>
  631.                                             </div>
  632.                                             
  633.                                             <div class="btn-group">
  634.                                                 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside"
  635.                                                     data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
  636.                                                     Clickable inside <i class="mdi mdi-chevron-down"></i>
  637.                                                 </button>
  638.                                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
  639.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  640.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  641.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  642.                                                 </ul>
  643.                                             </div>
  644.                                             
  645.                                             <div class="btn-group">
  646.                                                 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown"
  647.                                                     data-bs-auto-close="false" aria-expanded="false">
  648.                                                     Manual close <i class="mdi mdi-chevron-down"></i>
  649.                                                 </button>
  650.                                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
  651.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  652.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  653.                                                     <li><a class="dropdown-item" href="#">Menu item</a></li>
  654.                                                 </ul>
  655.                                             </div>
  656.                                         </div>
  657.                                     </div><!-- end card-body -->
  658.                                 </div><!-- end card -->
  659.                             </div><!-- end col -->
  660.                         </div> <!-- end row -->
  661.         
  662.                         <div class="row">
  663.                             <div class="col-xl-6">
  664.                                 <div class="card">
  665.                                     <div class="card-header">
  666.                                         <h4 class="card-title">Dropup Variation</h4>
  667.                                         <p class="card-title-desc">Trigger dropdown menus above elements
  668.                                             by adding <code class="highlighter-rouge">.dropup</code> to the parent
  669.                                             element.</p>
  670.                                     </div><!-- end card header -->
  672.                                     <div class="card-body">
  673.                                         <div class="d-flex gap-2 flex-wrap">
  674.                                             <!-- Default dropup button -->
  675.                                             <div class="btn-group dropup">
  676.                                                 <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup <i class="mdi mdi-chevron-up"></i></button>
  677.                                                 <div class="dropdown-menu">
  678.                                                     <a class="dropdown-item" href="#">Action</a>
  679.                                                     <a class="dropdown-item" href="#">Another action</a>
  680.                                                     <a class="dropdown-item" href="#">Something else here</a>
  681.                                                     <div class="dropdown-divider"></div>
  682.                                                     <a class="dropdown-item" href="#">Separated link</a>
  683.                                                 </div>
  684.                                             </div>
  685.         
  686.                                             <!-- Split dropup button --> 
  687.                                             <div class="btn-group dropup">
  688.                                                 <button type="button" class="btn btn-info">
  689.                                                     Split dropup
  690.                                                 </button>
  691.                                                 <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
  692.                                                     <i class="mdi mdi-chevron-up"></i>
  693.                                                 </button>
  694.                                                 <div class="dropdown-menu">
  695.                                                     <a class="dropdown-item" href="#">Action</a>
  696.                                                     <a class="dropdown-item" href="#">Another action</a>
  697.                                                     <a class="dropdown-item" href="#">Something else here</a>
  698.                                                     <div class="dropdown-divider"></div>
  699.                                                     <a class="dropdown-item" href="#">Separated link</a>
  700.                                                 </div>
  701.                                             </div>
  702.                                         </div>
  703.                                     </div><!-- end card-body -->
  704.                                 </div><!-- end card -->
  705.                             </div><!-- end col -->
  707.                             
  708.                             <div class="col-xl-6">
  709.                                 <div class="card">
  710.                                     <div class="card-header">
  711.                                         <h4 class="card-title">Dropleft Variation</h4>
  712.                                         <p class="card-title-desc">Trigger dropdown menus at the right of the elements by adding <code>.dropstart</code> to the parent element.
  713.                                         </p>
  714.                                     </div><!-- end card header -->
  716.                                     <div class="card-body">
  717.                                         <div class="d-flex gap-2 flex-wrap">
  718.                                             <!-- Default dropright button -->
  719.                                             <div class="btn-group dropstart">
  720.                                                 <button type="button" class="btn btn-info waves-effect waves-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  721.                                                     <i class="mdi mdi-chevron-left"></i> Dropleft
  722.                                                 </button>
  723.                                                 <div class="dropdown-menu">
  724.                                                     <a class="dropdown-item" href="#">Action</a>
  725.                                                     <a class="dropdown-item" href="#">Another action</a>
  726.                                                     <a class="dropdown-item" href="#">Something else here</a>
  727.                                                 </div>
  728.                                             </div>
  730.                                             <!-- Split dropright button -->
  731.                                             <div class="btn-group">
  732.                                                 <div class="btn-group dropstart">
  733.                                                     <button type="button" class="btn btn-info waves-effect waves-light dropdown-toggle-split dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  734.                                                         <i class="mdi mdi-chevron-left"></i>
  735.                                                     </button>
  736.                                                     <div class="dropdown-menu">
  737.                                                         <a class="dropdown-item" href="#">Action</a>
  738.                                                         <a class="dropdown-item" href="#">Another action</a>
  739.                                                         <a class="dropdown-item" href="#">Something else here</a>
  740.                                                     </div>
  741.                                                 </div>
  743.                                                 <button type="button" class="btn btn-info waves-effect waves-light">
  744.                                                     Split dropstart
  745.                                                 </button>
  746.                                             </div>
  747.                                         </div>
  748.                                     </div><!-- end card-body -->
  749.                                 </div><!-- end card -->
  750.                             </div><!-- end col -->
  751.                         </div><!-- end row -->
  752.                         
  754.                         <div class="row">
  755.                             <div class="col-xl-6">
  756.                                 <div class="card">
  757.                                     <div class="card-header">
  758.                                         <h4 class="card-title">Dropright Variation</h4>
  759.                                         <p class="card-title-desc">Trigger dropdown menus at the right of the elements by adding <code>.dropend</code> to the parent element.
  760.                                         </p>
  761.                                     </div><!-- end card header -->
  763.                                     <div class="card-body">
  764.                                         <div class="d-flex gap-2 flex-wrap">
  765.                                             <!-- Default dropright button -->
  766.                                             <div class="btn-group dropend">
  767.                                                 <button type="button" class="btn btn-info waves-effect waves-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  768.                                                     Dropright <i class="mdi mdi-chevron-right"></i>
  769.                                                 </button>
  770.                                                 <div class="dropdown-menu">
  771.                                                     <a class="dropdown-item" href="#">Action</a>
  772.                                                     <a class="dropdown-item" href="#">Another action</a>
  773.                                                     <a class="dropdown-item" href="#">Something else here</a>
  774.                                                 </div>
  775.                                             </div>
  776.         
  777.                                             <!-- Split dropright button -->
  778.                                             <div class="btn-group dropend">
  779.                                                 <button type="button" class="btn btn-info waves-effect waves-light">
  780.                                                     Split dropend
  781.                                                 </button>
  782.                                                 <button type="button" class="btn btn-info waves-effect waves-light dropdown-toggle-split dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  783.                                                     <i class="mdi mdi-chevron-right"></i>
  784.                                                 </button>
  785.                                                 <div class="dropdown-menu">
  786.                                                     <a class="dropdown-item" href="#">Action</a>
  787.                                                     <a class="dropdown-item" href="#">Another action</a>
  788.                                                     <a class="dropdown-item" href="#">Something else here</a>
  789.                                                 </div>
  790.                                             </div><!-- end button-group -->
  791.                                         </div>
  792.                                     </div><!-- end card-body -->
  793.                                 </div><!-- end card -->
  794.                             </div><!-- end col -->                           
  795.                         </div> <!-- end row -->
  797.                     </div> <!-- container-fluid -->
  798.                 </div>
  799.                 <!-- End Page-content -->
  801.                 {{ include('partials/footer.html.twig') }}
  803.             </div>
  804.             <!-- end main content-->
  806.         </div>
  807.         <!-- END layout-wrapper -->
  809.         {{ include('partials/right-sidebar.html.twig') }}
  811.         {{ include('partials/vendor-scripts.html.twig') }}
  813.         <script src="/js/app.js"></script>
  815.     </body>
  816. </html>