templates/dropdown/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Dropdowns</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Dropdown</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row">
  21.                                 <div class="col-md-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Single button dropdowns</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div class="example panel panel-default">
  28.                                                 <div class="panel-body p-0 border-0">
  29.                                                     <div class="btn-group mt-2 mb-2">
  30.                                                         <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
  31.                                                             Action <span class="caret"></span>
  32.                                                         </button>
  33.                                                         <ul class="dropdown-menu" role="menu">
  34.                                                             <li class="dropdown-plus-title">
  35.                                                                 Dropdown
  36.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  37.                                                             </li>
  38.                                                             <li><a href="#">Action</a></li>
  39.                                                             <li><a href="#">Another action</a></li>
  40.                                                             <li><a href="#">Something else here</a></li>
  41.                                                             <li class="divider"></li>
  42.                                                             <li><a href="#">Separated link</a></li>
  43.                                                         </ul>
  44.                                                     </div>
  45.                                                     <div class="btn-group mt-2 mb-2">
  46.                                                         <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  47.                                                             Action <span class="caret"></span>
  48.                                                         </button>
  49.                                                         <ul class="dropdown-menu" role="menu">
  50.                                                             <li class="dropdown-plus-title">
  51.                                                                 Dropdown
  52.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  53.                                                             </li>
  54.                                                             <li><a href="#">Action</a></li>
  55.                                                             <li><a href="#">Another action</a></li>
  56.                                                             <li><a href="#">Something else here</a></li>
  57.                                                             <li class="divider"></li>
  58.                                                             <li><a href="#">Separated link</a></li>
  59.                                                         </ul>
  60.                                                     </div>
  61.                                                     <div class="btn-group mt-2 mb-2">
  62.                                                         <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
  63.                                                             Action <span class="caret"></span>
  64.                                                         </button>
  65.                                                         <ul class="dropdown-menu" role="menu">
  66.                                                             <li class="dropdown-plus-title">
  67.                                                                 Dropdown
  68.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  69.                                                             </li>
  70.                                                             <li><a href="#">Action</a></li>
  71.                                                             <li><a href="#">Another action</a></li>
  72.                                                             <li><a href="#">Something else here</a></li>
  73.                                                             <li class="divider"></li>
  74.                                                             <li><a href="#">Separated link</a></li>
  75.                                                         </ul>
  76.                                                     </div>
  77.                                                     <div class="btn-group mt-2 mb-2">
  78.                                                         <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">
  79.                                                             Action <span class="caret"></span>
  80.                                                         </button>
  81.                                                         <ul class="dropdown-menu" role="menu">
  82.                                                             <li class="dropdown-plus-title">
  83.                                                                 Dropdown
  84.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  85.                                                             </li>
  86.                                                             <li><a href="#">Action</a></li>
  87.                                                             <li><a href="#">Another action</a></li>
  88.                                                             <li><a href="#">Something else here</a></li>
  89.                                                             <li class="divider"></li>
  90.                                                             <li><a href="#">Separated link</a></li>
  91.                                                         </ul>
  92.                                                     </div>
  93.                                                     <div class="btn-group mt-2 mb-2">
  94.                                                         <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
  95.                                                             Action <span class="caret"></span>
  96.                                                         </button>
  97.                                                         <ul class="dropdown-menu" role="menu">
  98.                                                             <li class="dropdown-plus-title">
  99.                                                                 Dropdown
  100.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  101.                                                             </li>
  102.                                                             <li><a href="#">Action</a></li>
  103.                                                             <li><a href="#">Another action</a></li>
  104.                                                             <li><a href="#">Something else here</a></li>
  105.                                                             <li class="divider"></li>
  106.                                                             <li><a href="#">Separated link</a></li>
  107.                                                         </ul>
  108.                                                     </div>
  109.                                                     <div class="btn-group mt-2 mb-2">
  110.                                                         <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">
  111.                                                             Action <span class="caret"></span>
  112.                                                         </button>
  113.                                                         <ul class="dropdown-menu" role="menu">
  114.                                                             <li class="dropdown-plus-title">
  115.                                                                 Dropdown
  116.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  117.                                                             </li>
  118.                                                             <li><a href="#">Action</a></li>
  119.                                                             <li><a href="#">Another action</a></li>
  120.                                                             <li><a href="#">Something else here</a></li>
  121.                                                             <li class="divider"></li>
  122.                                                             <li><a href="#">Separated link</a></li>
  123.                                                         </ul>
  124.                                                     </div>
  125.                                                     <div class="btn-group mt-2 mb-2">
  126.                                                         <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">
  127.                                                             Action <span class="caret"></span>
  128.                                                         </button>
  129.                                                         <ul class="dropdown-menu" role="menu">
  130.                                                             <li class="dropdown-plus-title">
  131.                                                                 Dropdown
  132.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  133.                                                             </li>
  134.                                                             <li><a href="#">Action</a></li>
  135.                                                             <li><a href="#">Another action</a></li>
  136.                                                             <li><a href="#">Something else here</a></li>
  137.                                                             <li class="divider"></li>
  138.                                                             <li><a href="#">Separated link</a></li>
  139.                                                         </ul>
  140.                                                     </div>
  141.                                                     <div class="btn-group mt-2 mb-2">
  142.                                                         <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
  143.                                                             Action <span class="caret"></span>
  144.                                                         </button>
  145.                                                         <ul class="dropdown-menu" role="menu">
  146.                                                             <li class="dropdown-plus-title">
  147.                                                                 Dropdown
  148.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  149.                                                             </li>
  150.                                                             <li><a href="#">Action</a></li>
  151.                                                             <li><a href="#">Another action</a></li>
  152.                                                             <li><a href="#">Something else here</a></li>
  153.                                                             <li class="divider"></li>
  154.                                                             <li><a href="#">Separated link</a></li>
  155.                                                         </ul>
  156.                                                     </div>
  157.                                                 </div>
  158.                                             </div>
  159.                                         </div>
  160.                                     </div>
  161.                                 </div><!-- COL END -->
  162.                                 <div class="col-md-12">
  163.                                     <div class="card">
  164.                                         <div class="card-header border-bottom">
  165.                                             <h3 class="card-title">Rounded button dropdowns</h3>
  166.                                         </div>
  167.                                         <div class="card-body">
  168.                                             <div class="example panel panel-default">
  169.                                                 <div class="panel-body p-0 border-0">
  170.                                                     <div class="btn-group mt-2 mb-2">
  171.                                                         <button type="button" class="btn btn-default btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  172.                                                             Action <span class="caret"></span>
  173.                                                         </button>
  174.                                                         <ul class="dropdown-menu" role="menu">
  175.                                                             <li class="dropdown-plus-title">
  176.                                                                 Dropdown
  177.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  178.                                                             </li>
  179.                                                             <li><a href="#">Action</a></li>
  180.                                                             <li><a href="#">Another action</a></li>
  181.                                                             <li><a href="#">Something else here</a></li>
  182.                                                             <li class="divider"></li>
  183.                                                             <li><a href="#">Separated link</a></li>
  184.                                                         </ul>
  185.                                                     </div>
  186.                                                     <div class="btn-group mt-2 mb-2">
  187.                                                         <button type="button" class="btn btn-primary btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  188.                                                             Action <span class="caret"></span>
  189.                                                         </button>
  190.                                                         <ul class="dropdown-menu" role="menu">
  191.                                                             <li class="dropdown-plus-title">
  192.                                                                 Dropdown
  193.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  194.                                                             </li>
  195.                                                             <li><a href="#">Action</a></li>
  196.                                                             <li><a href="#">Another action</a></li>
  197.                                                             <li><a href="#">Something else here</a></li>
  198.                                                             <li class="divider"></li>
  199.                                                             <li><a href="#">Separated link</a></li>
  200.                                                         </ul>
  201.                                                     </div>
  202.                                                     <div class="btn-group mt-2 mb-2">
  203.                                                         <button type="button" class="btn btn-success btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  204.                                                             Action <span class="caret"></span>
  205.                                                         </button>
  206.                                                         <ul class="dropdown-menu" role="menu">
  207.                                                             <li class="dropdown-plus-title">
  208.                                                                 Dropdown
  209.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  210.                                                             </li>
  211.                                                             <li><a href="#">Action</a></li>
  212.                                                             <li><a href="#">Another action</a></li>
  213.                                                             <li><a href="#">Something else here</a></li>
  214.                                                             <li class="divider"></li>
  215.                                                             <li><a href="#">Separated link</a></li>
  216.                                                         </ul>
  217.                                                     </div>
  218.                                                     <div class="btn-group mt-2 mb-2">
  219.                                                         <button type="button" class="btn btn-info btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  220.                                                             Action <span class="caret"></span>
  221.                                                         </button>
  222.                                                         <ul class="dropdown-menu" role="menu">
  223.                                                             <li class="dropdown-plus-title">
  224.                                                                 Dropdown
  225.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  226.                                                             </li>
  227.                                                             <li><a href="#">Action</a></li>
  228.                                                             <li><a href="#">Another action</a></li>
  229.                                                             <li><a href="#">Something else here</a></li>
  230.                                                             <li class="divider"></li>
  231.                                                             <li><a href="#">Separated link</a></li>
  232.                                                         </ul>
  233.                                                     </div>
  234.                                                     <div class="btn-group mt-2 mb-2">
  235.                                                         <button type="button" class="btn btn-warning btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  236.                                                             Action <span class="caret"></span>
  237.                                                         </button>
  238.                                                         <ul class="dropdown-menu" role="menu">
  239.                                                             <li class="dropdown-plus-title">
  240.                                                                 Dropdown
  241.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  242.                                                             </li>
  243.                                                             <li><a href="#">Action</a></li>
  244.                                                             <li><a href="#">Another action</a></li>
  245.                                                             <li><a href="#">Something else here</a></li>
  246.                                                             <li class="divider"></li>
  247.                                                             <li><a href="#">Separated link</a></li>
  248.                                                         </ul>
  249.                                                     </div>
  250.                                                     <div class="btn-group mt-2 mb-2">
  251.                                                         <button type="button" class="btn btn-danger btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  252.                                                             Action <span class="caret"></span>
  253.                                                         </button>
  254.                                                         <ul class="dropdown-menu" role="menu">
  255.                                                             <li class="dropdown-plus-title">
  256.                                                                 Dropdown
  257.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  258.                                                             </li>
  259.                                                             <li><a href="#">Action</a></li>
  260.                                                             <li><a href="#">Another action</a></li>
  261.                                                             <li><a href="#">Something else here</a></li>
  262.                                                             <li class="divider"></li>
  263.                                                             <li><a href="#">Separated link</a></li>
  264.                                                         </ul>
  265.                                                     </div>
  266.                                                     <div class="btn-group mt-2 mb-2">
  267.                                                         <button type="button" class="btn btn-dark btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  268.                                                             Action <span class="caret"></span>
  269.                                                         </button>
  270.                                                         <ul class="dropdown-menu" role="menu">
  271.                                                             <li class="dropdown-plus-title">
  272.                                                                 Dropdown
  273.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  274.                                                             </li>
  275.                                                             <li><a href="#">Action</a></li>
  276.                                                             <li><a href="#">Another action</a></li>
  277.                                                             <li><a href="#">Something else here</a></li>
  278.                                                             <li class="divider"></li>
  279.                                                             <li><a href="#">Separated link</a></li>
  280.                                                         </ul>
  281.                                                     </div>
  282.                                                     <div class="btn-group mt-2 mb-2">
  283.                                                         <button type="button" class="btn btn-light btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  284.                                                             Action <span class="caret"></span>
  285.                                                         </button>
  286.                                                         <ul class="dropdown-menu" role="menu">
  287.                                                             <li class="dropdown-plus-title">
  288.                                                                 Dropdown
  289.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  290.                                                             </li>
  291.                                                             <li><a href="#">Action</a></li>
  292.                                                             <li><a href="#">Another action</a></li>
  293.                                                             <li><a href="#">Something else here</a></li>
  294.                                                             <li class="divider"></li>
  295.                                                             <li><a href="#">Separated link</a></li>
  296.                                                         </ul>
  297.                                                     </div>
  298.                                                 </div>
  299.                                             </div>
  300.                                         </div>
  301.                                     </div>
  302.                                 </div><!-- COL END -->
  303.                                 <div class="col-md-12">
  304.                                     <div class="card">
  305.                                         <div class="card-header border-bottom">
  306.                                             <h3 class="card-title">Split button dropdowns</h3>
  307.                                         </div>
  308.                                         <div class="card-body">
  309.                                             <div class="example panel panel-default">
  310.                                                 <div class="panel-body p-0 border-0">
  311.                                                     <div class="btn-group mt-2 mb-2">
  312.                                                         <button type="button" class="btn btn-default">Action</button>
  313.                                                         <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
  314.                                                             <span class="caret"></span>
  315.                                                             <span class="sr-only">Toggle Dropdown</span>
  316.                                                         </button>
  317.                                                         <ul class="dropdown-menu" role="menu">
  318.                                                             <li class="dropdown-plus-title">
  319.                                                                 Dropdown
  320.                                                                 <b class="fa fa-angle-up"></b>
  321.                                                             </li>
  322.                                                             <li><a href="#">Action</a></li>
  323.                                                             <li><a href="#">Another action</a></li>
  324.                                                             <li><a href="#">Something else here</a></li>
  325.                                                             <li class="divider"></li>
  326.                                                             <li><a href="#">Separated link</a></li>
  327.                                                         </ul>
  328.                                                     </div>
  329.                                                     <div class="btn-group mt-2 mb-2">
  330.                                                         <button type="button" class="btn btn-primary">Action</button>
  331.                                                         <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  332.                                                             <span class="caret"></span>
  333.                                                             <span class="sr-only">Toggle Dropdown</span>
  334.                                                         </button>
  335.                                                         <ul class="dropdown-menu" role="menu">
  336.                                                             <li class="dropdown-plus-title">
  337.                                                                 Dropdown
  338.                                                                 <b class="fa fa-angle-up"></b>
  339.                                                             </li>
  340.                                                             <li><a href="#">Action</a></li>
  341.                                                             <li><a href="#">Another action</a></li>
  342.                                                             <li><a href="#">Something else here</a></li>
  343.                                                             <li class="divider"></li>
  344.                                                             <li><a href="#">Separated link</a></li>
  345.                                                         </ul>
  346.                                                     </div>
  347.                                                     <div class="btn-group mt-2 mb-2">
  348.                                                         <button type="button" class="btn btn-success">Action</button>
  349.                                                         <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
  350.                                                             <span class="caret"></span>
  351.                                                             <span class="sr-only">Toggle Dropdown</span>
  352.                                                         </button>
  353.                                                         <ul class="dropdown-menu" role="menu">
  354.                                                             <li class="dropdown-plus-title">
  355.                                                                 Dropdown
  356.                                                                 <b class=" fa fa-angle-up"></b>
  357.                                                             </li>
  358.                                                             <li><a href="#">Action</a></li>
  359.                                                             <li><a href="#">Another action</a></li>
  360.                                                             <li><a href="#">Something else here</a></li>
  361.                                                             <li class="divider"></li>
  362.                                                             <li><a href="#">Separated link</a></li>
  363.                                                         </ul>
  364.                                                     </div>
  365.                                                     <div class="btn-group mt-2 mb-2">
  366.                                                         <button type="button" class="btn btn-info">Action</button>
  367.                                                         <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">
  368.                                                             <span class="caret"></span>
  369.                                                             <span class="sr-only">Toggle Dropdown</span>
  370.                                                         </button>
  371.                                                         <ul class="dropdown-menu" role="menu">
  372.                                                             <li class="dropdown-plus-title">
  373.                                                                 Dropdown
  374.                                                                 <b class="fa fa-angle-up"></b>
  375.                                                             </li>
  376.                                                             <li><a href="#">Action</a></li>
  377.                                                             <li><a href="#">Another action</a></li>
  378.                                                             <li><a href="#">Something else here</a></li>
  379.                                                             <li class="divider"></li>
  380.                                                             <li><a href="#">Separated link</a></li>
  381.                                                         </ul>
  382.                                                     </div>
  383.                                                     <div class="btn-group mt-2 mb-2">
  384.                                                         <button type="button" class="btn btn-warning">Action</button>
  385.                                                         <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
  386.                                                             <span class="caret"></span>
  387.                                                             <span class="sr-only">Toggle Dropdown</span>
  388.                                                         </button>
  389.                                                         <ul class="dropdown-menu" role="menu">
  390.                                                             <li class="dropdown-plus-title">
  391.                                                                 Dropdown
  392.                                                                 <b class="fa fa-angle-up"></b>
  393.                                                             </li>
  394.                                                             <li><a href="#">Action</a></li>
  395.                                                             <li><a href="#">Another action</a></li>
  396.                                                             <li><a href="#">Something else here</a></li>
  397.                                                             <li class="divider"></li>
  398.                                                             <li><a href="#">Separated link</a></li>
  399.                                                         </ul>
  400.                                                     </div>
  401.                                                     <div class="btn-group mt-2 mb-2">
  402.                                                         <button type="button" class="btn btn-danger">Action</button>
  403.                                                         <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">
  404.                                                             <span class="caret"></span>
  405.                                                             <span class="sr-only">Toggle Dropdown</span>
  406.                                                         </button>
  407.                                                         <ul class="dropdown-menu" role="menu">
  408.                                                             <li class="dropdown-plus-title">
  409.                                                                 Dropdown
  410.                                                                 <b class=" fa fa-angle-up"></b>
  411.                                                             </li>
  412.                                                             <li><a href="#">Action</a></li>
  413.                                                             <li><a href="#">Another action</a></li>
  414.                                                             <li><a href="#">Something else here</a></li>
  415.                                                             <li class="divider"></li>
  416.                                                             <li><a href="#">Separated link</a></li>
  417.                                                         </ul>
  418.                                                     </div>
  419.                                                     <div class="btn-group mt-2 mb-2">
  420.                                                         <button type="button" class="btn btn-dark">Action</button>
  421.                                                         <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">
  422.                                                             <span class="caret"></span>
  423.                                                             <span class="sr-only">Toggle Dropdown</span>
  424.                                                         </button>
  425.                                                         <ul class="dropdown-menu" role="menu">
  426.                                                             <li class="dropdown-plus-title">
  427.                                                                 Dropdown
  428.                                                                 <b class=" fa fa-angle-up"></b>
  429.                                                             </li>
  430.                                                             <li><a href="#">Action</a></li>
  431.                                                             <li><a href="#">Another action</a></li>
  432.                                                             <li><a href="#">Something else here</a></li>
  433.                                                             <li class="divider"></li>
  434.                                                             <li><a href="#">Separated link</a></li>
  435.                                                         </ul>
  436.                                                     </div>
  437.                                                     <div class="btn-group mt-2 mb-2">
  438.                                                         <button type="button" class="btn btn-light">Action</button>
  439.                                                         <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">
  440.                                                             <span class="caret"></span>
  441.                                                             <span class="sr-only">Toggle Dropdown</span>
  442.                                                         </button>
  443.                                                         <ul class="dropdown-menu" role="menu">
  444.                                                             <li class="dropdown-plus-title">
  445.                                                                 Dropdown
  446.                                                                 <b class=" fa fa-angle-up"></b>
  447.                                                             </li>
  448.                                                             <li><a href="#">Action</a></li>
  449.                                                             <li><a href="#">Another action</a></li>
  450.                                                             <li><a href="#">Something else here</a></li>
  451.                                                             <li class="divider"></li>
  452.                                                             <li><a href="#">Separated link</a></li>
  453.                                                         </ul>
  454.                                                     </div>
  455.                                                 </div>
  456.                                             </div>
  457.                                         </div>
  458.                                     </div>
  459.                                 </div><!-- COL END -->
  460.                                 <div class="col-md-12">
  461.                                     <div class="card">
  462.                                         <div class="card-header border-bottom">
  463.                                             <h3 class="card-title">Rounded Split button dropdowns</h3>
  464.                                         </div>
  465.                                         <div class="card-body">
  466.                                             <div class="example panel panel-default">
  467.                                                 <div class="panel-body p-0 border-0">
  468.                                                     <div class="btn-group mt-2 mb-2">
  469.                                                         <button type="button" class="btn btn-pill btn-default">Action</button>
  470.                                                         <button type="button" class="btn btn-pill btn-default dropdown-toggle" data-bs-toggle="dropdown">
  471.                                                             <span class="caret"></span>
  472.                                                             <span class="sr-only">Toggle Dropdown</span>
  473.                                                         </button>
  474.                                                         <ul class="dropdown-menu" role="menu">
  475.                                                             <li class="dropdown-plus-title">
  476.                                                                 Dropdown
  477.                                                                 <b class="fa fa-angle-up"></b>
  478.                                                             </li>
  479.                                                             <li><a href="#">Action</a></li>
  480.                                                             <li><a href="#">Another action</a></li>
  481.                                                             <li><a href="#">Something else here</a></li>
  482.                                                             <li class="divider"></li>
  483.                                                             <li><a href="#">Separated link</a></li>
  484.                                                         </ul>
  485.                                                     </div>
  486.                                                     <div class="btn-group mt-2 mb-2">
  487.                                                         <button type="button" class="btn btn-pill btn-primary">Action</button>
  488.                                                         <button type="button" class="btn btn-pill btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  489.                                                             <span class="caret"></span>
  490.                                                             <span class="sr-only">Toggle Dropdown</span>
  491.                                                         </button>
  492.                                                         <ul class="dropdown-menu" role="menu">
  493.                                                             <li class="dropdown-plus-title">
  494.                                                                 Dropdown
  495.                                                                 <b class="fa fa-angle-up"></b>
  496.                                                             </li>
  497.                                                             <li><a href="#">Action</a></li>
  498.                                                             <li><a href="#">Another action</a></li>
  499.                                                             <li><a href="#">Something else here</a></li>
  500.                                                             <li class="divider"></li>
  501.                                                             <li><a href="#">Separated link</a></li>
  502.                                                         </ul>
  503.                                                     </div>
  504.                                                     <div class="btn-group mt-2 mb-2">
  505.                                                         <button type="button" class="btn btn-pill btn-success">Action</button>
  506.                                                         <button type="button" class="btn btn-pill btn-success dropdown-toggle" data-bs-toggle="dropdown">
  507.                                                             <span class="caret"></span>
  508.                                                             <span class="sr-only">Toggle Dropdown</span>
  509.                                                         </button>
  510.                                                         <ul class="dropdown-menu" role="menu">
  511.                                                             <li class="dropdown-plus-title">
  512.                                                                 Dropdown
  513.                                                                 <b class="fa fa-angle-up"></b>
  514.                                                             </li>
  515.                                                             <li><a href="#">Action</a></li>
  516.                                                             <li><a href="#">Another action</a></li>
  517.                                                             <li><a href="#">Something else here</a></li>
  518.                                                             <li class="divider"></li>
  519.                                                             <li><a href="#">Separated link</a></li>
  520.                                                         </ul>
  521.                                                     </div>
  522.                                                     <div class="btn-group mt-2 mb-2">
  523.                                                         <button type="button" class="btn btn-pill btn-info">Action</button>
  524.                                                         <button type="button" class="btn btn-pill btn-info dropdown-toggle" data-bs-toggle="dropdown">
  525.                                                             <span class="caret"></span>
  526.                                                             <span class="sr-only">Toggle Dropdown</span>
  527.                                                         </button>
  528.                                                         <ul class="dropdown-menu" role="menu">
  529.                                                             <li class="dropdown-plus-title">
  530.                                                                 Dropdown
  531.                                                                 <b class="fa fa-angle-up"></b>
  532.                                                             </li>
  533.                                                             <li><a href="#">Action</a></li>
  534.                                                             <li><a href="#">Another action</a></li>
  535.                                                             <li><a href="#">Something else here</a></li>
  536.                                                             <li class="divider"></li>
  537.                                                             <li><a href="#">Separated link</a></li>
  538.                                                         </ul>
  539.                                                     </div>
  540.                                                     <div class="btn-group mt-2 mb-2">
  541.                                                         <button type="button" class="btn btn-pill btn-warning">Action</button>
  542.                                                         <button type="button" class="btn btn-warning btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  543.                                                             <span class="caret"></span>
  544.                                                             <span class="sr-only">Toggle Dropdown</span>
  545.                                                         </button>
  546.                                                         <ul class="dropdown-menu" role="menu">
  547.                                                             <li class="dropdown-plus-title">
  548.                                                                 Dropdown
  549.                                                                 <b class=" fa fa-angle-up"></b>
  550.                                                             </li>
  551.                                                             <li><a href="#">Action</a></li>
  552.                                                             <li><a href="#">Another action</a></li>
  553.                                                             <li><a href="#">Something else here</a></li>
  554.                                                             <li class="divider"></li>
  555.                                                             <li><a href="#">Separated link</a></li>
  556.                                                         </ul>
  557.                                                     </div>
  558.                                                     <div class="btn-group mt-2 mb-2">
  559.                                                         <button type="button" class="btn btn-pill btn-danger">Action</button>
  560.                                                         <button type="button" class="btn btn-pill btn-danger dropdown-toggle" data-bs-toggle="dropdown">
  561.                                                             <span class="caret"></span>
  562.                                                             <span class="sr-only">Toggle Dropdown</span>
  563.                                                         </button>
  564.                                                         <ul class="dropdown-menu" role="menu">
  565.                                                             <li class="dropdown-plus-title">
  566.                                                                 Dropdown
  567.                                                                 <b class="fa fa-angle-up"></b>
  568.                                                             </li>
  569.                                                             <li><a href="#">Action</a></li>
  570.                                                             <li><a href="#">Another action</a></li>
  571.                                                             <li><a href="#">Something else here</a></li>
  572.                                                             <li class="divider"></li>
  573.                                                             <li><a href="#">Separated link</a></li>
  574.                                                         </ul>
  575.                                                     </div>
  576.                                                     <div class="btn-group mt-2 mb-2">
  577.                                                         <button type="button" class="btn btn-pill btn-dark">Action</button>
  578.                                                         <button type="button" class="btn btn-pill btn-dark dropdown-toggle" data-bs-toggle="dropdown">
  579.                                                             <span class="caret"></span>
  580.                                                             <span class="sr-only">Toggle Dropdown</span>
  581.                                                         </button>
  582.                                                         <ul class="dropdown-menu" role="menu">
  583.                                                             <li class="dropdown-plus-title">
  584.                                                                 Dropdown
  585.                                                                 <b class="fa fa-angle-up"></b>
  586.                                                             </li>
  587.                                                             <li><a href="#">Action</a></li>
  588.                                                             <li><a href="#">Another action</a></li>
  589.                                                             <li><a href="#">Something else here</a></li>
  590.                                                             <li class="divider"></li>
  591.                                                             <li><a href="#">Separated link</a></li>
  592.                                                         </ul>
  593.                                                     </div>
  594.                                                     <div class="btn-group mt-2 mb-2">
  595.                                                         <button type="button" class="btn btn-pill btn-light">Action</button>
  596.                                                         <button type="button" class="btn btn-pill btn-light dropdown-toggle" data-bs-toggle="dropdown">
  597.                                                             <span class="caret"></span>
  598.                                                             <span class="sr-only">Toggle Dropdown</span>
  599.                                                         </button>
  600.                                                         <ul class="dropdown-menu" role="menu">
  601.                                                             <li class="dropdown-plus-title">
  602.                                                                 Dropdown
  603.                                                                 <b class="fa fa-angle-up"></b>
  604.                                                             </li>
  605.                                                             <li><a href="#">Action</a></li>
  606.                                                             <li><a href="#">Another action</a></li>
  607.                                                             <li><a href="#">Something else here</a></li>
  608.                                                             <li class="divider"></li>
  609.                                                             <li><a href="#">Separated link</a></li>
  610.                                                         </ul>
  611.                                                     </div>
  612.                                                 </div>
  613.                                             </div>
  614.                                         </div>
  615.                                     </div>
  616.                                 </div><!-- COL END -->
  617.                                 <div class="col-md-12">
  618.                                     <div class="card">
  619.                                         <div class="card-header border-bottom">
  620.                                             <h3 class="card-title">Single Square outline button dropdowns</h3>
  621.                                         </div>
  622.                                         <div class="card-body">
  623.                                             <div class="example panel panel-default">
  624.                                                 <div class="panel-body p-0 border-0">
  625.                                                     <div class="btn-group mt-2 mb-2">
  626.                                                         <button type="button" class="btn btn-outline-default dropdown-toggle" data-bs-toggle="dropdown">
  627.                                                             Action <span class="caret"></span>
  628.                                                         </button>
  629.                                                         <ul class="dropdown-menu" role="menu">
  630.                                                             <li class="dropdown-plus-title">
  631.                                                                 Dropdown
  632.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  633.                                                             </li>
  634.                                                             <li><a href="#">Action</a></li>
  635.                                                             <li><a href="#">Another action</a></li>
  636.                                                             <li><a href="#">Something else here</a></li>
  637.                                                             <li class="divider"></li>
  638.                                                             <li><a href="#">Separated link</a></li>
  639.                                                         </ul>
  640.                                                     </div>
  641.                                                     <div class="btn-group mt-2 mb-2">
  642.                                                         <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
  643.                                                             Action <span class="caret"></span>
  644.                                                         </button>
  645.                                                         <ul class="dropdown-menu" role="menu">
  646.                                                             <li class="dropdown-plus-title">
  647.                                                                 Dropdown
  648.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  649.                                                             </li>
  650.                                                             <li><a href="#">Action</a></li>
  651.                                                             <li><a href="#">Another action</a></li>
  652.                                                             <li><a href="#">Something else here</a></li>
  653.                                                             <li class="divider"></li>
  654.                                                             <li><a href="#">Separated link</a></li>
  655.                                                         </ul>
  656.                                                     </div>
  657.                                                     <div class="btn-group mt-2 mb-2">
  658.                                                         <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
  659.                                                             Action <span class="caret"></span>
  660.                                                         </button>
  661.                                                         <ul class="dropdown-menu" role="menu">
  662.                                                             <li class="dropdown-plus-title">
  663.                                                                 Dropdown
  664.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  665.                                                             </li>
  666.                                                             <li><a href="#">Action</a></li>
  667.                                                             <li><a href="#">Another action</a></li>
  668.                                                             <li><a href="#">Something else here</a></li>
  669.                                                             <li class="divider"></li>
  670.                                                             <li><a href="#">Separated link</a></li>
  671.                                                         </ul>
  672.                                                     </div>
  673.                                                     <div class="btn-group mt-2 mb-2">
  674.                                                         <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown">
  675.                                                             Action <span class="caret"></span>
  676.                                                         </button>
  677.                                                         <ul class="dropdown-menu" role="menu">
  678.                                                             <li class="dropdown-plus-title">
  679.                                                                 Dropdown
  680.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  681.                                                             </li>
  682.                                                             <li><a href="#">Action</a></li>
  683.                                                             <li><a href="#">Another action</a></li>
  684.                                                             <li><a href="#">Something else here</a></li>
  685.                                                             <li class="divider"></li>
  686.                                                             <li><a href="#">Separated link</a></li>
  687.                                                         </ul>
  688.                                                     </div>
  689.                                                     <div class="btn-group mt-2 mb-2">
  690.                                                         <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown">
  691.                                                             Action <span class="caret"></span>
  692.                                                         </button>
  693.                                                         <ul class="dropdown-menu" role="menu">
  694.                                                             <li class="dropdown-plus-title">
  695.                                                                 Dropdown
  696.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  697.                                                             </li>
  698.                                                             <li><a href="#">Action</a></li>
  699.                                                             <li><a href="#">Another action</a></li>
  700.                                                             <li><a href="#">Something else here</a></li>
  701.                                                             <li class="divider"></li>
  702.                                                             <li><a href="#">Separated link</a></li>
  703.                                                         </ul>
  704.                                                     </div>
  705.                                                     <div class="btn-group mt-2 mb-2">
  706.                                                         <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown">
  707.                                                             Action <span class="caret"></span>
  708.                                                         </button>
  709.                                                         <ul class="dropdown-menu" role="menu">
  710.                                                             <li class="dropdown-plus-title">
  711.                                                                 Dropdown
  712.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  713.                                                             </li>
  714.                                                             <li><a href="#">Action</a></li>
  715.                                                             <li><a href="#">Another action</a></li>
  716.                                                             <li><a href="#">Something else here</a></li>
  717.                                                             <li class="divider"></li>
  718.                                                             <li><a href="#">Separated link</a></li>
  719.                                                         </ul>
  720.                                                     </div>
  721.                                                     <div class="btn-group mt-2 mb-2">
  722.                                                         <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown">
  723.                                                             Action <span class="caret"></span>
  724.                                                         </button>
  725.                                                         <ul class="dropdown-menu" role="menu">
  726.                                                             <li class="dropdown-plus-title">
  727.                                                                 Dropdown
  728.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  729.                                                             </li>
  730.                                                             <li><a href="#">Action</a></li>
  731.                                                             <li><a href="#">Another action</a></li>
  732.                                                             <li><a href="#">Something else here</a></li>
  733.                                                             <li class="divider"></li>
  734.                                                             <li><a href="#">Separated link</a></li>
  735.                                                         </ul>
  736.                                                     </div>
  737.                                                     <div class="btn-group mt-2 mb-2">
  738.                                                         <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown">
  739.                                                             Action <span class="caret"></span>
  740.                                                         </button>
  741.                                                         <ul class="dropdown-menu" role="menu">
  742.                                                             <li class="dropdown-plus-title">
  743.                                                                 Dropdown
  744.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  745.                                                             </li>
  746.                                                             <li><a href="#">Action</a></li>
  747.                                                             <li><a href="#">Another action</a></li>
  748.                                                             <li><a href="#">Something else here</a></li>
  749.                                                             <li class="divider"></li>
  750.                                                             <li><a href="#">Separated link</a></li>
  751.                                                         </ul>
  752.                                                     </div>
  753.                                                     <div class="btn-group mt-2 mb-2">
  754.                                                         <button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown">
  755.                                                             Action <span class="caret"></span>
  756.                                                         </button>
  757.                                                         <ul class="dropdown-menu" role="menu">
  758.                                                             <li class="dropdown-plus-title">
  759.                                                                 Dropdown
  760.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  761.                                                             </li>
  762.                                                             <li><a href="#">Action</a></li>
  763.                                                             <li><a href="#">Another action</a></li>
  764.                                                             <li><a href="#">Something else here</a></li>
  765.                                                             <li class="divider"></li>
  766.                                                             <li><a href="#">Separated link</a></li>
  767.                                                         </ul>
  768.                                                     </div>
  769.                                                 </div>
  770.                                             </div>
  771.                                         </div>
  772.                                     </div>
  773.                                 </div><!-- COL END -->
  774.                                 <div class="col-md-12">
  775.                                     <div class="card">
  776.                                         <div class="card-header border-bottom">
  777.                                             <h3 class="card-title">Rounded button dropdowns</h3>
  778.                                         </div>
  779.                                         <div class="card-body">
  780.                                             <div class="example panel panel-default">
  781.                                                 <div class="panel-body p-0 border-0">
  782.                                                     <div class="btn-group mt-2 mb-2">
  783.                                                         <button type="button" class="btn btn-outline-default btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  784.                                                             Action <span class="caret"></span>
  785.                                                         </button>
  786.                                                         <ul class="dropdown-menu" role="menu">
  787.                                                             <li class="dropdown-plus-title">
  788.                                                                 Dropdown
  789.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  790.                                                             </li>
  791.                                                             <li><a href="#">Action</a></li>
  792.                                                             <li><a href="#">Another action</a></li>
  793.                                                             <li><a href="#">Something else here</a></li>
  794.                                                             <li class="divider"></li>
  795.                                                             <li><a href="#">Separated link</a></li>
  796.                                                         </ul>
  797.                                                     </div>
  798.                                                     <div class="btn-group mt-2 mb-2">
  799.                                                         <button type="button" class="btn btn-outline-primary btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  800.                                                             Action <span class="caret"></span>
  801.                                                         </button>
  802.                                                         <ul class="dropdown-menu" role="menu">
  803.                                                             <li class="dropdown-plus-title">
  804.                                                                 Dropdown
  805.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  806.                                                             </li>
  807.                                                             <li><a href="#">Action</a></li>
  808.                                                             <li><a href="#">Another action</a></li>
  809.                                                             <li><a href="#">Something else here</a></li>
  810.                                                             <li class="divider"></li>
  811.                                                             <li><a href="#">Separated link</a></li>
  812.                                                         </ul>
  813.                                                     </div>
  814.                                                     <div class="btn-group mt-2 mb-2">
  815.                                                         <button type="button" class="btn btn-outline-secondary btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  816.                                                             Action <span class="caret"></span>
  817.                                                         </button>
  818.                                                         <ul class="dropdown-menu" role="menu">
  819.                                                             <li class="dropdown-plus-title">
  820.                                                                 Dropdown
  821.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  822.                                                             </li>
  823.                                                             <li><a href="#">Action</a></li>
  824.                                                             <li><a href="#">Another action</a></li>
  825.                                                             <li><a href="#">Something else here</a></li>
  826.                                                             <li class="divider"></li>
  827.                                                             <li><a href="#">Separated link</a></li>
  828.                                                         </ul>
  829.                                                     </div>
  830.                                                     <div class="btn-group mt-2 mb-2">
  831.                                                         <button type="button" class="btn btn-outline-success btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  832.                                                             Action <span class="caret"></span>
  833.                                                         </button>
  834.                                                         <ul class="dropdown-menu" role="menu">
  835.                                                             <li class="dropdown-plus-title">
  836.                                                                 Dropdown
  837.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  838.                                                             </li>
  839.                                                             <li><a href="#">Action</a></li>
  840.                                                             <li><a href="#">Another action</a></li>
  841.                                                             <li><a href="#">Something else here</a></li>
  842.                                                             <li class="divider"></li>
  843.                                                             <li><a href="#">Separated link</a></li>
  844.                                                         </ul>
  845.                                                     </div>
  846.                                                     <div class="btn-group mt-2 mb-2">
  847.                                                         <button type="button" class="btn btn-outline-info btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  848.                                                             Action <span class="caret"></span>
  849.                                                         </button>
  850.                                                         <ul class="dropdown-menu" role="menu">
  851.                                                             <li class="dropdown-plus-title">
  852.                                                                 Dropdown
  853.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  854.                                                             </li>
  855.                                                             <li><a href="#">Action</a></li>
  856.                                                             <li><a href="#">Another action</a></li>
  857.                                                             <li><a href="#">Something else here</a></li>
  858.                                                             <li class="divider"></li>
  859.                                                             <li><a href="#">Separated link</a></li>
  860.                                                         </ul>
  861.                                                     </div>
  862.                                                     <div class="btn-group mt-2 mb-2">
  863.                                                         <button type="button" class="btn btn-outline-warning btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  864.                                                             Action <span class="caret"></span>
  865.                                                         </button>
  866.                                                         <ul class="dropdown-menu" role="menu">
  867.                                                             <li class="dropdown-plus-title">
  868.                                                                 Dropdown
  869.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  870.                                                             </li>
  871.                                                             <li><a href="#">Action</a></li>
  872.                                                             <li><a href="#">Another action</a></li>
  873.                                                             <li><a href="#">Something else here</a></li>
  874.                                                             <li class="divider"></li>
  875.                                                             <li><a href="#">Separated link</a></li>
  876.                                                         </ul>
  877.                                                     </div>
  878.                                                     <div class="btn-group mt-2 mb-2">
  879.                                                         <button type="button" class="btn btn-outline-danger btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  880.                                                             Action <span class="caret"></span>
  881.                                                         </button>
  882.                                                         <ul class="dropdown-menu" role="menu">
  883.                                                             <li class="dropdown-plus-title">
  884.                                                                 Dropdown
  885.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  886.                                                             </li>
  887.                                                             <li><a href="#">Action</a></li>
  888.                                                             <li><a href="#">Another action</a></li>
  889.                                                             <li><a href="#">Something else here</a></li>
  890.                                                             <li class="divider"></li>
  891.                                                             <li><a href="#">Separated link</a></li>
  892.                                                         </ul>
  893.                                                     </div>
  894.                                                     <div class="btn-group mt-2 mb-2">
  895.                                                         <button type="button" class="btn btn-outline-dark btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  896.                                                             Action <span class="caret"></span>
  897.                                                         </button>
  898.                                                         <ul class="dropdown-menu" role="menu">
  899.                                                             <li class="dropdown-plus-title">
  900.                                                                 Dropdown
  901.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  902.                                                             </li>
  903.                                                             <li><a href="#">Action</a></li>
  904.                                                             <li><a href="#">Another action</a></li>
  905.                                                             <li><a href="#">Something else here</a></li>
  906.                                                             <li class="divider"></li>
  907.                                                             <li><a href="#">Separated link</a></li>
  908.                                                         </ul>
  909.                                                     </div>
  910.                                                     <div class="btn-group mt-2 mb-2">
  911.                                                         <button type="button" class="btn btn-outline-light btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  912.                                                             Action <span class="caret"></span>
  913.                                                         </button>
  914.                                                         <ul class="dropdown-menu" role="menu">
  915.                                                             <li class="dropdown-plus-title">
  916.                                                                 Dropdown
  917.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  918.                                                             </li>
  919.                                                             <li><a href="#">Action</a></li>
  920.                                                             <li><a href="#">Another action</a></li>
  921.                                                             <li><a href="#">Something else here</a></li>
  922.                                                             <li class="divider"></li>
  923.                                                             <li><a href="#">Separated link</a></li>
  924.                                                         </ul>
  925.                                                     </div>
  926.                                                 </div>
  927.                                             </div>
  928.                                         </div>
  929.                                     </div>
  930.                                 </div><!-- COL END -->
  931.                                 <div class="col-md-12">
  932.                                     <div class="card">
  933.                                         <div class="card-header border-bottom">
  934.                                             <h3 class="card-title">Split button dropdowns</h3>
  935.                                         </div>
  936.                                         <div class="card-body">
  937.                                             <div class="example panel panel-default">
  938.                                                 <div class="panel-body p-0 border-0">
  939.                                                     <div class="btn-group mt-2 mb-2">
  940.                                                         <button type="button" class="btn btn-outline-default">Action</button>
  941.                                                         <button type="button" class="btn btn-outline-default dropdown-toggle" data-bs-toggle="dropdown">
  942.                                                             <span class="caret"></span>
  943.                                                             <span class="sr-only">Toggle Dropdown</span>
  944.                                                         </button>
  945.                                                         <ul class="dropdown-menu" role="menu">
  946.                                                             <li class="dropdown-plus-title">
  947.                                                                 Dropdown
  948.                                                                 <b class="fa fa-angle-up"></b>
  949.                                                             </li>
  950.                                                             <li><a href="#">Action</a></li>
  951.                                                             <li><a href="#">Another action</a></li>
  952.                                                             <li><a href="#">Something else here</a></li>
  953.                                                             <li class="divider"></li>
  954.                                                             <li><a href="#">Separated link</a></li>
  955.                                                         </ul>
  956.                                                     </div>
  957.                                                     <div class="btn-group mt-2 mb-2">
  958.                                                         <button type="button" class="btn btn-outline-primary">Action</button>
  959.                                                         <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
  960.                                                             <span class="caret"></span>
  961.                                                             <span class="sr-only">Toggle Dropdown</span>
  962.                                                         </button>
  963.                                                         <ul class="dropdown-menu" role="menu">
  964.                                                             <li class="dropdown-plus-title">
  965.                                                                 Dropdown
  966.                                                                 <b class="fa fa-angle-up"></b>
  967.                                                             </li>
  968.                                                             <li><a href="#">Action</a></li>
  969.                                                             <li><a href="#">Another action</a></li>
  970.                                                             <li><a href="#">Something else here</a></li>
  971.                                                             <li class="divider"></li>
  972.                                                             <li><a href="#">Separated link</a></li>
  973.                                                         </ul>
  974.                                                     </div>
  975.                                                     <div class="btn-group mt-2 mb-2">
  976.                                                         <button type="button" class="btn btn-outline-secondary">Action</button>
  977.                                                         <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
  978.                                                             <span class="caret"></span>
  979.                                                             <span class="sr-only">Toggle Dropdown</span>
  980.                                                         </button>
  981.                                                         <ul class="dropdown-menu" role="menu">
  982.                                                             <li class="dropdown-plus-title">
  983.                                                                 Dropdown
  984.                                                                 <b class="fa fa-angle-up"></b>
  985.                                                             </li>
  986.                                                             <li><a href="#">Action</a></li>
  987.                                                             <li><a href="#">Another action</a></li>
  988.                                                             <li><a href="#">Something else here</a></li>
  989.                                                             <li class="divider"></li>
  990.                                                             <li><a href="#">Separated link</a></li>
  991.                                                         </ul>
  992.                                                     </div>
  993.                                                     <div class="btn-group mt-2 mb-2">
  994.                                                         <button type="button" class="btn btn-outline-success">Action</button>
  995.                                                         <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown">
  996.                                                             <span class="caret"></span>
  997.                                                             <span class="sr-only">Toggle Dropdown</span>
  998.                                                         </button>
  999.                                                         <ul class="dropdown-menu" role="menu">
  1000.                                                             <li class="dropdown-plus-title">
  1001.                                                                 Dropdown
  1002.                                                                 <b class="fa fa-angle-up"></b>
  1003.                                                             </li>
  1004.                                                             <li><a href="#">Action</a></li>
  1005.                                                             <li><a href="#">Another action</a></li>
  1006.                                                             <li><a href="#">Something else here</a></li>
  1007.                                                             <li class="divider"></li>
  1008.                                                             <li><a href="#">Separated link</a></li>
  1009.                                                         </ul>
  1010.                                                     </div>
  1011.                                                     <div class="btn-group mt-2 mb-2">
  1012.                                                         <button type="button" class="btn btn-outline-info">Action</button>
  1013.                                                         <button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown">
  1014.                                                             <span class="caret"></span>
  1015.                                                             <span class="sr-only">Toggle Dropdown</span>
  1016.                                                         </button>
  1017.                                                         <ul class="dropdown-menu" role="menu">
  1018.                                                             <li class="dropdown-plus-title">
  1019.                                                                 Dropdown
  1020.                                                                 <b class="fa fa-angle-up"></b>
  1021.                                                             </li>
  1022.                                                             <li><a href="#">Action</a></li>
  1023.                                                             <li><a href="#">Another action</a></li>
  1024.                                                             <li><a href="#">Something else here</a></li>
  1025.                                                             <li class="divider"></li>
  1026.                                                             <li><a href="#">Separated link</a></li>
  1027.                                                         </ul>
  1028.                                                     </div>
  1029.                                                     <div class="btn-group mt-2 mb-2">
  1030.                                                         <button type="button" class="btn btn-outline-warning">Action</button>
  1031.                                                         <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown">
  1032.                                                             <span class="caret"></span>
  1033.                                                             <span class="sr-only">Toggle Dropdown</span>
  1034.                                                         </button>
  1035.                                                         <ul class="dropdown-menu" role="menu">
  1036.                                                             <li class="dropdown-plus-title">
  1037.                                                                 Dropdown
  1038.                                                                 <b class="fa fa-angle-up"></b>
  1039.                                                             </li>
  1040.                                                             <li><a href="#">Action</a></li>
  1041.                                                             <li><a href="#">Another action</a></li>
  1042.                                                             <li><a href="#">Something else here</a></li>
  1043.                                                             <li class="divider"></li>
  1044.                                                             <li><a href="#">Separated link</a></li>
  1045.                                                         </ul>
  1046.                                                     </div>
  1047.                                                     <div class="btn-group mt-2 mb-2">
  1048.                                                         <button type="button" class="btn btn-outline-dark">Action</button>
  1049.                                                         <button type="button" class="btn btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown">
  1050.                                                             <span class="caret"></span>
  1051.                                                             <span class="sr-only">Toggle Dropdown</span>
  1052.                                                         </button>
  1053.                                                         <ul class="dropdown-menu" role="menu">
  1054.                                                             <li class="dropdown-plus-title">
  1055.                                                                 Dropdown
  1056.                                                                 <b class="fa fa-angle-up"></b>
  1057.                                                             </li>
  1058.                                                             <li><a href="#">Action</a></li>
  1059.                                                             <li><a href="#">Another action</a></li>
  1060.                                                             <li><a href="#">Something else here</a></li>
  1061.                                                             <li class="divider"></li>
  1062.                                                             <li><a href="#">Separated link</a></li>
  1063.                                                         </ul>
  1064.                                                     </div>
  1065.                                                     <div class="btn-group mt-2 mb-2">
  1066.                                                         <button type="button" class="btn btn-outline-light">Action</button>
  1067.                                                         <button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown">
  1068.                                                             <span class="caret"></span>
  1069.                                                             <span class="sr-only">Toggle Dropdown</span>
  1070.                                                         </button>
  1071.                                                         <ul class="dropdown-menu" role="menu">
  1072.                                                             <li class="dropdown-plus-title">
  1073.                                                                 Dropdown
  1074.                                                                 <b class="fa fa-angle-up"></b>
  1075.                                                             </li>
  1076.                                                             <li><a href="#">Action</a></li>
  1077.                                                             <li><a href="#">Another action</a></li>
  1078.                                                             <li><a href="#">Something else here</a></li>
  1079.                                                             <li class="divider"></li>
  1080.                                                             <li><a href="#">Separated link</a></li>
  1081.                                                         </ul>
  1082.                                                     </div>
  1083.                                                 </div>
  1084.                                             </div>
  1085.                                         </div>
  1086.                                     </div>
  1087.                                 </div><!-- COL END -->
  1088.                                 <div class="col-md-12">
  1089.                                     <div class="card">
  1090.                                         <div class="card-header border-bottom">
  1091.                                             <h3 class="card-title">Rounded Split button dropdowns</h3>
  1092.                                         </div>
  1093.                                         <div class="card-body">
  1094.                                             <div class="example panel panel-default">
  1095.                                                 <div class="panel-body p-0 border-0">
  1096.                                                     <div class="btn-group mt-2 mb-2">
  1097.                                                         <button type="button" class="btn btn-pill btn-outline-default">Action</button>
  1098.                                                         <button type="button" class="btn btn-pill btn-outline-default dropdown-toggle" data-bs-toggle="dropdown">
  1099.                                                             <span class="caret"></span>
  1100.                                                             <span class="sr-only">Toggle Dropdown</span>
  1101.                                                         </button>
  1102.                                                         <ul class="dropdown-menu" role="menu">
  1103.                                                             <li class="dropdown-plus-title">
  1104.                                                                 Dropdown
  1105.                                                                 <b class=" fa fa-angle-up"></b>
  1106.                                                             </li>
  1107.                                                             <li><a href="#">Action</a></li>
  1108.                                                             <li><a href="#">Another action</a></li>
  1109.                                                             <li><a href="#">Something else here</a></li>
  1110.                                                             <li class="divider"></li>
  1111.                                                             <li><a href="#">Separated link</a></li>
  1112.                                                         </ul>
  1113.                                                     </div>
  1114.                                                     <div class="btn-group mt-2 mb-2">
  1115.                                                         <button type="button" class="btn btn-pill btn-outline-primary">Action</button>
  1116.                                                         <button type="button" class="btn btn-pill btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
  1117.                                                             <span class="caret"></span>
  1118.                                                             <span class="sr-only">Toggle Dropdown</span>
  1119.                                                         </button>
  1120.                                                         <ul class="dropdown-menu" role="menu">
  1121.                                                             <li class="dropdown-plus-title">
  1122.                                                                 Dropdown
  1123.                                                                 <b class=" fa fa-angle-up"></b>
  1124.                                                             </li>
  1125.                                                             <li><a href="#">Action</a></li>
  1126.                                                             <li><a href="#">Another action</a></li>
  1127.                                                             <li><a href="#">Something else here</a></li>
  1128.                                                             <li class="divider"></li>
  1129.                                                             <li><a href="#">Separated link</a></li>
  1130.                                                         </ul>
  1131.                                                     </div>
  1132.                                                     <div class="btn-group mt-2 mb-2">
  1133.                                                         <button type="button" class="btn btn-pill btn-outline-secondary">Action</button>
  1134.                                                         <button type="button" class="btn btn-pill btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
  1135.                                                             <span class="caret"></span>
  1136.                                                             <span class="sr-only">Toggle Dropdown</span>
  1137.                                                         </button>
  1138.                                                         <ul class="dropdown-menu" role="menu">
  1139.                                                             <li class="dropdown-plus-title">
  1140.                                                                 Dropdown
  1141.                                                                 <b class=" fa fa-angle-up"></b>
  1142.                                                             </li>
  1143.                                                             <li><a href="#">Action</a></li>
  1144.                                                             <li><a href="#">Another action</a></li>
  1145.                                                             <li><a href="#">Something else here</a></li>
  1146.                                                             <li class="divider"></li>
  1147.                                                             <li><a href="#">Separated link</a></li>
  1148.                                                         </ul>
  1149.                                                     </div>
  1150.                                                     <div class="btn-group mt-2 mb-2">
  1151.                                                         <button type="button" class="btn btn-pill btn-outline-success">Action</button>
  1152.                                                         <button type="button" class="btn btn-pill btn-outline-success dropdown-toggle" data-bs-toggle="dropdown">
  1153.                                                             <span class="caret"></span>
  1154.                                                             <span class="sr-only">Toggle Dropdown</span>
  1155.                                                         </button>
  1156.                                                         <ul class="dropdown-menu" role="menu">
  1157.                                                             <li class="dropdown-plus-title">
  1158.                                                                 Dropdown
  1159.                                                                 <b class="fa fa-angle-up"></b>
  1160.                                                             </li>
  1161.                                                             <li><a href="#">Action</a></li>
  1162.                                                             <li><a href="#">Another action</a></li>
  1163.                                                             <li><a href="#">Something else here</a></li>
  1164.                                                             <li class="divider"></li>
  1165.                                                             <li><a href="#">Separated link</a></li>
  1166.                                                         </ul>
  1167.                                                     </div>
  1168.                                                     <div class="btn-group mt-2 mb-2">
  1169.                                                         <button type="button" class="btn btn-pill btn-outline-info">Action</button>
  1170.                                                         <button type="button" class="btn btn-pill btn-outline-info dropdown-toggle" data-bs-toggle="dropdown">
  1171.                                                             <span class="caret"></span>
  1172.                                                             <span class="sr-only">Toggle Dropdown</span>
  1173.                                                         </button>
  1174.                                                         <ul class="dropdown-menu" role="menu">
  1175.                                                             <li class="dropdown-plus-title">
  1176.                                                                 Dropdown
  1177.                                                                 <b class="fa fa-angle-up"></b>
  1178.                                                             </li>
  1179.                                                             <li><a href="#">Action</a></li>
  1180.                                                             <li><a href="#">Another action</a></li>
  1181.                                                             <li><a href="#">Something else here</a></li>
  1182.                                                             <li class="divider"></li>
  1183.                                                             <li><a href="#">Separated link</a></li>
  1184.                                                         </ul>
  1185.                                                     </div>
  1186.                                                     <div class="btn-group mt-2 mb-2">
  1187.                                                         <button type="button" class="btn btn-pill btn-outline-warning">Action</button>
  1188.                                                         <button type="button" class="btn btn-outline-warning btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  1189.                                                             <span class="caret"></span>
  1190.                                                             <span class="sr-only">Toggle Dropdown</span>
  1191.                                                         </button>
  1192.                                                         <ul class="dropdown-menu" role="menu">
  1193.                                                             <li class="dropdown-plus-title">
  1194.                                                                 Dropdown
  1195.                                                                 <b class="fa fa-angle-up"></b>
  1196.                                                             </li>
  1197.                                                             <li><a href="#">Action</a></li>
  1198.                                                             <li><a href="#">Another action</a></li>
  1199.                                                             <li><a href="#">Something else here</a></li>
  1200.                                                             <li class="divider"></li>
  1201.                                                             <li><a href="#">Separated link</a></li>
  1202.                                                         </ul>
  1203.                                                     </div>
  1204.                                                     <div class="btn-group mt-2 mb-2">
  1205.                                                         <button type="button" class="btn btn-pill btn-outline-danger">Action</button>
  1206.                                                         <button type="button" class="btn btn-pill btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown">
  1207.                                                             <span class="caret"></span>
  1208.                                                             <span class="sr-only">Toggle Dropdown</span>
  1209.                                                         </button>
  1210.                                                         <ul class="dropdown-menu" role="menu">
  1211.                                                             <li class="dropdown-plus-title">
  1212.                                                                 Dropdown
  1213.                                                                 <b class="fa fa-angle-up"></b>
  1214.                                                             </li>
  1215.                                                             <li><a href="#">Action</a></li>
  1216.                                                             <li><a href="#">Another action</a></li>
  1217.                                                             <li><a href="#">Something else here</a></li>
  1218.                                                             <li class="divider"></li>
  1219.                                                             <li><a href="#">Separated link</a></li>
  1220.                                                         </ul>
  1221.                                                     </div>
  1222.                                                     <div class="btn-group mt-2 mb-2">
  1223.                                                         <button type="button" class="btn btn-pill btn-outline-dark">Action</button>
  1224.                                                         <button type="button" class="btn btn-pill btn-outline-dark dropdown-toggle" data-bs-toggle="dropdown">
  1225.                                                             <span class="caret"></span>
  1226.                                                             <span class="sr-only">Toggle Dropdown</span>
  1227.                                                         </button>
  1228.                                                         <ul class="dropdown-menu" role="menu">
  1229.                                                             <li class="dropdown-plus-title">
  1230.                                                                 Dropdown
  1231.                                                                 <b class="fa fa-angle-up"></b>
  1232.                                                             </li>
  1233.                                                             <li><a href="#">Action</a></li>
  1234.                                                             <li><a href="#">Another action</a></li>
  1235.                                                             <li><a href="#">Something else here</a></li>
  1236.                                                             <li class="divider"></li>
  1237.                                                             <li><a href="#">Separated link</a></li>
  1238.                                                         </ul>
  1239.                                                     </div>
  1240.                                                     <div class="btn-group mt-2 mb-2">
  1241.                                                         <button type="button" class="btn btn-pill btn-outline-light">Action</button>
  1242.                                                         <button type="button" class="btn btn-pill btn-outline-light dropdown-toggle" data-bs-toggle="dropdown">
  1243.                                                             <span class="caret"></span>
  1244.                                                             <span class="sr-only">Toggle Dropdown</span>
  1245.                                                         </button>
  1246.                                                         <ul class="dropdown-menu" role="menu">
  1247.                                                             <li class="dropdown-plus-title">
  1248.                                                                 Dropdown
  1249.                                                                 <b class="fa fa-angle-up"></b>
  1250.                                                             </li>
  1251.                                                             <li><a href="#">Action</a></li>
  1252.                                                             <li><a href="#">Another action</a></li>
  1253.                                                             <li><a href="#">Something else here</a></li>
  1254.                                                             <li class="divider"></li>
  1255.                                                             <li><a href="#">Separated link</a></li>
  1256.                                                         </ul>
  1257.                                                     </div>
  1258.                                                 </div>
  1259.                                             </div>
  1260.                                         </div>
  1261.                                     </div>
  1262.                                 </div><!-- COL END -->
  1263.                                 <div class="col-md-12">
  1264.                                     <div class="card">
  1265.                                         <div class="card-header border-bottom">
  1266.                                             <h3 class="card-title">Dropup variation</h3>
  1267.                                         </div>
  1268.                                         <div class="card-body">
  1269.                                             <div class="example">
  1270.                                                 <div class="dropup btn-group mt-2 mb-2">
  1271.                                                     <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropup1
  1272.                                                         <span class="caret"></span></button>
  1273.                                                     <ul class="dropdown-menu">
  1274.                                                         <li><a href="#">HTML</a></li>
  1275.                                                         <li><a href="#">CSS</a></li>
  1276.                                                         <li><a href="#">JavaScript</a></li>
  1277.                                                         <li class="divider"></li>
  1278.                                                         <li><a href="#">About Us</a></li>
  1279.                                                     </ul>
  1280.                                                 </div>
  1281.                                                 <!-- Split dropup button -->
  1282.                                                 <div class="dropup btn-group mt-2 mb-2">
  1283.                                                     <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropup2
  1284.                                                         <span class="caret"></span></button>
  1285.                                                     <ul class="dropdown-menu">
  1286.                                                         <li><a href="#">HTML</a></li>
  1287.                                                         <li><a href="#">CSS</a></li>
  1288.                                                         <li><a href="#">JavaScript</a></li>
  1289.                                                         <li class="divider"></li>
  1290.                                                         <li><a href="#">About Us</a></li>
  1291.                                                     </ul>
  1292.                                                 </div>
  1293.                                             </div>
  1294.                                         </div>
  1295.                                     </div>
  1296.                                 </div><!-- COL END -->
  1297.                                 <div class="col-md-12">
  1298.                                     <div class="card">
  1299.                                         <div class="card-header border-bottom">
  1300.                                             <h3 class="card-title">Icon Drop Downs dropdowns</h3>
  1301.                                         </div>
  1302.                                         <div class="card-body">
  1303.                                             <div class="example panel panel-default">
  1304.                                                 <div class="panel-body p-0 border-0">
  1305.                                                     <div class="btn-group mt-2 mb-2">
  1306.                                                         <button type="button" class="btn btn-dropdown-icon btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  1307.                                                             <i class="fa fa-cog"></i> <span class="caret"></span>
  1308.                                                         </button>
  1309.                                                         <ul class="dropdown-menu" role="menu">
  1310.                                                             <li class="dropdown-plus-title">
  1311.                                                                 Dropdown
  1312.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  1313.                                                             </li>
  1314.                                                             <li><a href="#">Action</a></li>
  1315.                                                             <li><a href="#">Another action</a></li>
  1316.                                                             <li><a href="#">Something else here</a></li>
  1317.                                                             <li class="divider"></li>
  1318.                                                             <li><a href="#">Separated link</a></li>
  1319.                                                         </ul>
  1320.                                                     </div>
  1321.                                                     <div class="btn-group mt-2 mb-2">
  1322.                                                         <button type="button" class="btn btn-dropdown-icon btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  1323.                                                             <i class="fa fa-ellipsis-h"></i> <span class="caret"></span>
  1324.                                                         </button>
  1325.                                                         <ul class="dropdown-menu" role="menu">
  1326.                                                             <li class="dropdown-plus-title">
  1327.                                                                 Dropdown
  1328.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  1329.                                                             </li>
  1330.                                                             <li><a href="#">Action</a></li>
  1331.                                                             <li><a href="#">Another action</a></li>
  1332.                                                             <li><a href="#">Something else here</a></li>
  1333.                                                             <li class="divider"></li>
  1334.                                                             <li><a href="#">Separated link</a></li>
  1335.                                                         </ul>
  1336.                                                     </div>
  1337.                                                     <div class="btn-group mt-2 mb-2">
  1338.                                                         <button type="button" class="btn btn-dropdown-icon btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  1339.                                                             <i class="fa fa-ellipsis-v "></i><span class="caret"></span>
  1340.                                                         </button>
  1341.                                                         <ul class="dropdown-menu" role="menu">
  1342.                                                             <li class="dropdown-plus-title">
  1343.                                                                 Dropdown
  1344.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  1345.                                                             </li>
  1346.                                                             <li><a href="#">Action</a></li>
  1347.                                                             <li><a href="#">Another action</a></li>
  1348.                                                             <li><a href="#">Something else here</a></li>
  1349.                                                             <li class="divider"></li>
  1350.                                                             <li><a href="#">Separated link</a></li>
  1351.                                                         </ul>
  1352.                                                     </div>
  1353.                                                     <div class="btn-group mt-2 mb-2">
  1354.                                                         <button type="button" class="btn btn-dropdown-icon1 btn-pill dropdown-toggle" data-bs-toggle="dropdown">
  1355.                                                             <i class="fa fa-chain"></i> <span class="caret"></span>
  1356.                                                         </button>
  1357.                                                         <ul class="dropdown-menu" role="menu">
  1358.                                                             <li class="dropdown-plus-title">
  1359.                                                                 Dropdown
  1360.                                                                 <b class="fa fa-angle-up" aria-hidden="true"></b>
  1361.                                                             </li>
  1362.                                                             <li><a href="#">Action</a></li>
  1363.                                                             <li><a href="#">Another action</a></li>
  1364.                                                             <li><a href="#">Something else here</a></li>
  1365.                                                             <li class="divider"></li>
  1366.                                                             <li><a href="#">Separated link</a></li>
  1367.                                                         </ul>
  1368.                                                     </div>
  1369.                                                 </div>
  1370.                                             </div>
  1371.                                         </div>
  1372.                                     </div>
  1373.                                 </div><!-- COL END -->
  1374.                             </div>
  1375.                             <!-- ROW-1 CLOSED -->
  1376. {% endblock %}