templates/buttons/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">Buttons</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">Buttons</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 col-lg-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Default Button</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div class="text-wrap">
  28.                                                 <p>Use any of the available button classes to quickly create a styled button.</p>
  29.                                                 <div class="example">
  30.                                                     <div class="btn-list">
  31.                                                         <a href="javascript:void(0)" class="btn btn-default">Default</a>
  32.                                                         <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
  33.                                                         <a href="javascript:void(0)" class="btn btn-secondary">Secondary</a>
  34.                                                         <a href="javascript:void(0)" class="btn btn-success">Success</a>
  35.                                                         <a href="javascript:void(0)" class="btn btn-info">Info</a>
  36.                                                         <a href="javascript:void(0)" class="btn btn-warning">Warning</a>
  37.                                                         <a href="javascript:void(0)" class="btn btn-danger">Danger</a>
  38.                                                         <a href="javascript:void(0)" class="btn btn-dark">Dark</a>
  39.                                                         <a href="javascript:void(0)" class="btn btn-light">Light</a>
  40.                                                         <a href="javascript:void(0)" class="btn btn-link">Link</a>
  41.                                                     </div>
  42.                                                 </div>
  43.                                             </div>
  44.                                         </div>
  45.                                     </div>
  46.                                 </div><!-- COL END -->
  47.                                 <div class="col-md-12 col-lg-12">
  48.                                     <div class="card">
  49.                                         <div class="card-header border-bottom">
  50.                                             <h3 class="card-title">light buttons</h3>
  51.                                         </div>
  52.                                         <div class="card-body">
  53.                                             <div class="text-wrap">
  54.                                                 <p>Make buttons  the light to any <code class="highlighter-rouge">.btn</code> element. <code class="highlighter-rouge">&lt;a&gt;</code>s don’t support the light attribute, so you must add the <code class="highlighter-rouge">.light</code> class to make it visually appear light.</p>
  55.                                                 <div class="example">
  56.                                                     <div class="btn-list">
  57.                                                         <a href="javascript:void(0)" class="btn btn-default-light">Default</a>
  58.                                                         <a href="javascript:void(0)" class="btn btn-primary-light ">Primary</a>
  59.                                                         <a href="javascript:void(0)" class="btn btn-secondary-light ">Secondary</a>
  60.                                                         <a href="javascript:void(0)" class="btn btn-success-light ">Success</a>
  61.                                                         <a href="javascript:void(0)" class="btn btn-info-light ">Info</a>
  62.                                                         <a href="javascript:void(0)" class="btn btn-warning-light ">Warning</a>
  63.                                                         <a href="javascript:void(0)" class="btn btn-danger-light ">Danger</a>
  64.                                                         <a href="javascript:void(0)" class="btn btn-dark-light ">Dark</a>
  65.                                                         <a href="javascript:void(0)" class="btn btn-light-light ">Light</a>
  66.                                                     </div>
  67.                                                 </div>
  68.                                             </div>
  69.                                         </div>
  70.                                     </div>
  71.                                 </div><!-- COL END -->
  72.                                 <div class="col-md-12 col-lg-12">
  73.                                     <div class="card">
  74.                                         <div class="card-header border-bottom">
  75.                                             <h3 class="card-title">Disabled buttons</h3>
  76.                                         </div>
  77.                                         <div class="card-body">
  78.                                             <div class="text-wrap">
  79.                                                 <p>Make buttons  the disabled to any <code class="highlighter-rouge">.btn</code> element. <code class="highlighter-rouge">&lt;a&gt;</code>s don’t support the disabled attribute, so you must add the <code class="highlighter-rouge">.disabled</code> class to make it visually appear disabled.</p>
  80.                                                 <div class="example">
  81.                                                     <div class="btn-list">
  82.                                                         <a href="#" class="btn btn-primary disabled">Primary</a>
  83.                                                         <a href="#" class="btn btn-secondary disabled">Secondary</a>
  84.                                                         <a href="#" class="btn btn-success disabled">Success</a>
  85.                                                         <a href="#" class="btn btn-info disabled">Info</a>
  86.                                                         <a href="#" class="btn btn-warning disabled">Warning</a>
  87.                                                         <a href="#" class="btn btn-danger disabled">Danger</a>
  88.                                                         <a href="#" class="btn btn-dark disabled">Dark</a>
  89.                                                         <a href="#" class="btn btn-light disabled">Light</a>
  90.                                                     </div>
  91.                                                 </div>
  92.                                             </div>
  93.                                         </div>
  94.                                     </div>
  95.                                 </div><!-- COL END -->
  96.                             </div>
  97.                             <!-- ROW-1 CLOSED -->
  99.                             <!-- ROW-2 OPEN -->
  100.                             <div class="row ">
  101.                                 <div class="col-md-12">
  102.                                     <div class="card">
  103.                                         <div class="card-header border-bottom">
  104.                                             <h3 class="card-title">Color variations</h3>
  105.                                         </div>
  106.                                         <div class="card-body">
  107.                                             <div class="text-wrap">
  108.                                                 <p>The classic button, in different colors.</p>
  109.                                                 <div class="example">
  110.                                                     <div class="btn-list">
  111.                                                         <a href="javascript:void(0)" class="btn btn-blue">Blue</a>
  112.                                                         <a href="javascript:void(0)" class="btn btn-azure">Azure</a>
  113.                                                         <a href="javascript:void(0)" class="btn btn-indigo">Indigo</a>
  114.                                                         <a href="javascript:void(0)" class="btn btn-purple">Purple</a>
  115.                                                         <a href="javascript:void(0)" class="btn btn-pink">Pink</a>
  116.                                                         <a href="javascript:void(0)" class="btn btn-red">Red</a>
  117.                                                         <a href="javascript:void(0)" class="btn btn-orange">Orange</a>
  118.                                                         <a href="javascript:void(0)" class="btn btn-yellow">Yellow</a>
  119.                                                         <a href="javascript:void(0)" class="btn btn-lime">Lime</a>
  120.                                                         <a href="javascript:void(0)" class="btn btn-green">Green</a>
  121.                                                         <a href="javascript:void(0)" class="btn btn-teal">Teal</a>
  122.                                                         <a href="javascript:void(0)" class="btn btn-cyan">Cyan</a>
  123.                                                         <a href="javascript:void(0)" class="btn btn-gray">Gray</a>
  124.                                                         <a href="javascript:void(0)" class="btn btn-gray-dark">Dark gray</a>
  125.                                                     </div>
  126.                                                 </div>
  127.                                             </div>
  128.                                         </div>
  129.                                     </div>
  130.                                 </div><!-- COL END -->
  131.                                 <div class="col-md-12">
  132.                                     <div class="card">
  133.                                         <div class="card-header border-bottom">
  134.                                             <h3 class="card-title">Gradient Buttons</h3>
  135.                                         </div>
  136.                                         <div class="card-body">
  137.                                             <div class="text-wrap">
  138.                                                 <p>Here the some of Gradient Buttons</p>
  139.                                                 <div class="example">
  140.                                                     <div class="btn-list">
  141.                                                         <a href="javascript:void(0)" class="btn btn-primary-gradient">Primary</a>
  142.                                                         <a href="javascript:void(0)" class="btn btn-secondary-gradient">Secondary</a>
  143.                                                         <a href="javascript:void(0)" class="btn btn-success-gradient">Success</a>
  144.                                                         <a href="javascript:void(0)" class="btn btn-info-gradient">Info</a>
  145.                                                         <a href="javascript:void(0)" class="btn btn-warning-gradient">Warning</a>
  146.                                                         <a href="javascript:void(0)" class="btn btn-danger-gradient">Danger</a>
  147.                                                     </div>
  148.                                                 </div>
  149.                                             </div>
  150.                                         </div>
  151.                                     </div>
  152.                                 </div><!-- COL END -->
  153.                                 <div class="col-md-12">
  154.                                     <div class="card">
  155.                                         <div class="card-header border-bottom">
  156.                                             <h3 class="card-title">Border buttons</h3>
  157.                                         </div>
  158.                                         <div class="card-body">
  159.                                             <div class="text-wrap">
  160.                                                 <p>  The default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code> </p>
  161.                                                 <div class="example">
  162.                                                     <div class="btn-list">
  163.                                                         <a href="javascript:void(0)" class="btn btn-outline-default">Default</a>
  164.                                                         <a href="javascript:void(0)" class="btn btn-outline-primary">Primary</a>
  165.                                                         <a href="javascript:void(0)" class="btn btn-outline-secondary">Secondary</a>
  166.                                                         <a href="javascript:void(0)" class="btn btn-outline-success">Success</a>
  167.                                                         <a href="javascript:void(0)" class="btn btn-outline-info">Info</a>
  168.                                                         <a href="javascript:void(0)" class="btn btn-outline-warning">Warning</a>
  169.                                                         <a href="javascript:void(0)" class="btn btn-outline-danger">Danger</a>
  170.                                                         <a href="javascript:void(0)" class="btn btn-outline-dark">Dark</a>
  171.                                                         <a href="javascript:void(0)" class="btn btn-outline-light">light</a>
  172.                                                     </div>
  173.                                                 </div>
  174.                                             </div>
  175.                                         </div>
  176.                                     </div>
  177.                                 </div><!-- COL END -->
  178.                             </div>
  179.                             <!-- ROW-2 CLOSED -->
  181.                             <!-- ROW-3 OPEN -->
  182.                             <div class="row">
  183.                                 <div class="col-md-12">
  184.                                     <div class="card">
  185.                                         <div class="card-header border-bottom">
  186.                                             <h3 class="card-title">Radius buttons</h3>
  187.                                         </div>
  188.                                         <div class="card-body">
  189.                                             <div class="text-wrap">
  190.                                                 <p>Add <code class="highlighter-rouge">.btn-radius</code> to button to remove border-radius.</p>
  191.                                                 <div class="example">
  192.                                                     <div class="btn-list">
  193.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-default">Default</a>
  194.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-primary">Primary</a>
  195.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-secondary">Secondary</a>
  196.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-success">Success</a>
  197.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-info">Info</a>
  198.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-warning">Warning</a>
  199.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-danger">Danger</a>
  200.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-dark">Dark</a>
  201.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-light">Light</a>
  202.                                                     </div>
  203.                                                 </div>
  204.                                             </div>
  205.                                         </div>
  206.                                     </div>
  207.                                 </div><!-- COL END -->
  208.                                 <div class="col-md-12 col-lg-12">
  209.                                     <div class="card">
  210.                                         <div class="card-header border-bottom">
  211.                                             <h3 class="card-title">Radius light buttons</h3>
  212.                                         </div>
  213.                                         <div class="card-body">
  214.                                             <div class="text-wrap">
  215.                                                 <p>Add <code class="highlighter-rouge">.btn-radius</code> to button to remove border-radius.</p>
  216.                                                 <div class="example">
  217.                                                     <div class="btn-list">
  218.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-default-light">Default</a>
  219.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-primary-light ">Primary</a>
  220.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-secondary-light ">Secondary</a>
  221.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-success-light ">Success</a>
  222.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-info-light ">Info</a>
  223.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-warning-light ">Warning</a>
  224.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-danger-light ">Danger</a>
  225.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-dark-light ">Dark</a>
  226.                                                         <a href="javascript:void(0)" class="btn btn-radius btn-light-light ">Light</a>
  227.                                                     </div>
  228.                                                 </div>
  229.                                             </div>
  230.                                         </div>
  231.                                     </div>
  232.                                 </div><!-- COL END -->
  233.                                 <div class="col-md-12">
  234.                                     <div class="card">
  235.                                         <div class="card-header border-bottom">
  236.                                             <h3 class="card-title">Rounded buttons</h3>
  237.                                         </div>
  238.                                         <div class="card-body">
  239.                                             <div class="text-wrap">
  240.                                                 <p>Add <code class="highlighter-rouge">.btn-pill</code> class to any button  more rounded.</p>
  241.                                                 <div class="example">
  242.                                                     <div class="btn-list">
  243.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-default">Default</a>
  244.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-primary">Primary</a>
  245.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-secondary">Secondary</a>
  246.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-success">Success</a>
  247.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-info">Info</a>
  248.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-warning">Warning</a>
  249.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-danger">Danger</a>
  250.                                                     </div>
  251.                                                 </div>
  252.                                             </div>
  253.                                         </div>
  254.                                     </div>
  255.                                 </div><!-- COL END -->
  256.                                 <div class="col-md-12">
  257.                                     <div class="card">
  258.                                         <div class="card-header border-bottom">
  259.                                             <h3 class="card-title">Rounded buttons</h3>
  260.                                         </div>
  261.                                         <div class="card-body">
  262.                                             <div class="text-wrap">
  263.                                                 <p>Add <code class="highlighter-rouge">.btn-pill</code> class to any button  more rounded.</p>
  264.                                                 <div class="example">
  265.                                                     <div class="btn-list">
  266.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-default-light">Default</a>
  267.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-primary-light">Primary</a>
  268.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-secondary-light">Secondary</a>
  269.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-success-light">Success</a>
  270.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-info-light">Info</a>
  271.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-warning-light">Warning</a>
  272.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-danger-light">Danger</a>
  273.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-dark-light">Dark</a>
  274.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-light-light">Light</a>
  275.                                                     </div>
  276.                                                 </div>
  277.                                             </div>
  278.                                         </div>
  279.                                     </div>
  280.                                 </div><!-- COL END -->
  281.                                 <div class="col-md-12">
  282.                                     <div class="card">
  283.                                         <div class="card-header border-bottom">
  284.                                             <h3 class="card-title">Rounded Outline Buttons</h3>
  285.                                         </div>
  286.                                         <div class="card-body">
  287.                                             <div class="text-wrap">
  288.                                                 <p>Add <code class="highlighter-rouge">.btn-pill*</code> class to outline buttons for rounded outline buttons.</p>
  289.                                                 <div class="example">
  290.                                                     <div class="btn-list">
  291.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-default">Default</a>
  292.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-primary">Primary</a>
  293.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-secondary">Secondary</a>
  294.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-success">Success</a>
  295.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-info">Info</a>
  296.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-warning">Warning</a>
  297.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-danger">Danger</a>
  298.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-dark">Dark</a>
  299.                                                         <a href="javascript:void(0)" class="btn btn-pill btn-outline-light">light</a>
  300.                                                     </div>
  301.                                                 </div>
  302.                                             </div>
  303.                                         </div>
  304.                                     </div>
  305.                                 </div><!-- COL END -->
  306.                             </div>
  307.                             <!-- ROW-3 CLOSED -->
  309.                             <!-- ROW-4 OPEN -->
  310.                             <div class="row">
  311.                                 <div class="col-md-12">
  312.                                     <div class="card">
  313.                                         <div class="card-header border-bottom">
  314.                                             <h3 class="card-title">Button with icon</h3>
  315.                                         </div>
  316.                                         <div class="card-body">
  317.                                             <div class="text-wrap">
  318.                                                 <p>Basic buttons are traditional buttons with borders color opitons.</p>
  319.                                                 <div class="example">
  320.                                                     <div class="btn-list">
  322.                                                         <button type="button" class="btn btn-primary"><i class="fe fe-heart me-2"></i>I like</button>
  323.                                                         <button type="button" class="btn btn-secondary"><i class="fe fe-check me-2"></i>I agree</button>
  324.                                                         <button type="button" class="btn btn-success"><i class="fe fe-plus me-2"></i>More</button>
  325.                                                         <button type="button" class="btn btn-info"><i class="fe fe-link me-2"></i>Link</button>
  326.                                                         <button type="button" class="btn btn-warning"><i class="fe fe-message-circle me-2"></i>Comment</button>
  327.                                                         <button type="button" class="btn btn-danger"><i class="fe fe-trash me-2"></i>Delete</button>
  328.                                                         <button type="button" class="btn btn-dark"><i class="fe fe-upload me-2"></i>Upload</button>
  329.                                                         <button type="button" class="btn btn-light"><i class="fe fe-download me-2"></i>Download</button>
  330.                                                     </div>
  331.                                                 </div>
  332.                                             </div>
  333.                                         </div>
  334.                                     </div>
  335.                                 </div><!-- COL END -->
  336.                                 <div class="col-md-12">
  337.                                     <div class="card">
  338.                                         <div class="card-header border-bottom">
  339.                                             <h3 class="card-title">Button with loading animation</h3>
  340.                                         </div>
  341.                                         <div class="card-body">
  342.                                             <div class="text-wrap">
  343.                                                 <p>Basic buttons are traditional buttons with borders color opitons.</p>
  344.                                                 <div class="example">
  345.                                                     <div class="btn-list btn-animation">
  346.                                                         <button type="button" class="btn btn-primary btn-spinners  ms-2"><span class="loading">loading</span></button>
  347.                                                         <button type="button" class="btn btn-secondary btn-spinners  ms-2"><span class="loading">loading</span></button>
  348.                                                         <button type="button" class="btn btn-success btn-spinners  ms-2"><span class="loading">loading</span></button>
  349.                                                         <button type="button" class="btn btn-info btn-loaders  ms-2"><span class="loading">loading</span></button>
  350.                                                         <button type="button" class="btn btn-warning btn-loaders  ms-2"><span class="loading">loading</span></button>
  351.                                                         <button type="button" class="btn btn-danger btn-loaders  ms-2"><span class="loading">loading</span></button>
  352.                                                     </div>
  353.                                                 </div>
  354.                                             </div>
  355.                                         </div>
  356.                                     </div>
  357.                                 </div><!-- COL END -->
  358.                             </div>
  359.                             <!-- ROW-4 CLOSED -->
  361.                             <!-- ROW-5 OPEN -->
  362.                             <div  class="row">
  363.                                 <div class="col-xl-12">
  364.                                     <div class="row row-deck">
  365.                                         <div class="col-md-12 col-xl-6">
  366.                                             <div class="card">
  367.                                                 <div class="card-header border-bottom">
  368.                                                     <h3 class="card-title">Button size</h3>
  369.                                                 </div>
  370.                                                 <div class="card-body">
  371.                                                     <div class="text-wrap">
  372.                                                         <p>Add <code class="highlighter-rouge">.btn-lg</code> or <code class="highlighter-rouge">.btn-sm</code> or <code class="highlighter-rouge">.d-lg</code> for additional sizes.</p>
  373.                                                         <div class="example">
  374.                                                             <div class="btn-list">
  375.                                                                 <button type="button" class="btn btn-warning btn-sm">Small button</button>
  376.                                                                 <button type="button" class="btn btn-info mx-2">Medium button</button>
  377.                                                                 <button type="button" class="btn btn-success btn-lg">Large button</button>
  378.                                                             </div>
  379.                                                         </div>
  380.                                                     </div>
  381.                                                 </div>
  382.                                             </div>
  383.                                         </div><!-- COL END -->
  384.                                         <div class="col-md-12 col-xl-6">
  385.                                             <div class="card">
  386.                                                 <div class="card-header border-bottom">
  387.                                                     <h3 class="card-title">Button Width</h3>
  388.                                                 </div>
  389.                                                 <div class="card-body">
  390.                                                     <div class="text-wrap">
  391.                                                         <p>Use <code class="highlighter-rouge">.btn-w-xs</code>, <code class="highlighter-rouge">.btn-w-sm</code>, <code class="highlighter-rouge">.d-w-md</code>, <code class="highlighter-rouge">.d-w-lg</code> to get buttons from small to large widths.</p>
  392.                                                         <div class="example">
  393.                                                             <div class="btn-list">
  394.                                                                 <button type="button" class="btn btn-primary btn-w-xs">XS</button>
  395.                                                                 <button type="button" class="btn btn-secondary btn-w-sm mx-sm-2">SM</button>
  396.                                                                 <button type="button" class="btn btn-success btn-w-md">MD</button>
  397.                                                                 <button type="button" class="btn btn-warning btn-w-lg ms-sm-2">LG</button>
  398.                                                             </div>
  399.                                                         </div>
  400.                                                     </div>
  401.                                                 </div>
  402.                                             </div>
  403.                                         </div><!--COL END-->
  404.                                     </div>
  405.                                 </div>
  406.                                 <div class="col-md-12 ">
  407.                                     <div class="card">
  408.                                         <div class="card-header border-bottom">
  409.                                             <h3 class="card-title">Button Block</h3>
  410.                                         </div>
  411.                                         <div class="card-body">
  412.                                             <div class="text-wrap">
  413.                                                 <p>Use <code class="highlighter-rouge">.btn-block</code> for block size button.</p>
  414.                                                 <div class="example">
  415.                                                     <div class="btn-list">
  416.                                                         <div class="row">
  417.                                                             <div class="col-md-12 mb-2">
  418.                                                                 <button type="button" class="btn btn-primary btn-sm btn-block mb-1">Block Level button</button>
  419.                                                             </div>
  420.                                                             <div class="col-md-12 mb-2">
  421.                                                                 <button type="button" class="btn btn-secondary btn-md btn-block mb-1">Block Level button</button>
  422.                                                             </div>
  423.                                                             <div class="col-md-12 mb-2">
  424.                                                                 <button type="button" class="btn btn-success btn-lg btn-block mb-1">Block Level button</button>
  425.                                                             </div>
  426.                                                         </div>
  427.                                                     </div>
  428.                                                 </div>
  429.                                             </div>
  430.                                         </div>
  431.                                     </div>
  432.                                 </div><!-- COL END -->
  433.                                 <div class="col-md-12">
  434.                                     <div class="row row-deck">
  435.                                         <div class="col-md-12 col-xl-6">
  436.                                             <div class="card">
  437.                                                 <div class="card-header border-bottom">
  438.                                                     <h3 class="card-title">Checkbox Button Group</h3>
  439.                                                 </div>
  440.                                                 <div class="card-body">
  441.                                                     <div class="row">
  442.                                                         <div class="example">
  443.                                                             <div class="btn-group checkbox-group checkboxbtns" role="group" aria-label="Basic ">
  444.                                                                 <input type="checkbox" class="btn-check" id="btncheck1">
  445.                                                                 <label class="btn btn-outline-primary mb-0" for="btncheck1">Checkbox 1</label>
  447.                                                                 <input type="checkbox" class="btn-check" id="btncheck2">
  448.                                                                 <label class="btn btn-outline-primary mb-0" for="btncheck2">Checkbox 2</label>
  450.                                                                 <input type="checkbox" class="btn-check" id="btncheck3">
  451.                                                                 <label class="btn btn-outline-primary mb-0" for="btncheck3">Checkbox 3</label>
  452.                                                             </div>
  453.                                                         </div>
  454.                                                     </div>
  455.                                                 </div>
  456.                                             </div>
  457.                                         </div>
  458.                                         <div class="col-md-12 col-xl-6">
  459.                                             <div class="card">
  460.                                                 <div class="card-header border-bottom">
  461.                                                     <h3 class="card-title">Radio Button Group</h3>
  462.                                                 </div>
  463.                                                 <div class="card-body">
  464.                                                     <div class="row">
  465.                                                         <div class="example">
  466.                                                             <div class="btn-group radiobtns" role="group" aria-label="Basic radio toggle button group">
  467.                                                                 <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
  468.                                                                 <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
  470.                                                                 <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
  471.                                                                 <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
  473.                                                                 <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
  474.                                                                 <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
  475.                                                             </div>
  476.                                                         </div>
  477.                                                     </div>
  478.                                                 </div>
  479.                                             </div>
  480.                                         </div>
  481.                                         <div class="col-md-12 col-lg-12 col-xl-12">
  482.                                             <div class="card">
  483.                                                 <div class="card-header">
  484.                                                     <h3 class="card-title">Buttons Group</h3>
  485.                                                 </div>
  486.                                                 <div class="card-body">
  487.                                                     <div class="example">
  488.                                                         <div class="row row-sm">
  489.                                                             <div class="col-lg-4">
  490.                                                                 <div aria-label="Basic example" class="btn-group my-1" role="group">
  491.                                                                     <button class="btn btn-secondary pd-x-25 active" type="button">Left</button>
  492.                                                                     <button class="btn btn-secondary pd-x-25" type="button">Center</button>
  493.                                                                     <button class="btn btn-secondary pd-x-25" type="button">Right</button>
  494.                                                                 </div>
  495.                                                             </div><!-- col-4 -->
  496.                                                             <div class="col-lg-4">
  497.                                                                 <div aria-label="Basic example" class="btn-group my-1" role="group">
  498.                                                                     <button class="btn btn-primary btn-icon active" type="button">
  499.                                                                         <i class="typcn typcn-media-play-outline"></i>
  500.                                                                     </button>
  501.                                                                     <button class="btn btn-primary btn-icon" type="button">
  502.                                                                         <i class="typcn typcn-media-pause-outline"></i>
  503.                                                                     </button>
  504.                                                                     <button class="btn btn-primary btn-icon" type="button">
  505.                                                                         <i class="typcn typcn-media-stop-outline"></i>
  506.                                                                     </button>
  507.                                                                 </div>
  508.                                                             </div><!-- col-4 -->
  509.                                                             <div class="col-lg-4">
  510.                                                                 <div aria-label="Basic example" class="btn-group my-1" role="group">
  511.                                                                     <button class="btn btn-secondary btn-icon active" type="button">
  512.                                                                         <i class="typcn typcn-media-play-outline"></i>
  513.                                                                     </button>
  514.                                                                     <button class="btn btn-secondary btn-icon" type="button">
  515.                                                                         <i class="typcn typcn-media-pause-outline"></i>
  516.                                                                     </button>
  517.                                                                     <button class="btn btn-secondary btn-icon" type="button">
  518.                                                                         <i class="typcn typcn-media-stop-outline"></i>
  519.                                                                     </button>
  520.                                                                 </div>
  521.                                                             </div><!-- col-4 -->
  522.                                                         </div>
  523.                                                     </div>
  524.                                                 </div>
  525.                                             </div>
  526.                                         </div>
  527.                                     </div>
  528.                                 </div><!-- COL END -->
  529.                             </div>
  530.                             <!-- ROW-5 CLOSED -->
  532.                             <!-- ROW-6 OPEN -->
  533.                             <div  class="row">
  534.                                 <div class="col-md-12">
  535.                                     <div class="card">
  536.                                         <div class="card-header border-bottom">
  537.                                             <h3 class="card-title">Social buttons</h3>
  538.                                         </div>
  539.                                         <div class="card-body">
  540.                                             <div class="text-wrap">
  541.                                                 <p>You can use only icons.</p>
  542.                                                 <div class="example">
  543.                                                     <div class="btn-list">
  544.                                                         <button type="button" class="btn btn-icon btn-facebook"><i class="fa fa-facebook"></i></button>
  545.                                                         <button type="button" class="btn btn-icon btn-twitter"><i class="fa fa-twitter"></i></button>
  546.                                                         <button type="button" class="btn btn-icon btn-google"><i class="fa fa-google"></i></button>
  547.                                                         <button type="button" class="btn btn-icon btn-youtube"><i class="fa fa-youtube"></i></button>
  548.                                                         <button type="button" class="btn btn-icon btn-vimeo"><i class="fa fa-vimeo"></i></button>
  549.                                                         <button type="button" class="btn btn-icon btn-dribbble"><i class="fa fa-dribbble"></i></button>
  550.                                                         <button type="button" class="btn btn-icon btn-github"><i class="fa fa-github"></i></button>
  551.                                                         <button type="button" class="btn btn-icon btn-instagram"><i class="fa fa-instagram"></i></button>
  552.                                                         <button type="button" class="btn btn-icon btn-pinterest"><i class="fa fa-pinterest"></i></button>
  553.                                                     </div>
  554.                                                 </div>
  555.                                             </div>
  556.                                         </div>
  557.                                     </div>
  558.                                 </div><!-- COL END -->
  559.                                 <div class="col-md-12">
  560.                                     <div class="card">
  561.                                         <div class="card-header border-bottom">
  562.                                             <h3 class="card-title">Icon buttons</h3>
  563.                                         </div>
  564.                                         <div class="card-body">
  565.                                             <div class="text-wrap">
  566.                                                 <p>Icon only button. Add <code class="highlighter-rouge">.btn-icon</code> class to remove unnecessary  button.</p>
  567.                                                 <div class="example">
  568.                                                     <div class="btn-list">
  569.                                                         <button type="button" class="btn btn-icon  btn-primary"><i class="fe fe-activity"></i></button>
  570.                                                         <button type="button" class="btn btn-icon  btn-github"><i class="fe fe-github"></i></button>
  571.                                                         <button type="button" class="btn btn-icon  btn-success"><i class="fe fe-bell"></i></button>
  572.                                                         <button type="button" class="btn btn-icon  btn-warning"><i class="fe fe-star"></i></button>
  573.                                                         <button type="button" class="btn btn-icon  btn-danger"><i class="fe fe-trash"></i></button>
  574.                                                         <button type="button" class="btn btn-icon  btn-purple"><i class="fe fe-mail"></i></button>
  575.                                                         <button type="button" class="btn btn-icon  btn-secondary"><i class="fe fe-git-merge"></i></button>
  576.                                                     </div>
  577.                                                 </div>
  578.                                             </div>
  579.                                         </div>
  580.                                     </div>
  581.                                 </div><!-- COL END -->
  582.                             </div>
  583.                             <!-- ROW-6 CLOSED -->
  585.                             <!-- ROW-7 OPEN -->
  586.                             <div class="row ">
  587.                                 <div class="col-md-12">
  588.                                     <div class="card">
  589.                                         <div class="card-header border-bottom">
  590.                                             <h3 class="card-title">Loading button</h3>
  591.                                         </div>
  592.                                         <div class="card-body">
  593.                                             <div class="row">
  594.                                                 <div class="col-md-12 col-xl-6">
  595.                                                     <div class="text-wrap">
  596.                                                         <p>Add <code class="highlighter-rouge">.btn-loading</code> to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.</p>
  597.                                                         <div class="example">
  598.                                                             <div class="btn-list">
  599.                                                                 <button type="button" class="btn btn-primary btn-loading btn-icon"><i class="fe fe-check"></i></button>
  600.                                                                 <button type="button" class="btn btn-secondary btn-loading btn-sm">Button text</button><br>
  601.                                                                 <button type="button" class="btn btn-success btn-loading btn-lg">Button text</button>
  602.                                                                 <button type="button" class="btn btn-warning btn-loading d-grid">Button text</button>
  603.                                                             </div>
  604.                                                         </div>
  605.                                                     </div>
  606.                                                 </div>
  607.                                                 <div class="col-md-12 col-xl-6">
  608.                                                     <div class="text-wrap">
  609.                                                         <p>Add <code class="highlighter-rouge">.btn-spinning</code> to use a loading state on a button. The width of the button depends on the length of the text inside Since the loading spinner is implemented using the element.</p>
  610.                                                         <div class="example">
  611.                                                             <div class="btn-list">
  612.                                                                 <button type="button" class="btn btn-info btn-spinning btn-icon"><i class="fe fe-check"></i></button>
  613.                                                                 <button type="button" class="btn btn-dark btn-spinning btn-sm">Button text</button><br>
  614.                                                                 <button type="button" class="btn btn-secondary btn-spinning btn-lg">Button text</button>
  615.                                                                 <button type="button" class="btn btn-primary btn-spinning d-grid">Button text</button>
  616.                                                             </div>
  617.                                                         </div>
  618.                                                     </div>
  619.                                                 </div>
  620.                                             </div>
  621.                                         </div>
  622.                                     </div>
  623.                                 </div><!-- COL END -->
  624.                                 <div class="col-md-12">
  625.                                     <div class="card">
  626.                                         <div class="card-header border-bottom">
  627.                                             <h3 class="card-title">Button dropdown</h3>
  628.                                         </div>
  629.                                         <div class="card-body">
  630.                                             <div class="text-wrap">
  631.                                                 <p>Wrap the dropdown’s toggle using different colors and icons implemented in different dropdowns  styles (your button or link) and the dropdown menu within <code class="highlighter-rouge">.dropdown</code>, or another element that declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns can be triggered from <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;button&gt;</code> elements to better fit your potential needs.</p>
  632.                                                 <div class="example">
  633.                                                     <div class="btn-list">
  634.                                                         <div class="dropdown btn-group">
  635.                                                             <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
  636.                                                                 <i class="fe fe-calendar"></i>
  637.                                                             </button>
  638.                                                             <div class="dropdown-menu">
  639.                                                                 <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
  640.                                                                 <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
  641.                                                             </div>
  642.                                                         </div>
  643.                                                         <div class="dropdown btn-group">
  644.                                                             <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">
  645.                                                                 <i class="fe fe-calendar me-2"></i>Show calendar
  646.                                                             </button>
  647.                                                             <div class="dropdown-menu">
  648.                                                                 <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
  649.                                                                 <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
  650.                                                             </div>
  651.                                                         </div>
  652.                                                         <div class="dropdown btn-group">
  653.                                                             <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">
  654.                                                                 Show calendar
  655.                                                             </button>
  656.                                                             <div class="dropdown-menu">
  657.                                                                 <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
  658.                                                                 <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
  659.                                                             </div>
  660.                                                         </div>
  661.                                                     </div>
  662.                                                 </div>
  663.                                             </div>
  664.                                         </div>
  665.                                     </div>
  666.                                 </div><!-- COL END -->
  667.                             </div>
  668.                             <!-- ROW-7 CLOSED -->
  670.                             <!-- ROW-8 OPEN -->
  671.                             <div class="row">
  672.                                 <div class="col-md-12 col-lg-12">
  673.                                     <div class="card">
  674.                                         <div class="card-header border-bottom">
  675.                                             <h3 class="card-title">List of buttons</h3>
  676.                                         </div>
  677.                                         <div class="card-body">
  678.                                             <div class="text-wrap">
  679.                                                 <p>You can now create a list of buttons with the <code class="highlighter-rouge">.btn-list</code> container.</p>
  680.                                                 <div class="example">
  681.                                                     <div class="btn-list">
  682.                                                         <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
  683.                                                         <a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
  684.                                                         <a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
  685.                                                     </div>
  686.                                                 </div>
  687.                                             </div>
  688.                                             <div class="text-wrap mt-6">
  689.                                                 <p>Use the <code class="highlighter-rouge">.text-center</code>  modifiers to alter the alignment.</p>
  690.                                                 <div class="example">
  691.                                                     <div class="btn-list text-center">
  692.                                                         <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
  693.                                                         <a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
  694.                                                         <a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
  695.                                                     </div>
  696.                                                 </div>
  697.                                             </div>
  698.                                             <div class="text-wrap mt-6">
  699.                                                 <p>Use the  <code class="highlighter-rouge">.text-end</code> modifiers to alter the alignment.</p>
  700.                                                 <div class="example">
  701.                                                     <div class="btn-list text-end">
  702.                                                         <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
  703.                                                         <a href="javascript:void(0)" class="btn btn-secondary">Save and continue</a>
  704.                                                         <a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
  705.                                                     </div>
  706.                                                 </div>
  707.                                             </div>
  708.                                         </div>
  709.                                     </div>
  710.                                 </div><!-- COL END -->
  711.                             </div>
  712.                             <!-- ROW-8 CLOSED -->
  714. {% endblock %}