- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Dropdown
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits
                    li.breadcrumb-item.active Dropdown
          // Container-fluid starts
          .container-fluid
            .row
              .col-xl-6
                .card.height-equal
                  .card-header
                    h4 Basic dropdown
                    p.f-m-light.mt-1 
                      | When the
                      code .show 
                      | class starts, dropdown appears. And 
                      code .btn-*
                      |  to change button dark background colors.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown
                    .common-flex  
                      .btn-group
                          button.btn.btn-primary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                              | Dashboard
                          ul.dropdown-menu.dropdown-block
                              li
                                  a.dropdown-item(href='#') Project
                              li
                                  a.dropdown-item(href='#') Ecommerce
                              li
                                  a.dropdown-item(href='#') Crypto
                      .btn-group
                          button.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                              |  Ecommerce
                          ul.dropdown-menu.dropdown-block
                              li
                                  a.dropdown-item(href='#') Product
                              li
                                  a.dropdown-item(href='#') Product details
                              li
                                  a.dropdown-item(href='#') Cart
                      .btn-group
                        button.btn.btn-warning.text-black.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Ui kits
                        ul.dropdown-menu.dropdown-block
                            li
                                a.dropdown-item(href='#') Typography
                            li
                                a.dropdown-item(href='#') Avatars
                            li
                                a.dropdown-item(href='#') Grid
                      .btn-group
                        button.btn.btn-danger.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Error page
                        ul.dropdown-menu.dropdown-block
                            li
                                a.dropdown-item(href='#') Error 400
                            li
                                a.dropdown-item(href='#') Error 403
                            li
                                a.dropdown-item(href='#') Error 500
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#basic-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#basic-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;
                            | &lt;div class="btn-group"&gt;
                            |   &lt;button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Dashboard&lt;/button&gt;
                            |   &lt;ul class="dropdown-menu dropdown-block"&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Project&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Ecommerce&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Crypto&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            |   &lt;button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt; Ecommerce&lt;/button&gt;
                            |   &lt;ul class="dropdown-menu dropdown-block"&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Product&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Product details&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Cart&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            |   &lt;button class="btn btn-warning text-black dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Ui kits&lt;/button&gt;
                            |   &lt;ul class="dropdown-menu dropdown-block"&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Typography&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Avatars&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Grid&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            |   &lt;button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Error page&lt;/button&gt;
                            |   &lt;ul class="dropdown-menu dropdown-block"&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Error 400&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Error 403&lt;/a&gt;&lt;/li&gt;
                            |     &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Error 500&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
              .col-xl-6
                .card.height-equal
                  .card-header
                    h4 Rounded dropdown
                    p.f-m-light.mt-1
                      | When the
                      code .show 
                      | class starts, dropdown appears. And 
                      code .rounded-pill
                      |  to change rounded dropdowns.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown
                    .common-flex
                      .btn-group
                        button.btn.btn-primary.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Primary
                        ul.dropdown-menu.dropdown-block
                            li
                                a.dropdown-item(href='#') Dark
                            li
                                a.dropdown-item(href='#') Light
                            li
                                a.dropdown-item(href='#') Lighter
                      .btn-group
                        button.btn.btn-success.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Success 
                        ul.dropdown-menu.dropdown-block
                            li
                                a.dropdown-item(href='#') Dark
                            li
                                a.dropdown-item(href='#') Light 
                            li
                                a.dropdown-item(href='#') Lighter 
                      .btn-group
                        button.btn.btn-info.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Info 
                        ul.dropdown-menu.dropdown-block
                            li
                                a.dropdown-item(href='#') Dark 
                            li
                                a.dropdown-item(href='#') Light 
                            li
                                a.dropdown-item(href='#') Lighter 
                      .btn-group
                        button.btn.btn-warning.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Warning
                        ul.dropdown-menu.dropdown-block
                            li
                                a.dropdown-item(href='#') Dark 
                            li
                                a.dropdown-item(href='#') Light 
                            li
                                a.dropdown-item(href='#') Lighter 
                      .btn-group
                        button.btn.btn-danger.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                            | Danger 
                        ul.dropdown-menu.dropdown-block
                            li
                                a.dropdown-item(href='#') Dark 
                            li
                                a.dropdown-item(href='#') Light 
                            li
                                a.dropdown-item(href='#') Lighter  
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#rounded-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#rounded-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;       
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Primary&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Primary-dark&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Primary-light&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Primary-lighter&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Success &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Success dark&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Success light &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Success lighter &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-info rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Info &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Info dark &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Info light &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Info lighter &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-warning rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Warning&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Warning dark &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Warning light &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Warning lighter &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-danger rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Danger &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Danger dark &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Danger light &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Danger lighter &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
              .col-sm-12.col-xl-12
                .card
                  .card-header
                    h4  Split dropdown
                    p.f-m-light.mt-1
                      | When the
                      code .show 
                      | class starts, dropdown appears. And 
                      | split the dropdown 
                      code .dropdown-toggle-split
                      | .
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.dropdown-basic.m-0
                    .common-flex
                      .btn-group
                        button.btn.btn-outline-primary(type='button') Widgets
                        .dropdown.separated-btn
                          button.btn.btn-primary(type='button')
                            i.icofont.icofont-arrow-down
                          .dropdown-content
                            a(href='#') General
                            a(href='#') Chart
                      .btn-group
                        button.btn.btn-outline-secondary(type='button') Animations
                        .dropdown.separated-btn
                          button.btn.btn-secondary(type='button')
                            i.icofont.icofont-arrow-down
                          .dropdown-content
                            a(href='#') Animate 
                            a(href='#') AOS animations
                      .btn-group
                        button.btn.btn-outline-success(type='button') Charts
                        .dropdown.separated-btn
                          button.btn.btn-success(type='button')
                            i.icofont.icofont-arrow-down
                          .dropdown-content
                            a(href='#') Echarts
                            a(href='#') Apex chart
                      .btn-group
                        button.btn.btn-outline-info(type='button') Email
                        .dropdown.separated-btn
                          button.btn.btn-info(type='button')
                            i.icofont.icofont-arrow-down
                          .dropdown-content
                            a(href='#') Email app 
                            a(href='#') Email compose
                      .btn-group
                        button.btn.btn-outline-warning(type='button') Icons
                        .dropdown.separated-btn
                          button.btn.btn-warning(type='button')
                            i.icofont.icofont-arrow-down
                          .dropdown-content
                            a(href='#') Flag icons 
                            a(href='#') Fontawesome icons  
                            a(href='#') Ico icons
                            a(href="#") Feather icons 
                      .btn-group
                        button.btn.btn-outline-danger(type='button') Learning
                        .dropdown.separated-btn
                          button.btn.btn-danger(type='button')
                            i.icofont.icofont-arrow-down
                          .dropdown-content
                            a(href='#') Learning List
                            a(href='#') Detailed Course
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#split-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#split-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-outline-primary" type="button"&gt;Widgets&lt;/button&gt;
                            | &lt;div class="dropdown separated-btn"&gt;
                            | &lt;button class="btn btn-primary" type="button"&gt;&lt;i class="icofont icofont-arrow-down"&gt;&lt;/i&gt;&lt;/button&gt;
                            | &lt;div class="dropdown-content"&gt;&lt;a href="#"&gt;General&lt;/a&gt;&lt;a href="#"&gt;Chart&lt;/a&gt;&lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-outline-secondary" type="button"&gt;Animations&lt;/button&gt;
                            | &lt;div class="dropdown separated-btn"&gt;
                            | &lt;button class="btn btn-secondary" type="button"&gt;&lt;i class="icofont icofont-arrow-down"&gt;&lt;/i&gt;&lt;/button&gt;
                            | &lt;div class="dropdown-content"&gt;&lt;a href="#"&gt;Animate &lt;/a&gt;&lt;a href="#"&gt;Scroll reveal &lt;/a&gt;&lt;a href="#"&gt;AOS animations&lt;/a&gt;&lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-outline-success" type="button"&gt;Charts&lt;/button&gt;
                            | &lt;div class="dropdown separated-btn"&gt;
                            | &lt;button class="btn btn-success" type="button"&gt;&lt;i class="icofont icofont-arrow-down"&gt;&lt;/i&gt;&lt;/button&gt;
                            | &lt;div class="dropdown-content"&gt;&lt;a href="#"&gt;Echarts&lt;/a&gt;&lt;a href="#"&gt;Apex chart&lt;/a&gt;&lt;a href="#"&gt;Google chart&lt;/a&gt;&lt;a href="#"&gt;Sparkline chart&lt;/a&gt;&lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-outline-info" type="button"&gt;Email&lt;/button&gt;
                            | &lt;div class="dropdown separated-btn"&gt;
                            | &lt;button class="btn btn-info" type="button"&gt;&lt;i class="icofont icofont-arrow-down"&gt;&lt;/i&gt;&lt;/button&gt;
                            | &lt;div class="dropdown-content"&gt;&lt;a href="#"&gt;Email app &lt;/a&gt;&lt;a href="#"&gt;Email compose&lt;/a&gt;&lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-outline-warning" type="button"&gt;Icons&lt;/button&gt;
                            | &lt;div class="dropdown separated-btn"&gt;
                            | &lt;button class="btn btn-warning" type="button"&gt;&lt;i class="icofont icofont-arrow-down"&gt;&lt;/i&gt;&lt;/button&gt;
                            | &lt;div class="dropdown-content"&gt;&lt;a href="#"&gt;Flag icons &lt;/a&gt;&lt;a href="#"&gt;Fontawesome icons &lt;/a&gt;&lt;a href="#"&gt;Ico icons&lt;/a&gt;&lt;a href="#"&gt;Feather icons &lt;/a&gt;&lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-outline-danger" type="button"&gt;Learning&lt;/button&gt;
                            | &lt;div class="dropdown separated-btn"&gt;
                            | &lt;button class="btn btn-danger" type="button"&gt;&lt;i class="icofont icofont-arrow-down"&gt;&lt;/i&gt;&lt;/button&gt;
                            | &lt;div class="dropdown-content"&gt;&lt;a href="#"&gt;Learning List&lt;/a&gt;&lt;a href="#"&gt;Detailed Course&lt;/a&gt;&lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
              .col-xl-4.col-sm-6
                .card.height-equal
                  .card-header
                    h4  Heading dropdown
                    p.f-m-light.mt-1
                      | Main heading and any sub-content in dropdown.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown.heading-dropdown
                    .common-flex
                      .btn-group
                        button.btn.btn-success.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Party
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item.fw-bold.fs-6(href='#') Party List 
                            ul
                              li  
                                a.dropdown-item(href='#') Balloons
                              li 
                                a.dropdown-item(href='#') Cake 
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#heading-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#heading-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Party&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li"&gt;&lt;a class="dropdown-item fw-bold fs-6"&gt;Party List &lt;/a&gt;&lt;/li&gt;
                            | &lt;ul&gt;
                            | &lt;li&gt; &lt;a class="dropdown-item"&gt;Balloons&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt; &lt;a class="dropdown-item"&gt;Cake &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
              .col-xl-4.col-sm-6
                .card.height-equal
                  .card-header
                    h4  With input type
                    p.f-m-light.mt-1
                      | Use the checkbox using dropdown
                      code (type='checkbox'/'radio')
                      | .
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body
                    .common-flex
                      btn-group
                        button.btn.btn-warning(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Inputs 
                        ul.dropdown-menu.dropdown-block.dropdown-wrapper.dark-input-type
                          li 
                            .input-group.rounded-0.border-0.shadow-none
                              .input-group-text
                                input.form-check-input.mt-0(type='checkbox' value='' aria-label='Checkbox for following text input')
                              span Default checkbox
                            .input-group.rounded-0.border-0.shadow-none
                              .input-group-text
                                input.form-check-input.mt-0(type='radio' value='' aria-label='Radio button for following text input')
                              span Default radio
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#input-type-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#input-type-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;btn-group&gt;
                            | &lt;button class="btn btn-warning" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Inputs &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block p-3"&gt;
                            | &lt;li&gt;
                            | &lt;div class="input-group mb-2 rounded-0 border-0 shadow-none"&gt;
                            | &lt;div class="input-group-text"&gt;
                            | &lt;input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input"&gt;
                            | &lt;/div&gt;&lt;span&gt;Default checkbox&lt;/span&gt;
                            | &lt;/div&gt;
                            | &lt;div class="input-group rounded-0 border-0 shadow-none"&gt;
                            | &lt;div class="input-group-text"&gt;
                            | &lt;input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input"&gt;
                            | &lt;/div&gt;&lt;span&gt;Default radio&lt;/span&gt;
                            | &lt;/div&gt;
                            | &lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/btn-group&gt;
              .col-xl-4.col-sm-6
                .card.height-equal
                  .card-header
                    h4  Dark dropdown
                    p.f-m-light.mt-1
                      code .dropdown-menu-dark 
                      | class through make dark mode.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.dropdown-basic.m-0.rtl-dropdown
                    .common-flex.dark-dropdown
                      button.btn.btn-dark.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                        | Dark Night
                      ul.dropdown-menu.dropdown-menu-dark.dropdown-block
                        li
                          a.dropdown-item.active(href='#') Dark moon
                        li
                          a.dropdown-item(href='#') Dark owl 
                        li
                          a.dropdown-item(href='#') Nightfall
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#dark-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#dark-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Dark Night&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-menu-dark dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item active" href="#"&gt;Dark moon&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dark owl &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Nightfall&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
              .col-sm-6
                .card
                  .card-header
                    h4 Unique dropdown
                    p.f-m-light.mt-1
                      | Unique way to represent form dropdown and text dropdown.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown
                    .common-flex
                      .btn-group
                        button.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false' data-bs-auto-close='outside')
                          | Dropdown form
                        form.dropdown-menu.p-4.form-wrapper.dark-form
                          .mb-3
                            label.form-label(for='exampleDropdownFormEmail2') Email address
                            input#exampleDropdownFormEmail2.form-control(type='email' placeholder='email@example.com')
                          .mb-3
                            label.form-label(for='exampleDropdownFormPassword2') Password
                            input#exampleDropdownFormPassword2.form-control(type='password' placeholder='Password')
                          .mb-3
                            .form-check
                              input#dropdownCheck2.form-check-input(type='checkbox')
                              label.form-check-label.f-14(for='dropdownCheck2')
                                | Remember me
                          button.btn.btn-dark(type='submit') Sign in
                      .btn-group
                        button.btn.btn-dark.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Text 
                        .dropdown-menu.p-4.form-wrapper
                          p
                            | Some example text that&apos;s free-flowing within the dropdown menu.
                          p.mb-0
                            | And this is more example text. 
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#unique-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#unique-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside"&gt;Dropdown form&lt;/button&gt;
                            | &lt;form class="dropdown-menu p-4 form-wrapper"&gt;
                            | &lt;div class="mb-3"&gt;
                            | &lt;label class="form-label" for="exampleDropdownFormEmail2"&gt;Email address&lt;/label&gt;
                            | &lt;input class="form-control" id="exampleDropdownFormEmail2" type="email" placeholder="email@example.com"&gt;
                            | &lt;/div&gt;
                            | &lt;div class="mb-3"&gt;
                            | &lt;label class="form-label" for="exampleDropdownFormPassword2"&gt;Password&lt;/label&gt;
                            | &lt;input class="form-control" id="exampleDropdownFormPassword2" type="password" placeholder="Password"&gt;
                            | &lt;/div&gt;
                            | &lt;div class="mb-3"&gt;
                            | &lt;div class="form-check"&gt;
                            | &lt;input class="form-check-input" id="dropdownCheck2" type="checkbox"&gt;
                            | &lt;label class="form-check-label f-14" for="dropdownCheck2"&gt;Remember me&lt;/label&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
                            | &lt;button class="btn btn-dark" type="submit"&gt;Sign in&lt;/button&gt;
                            | &lt;/form&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Text &lt;/button&gt;
                            | &lt;div class="dropdown-menu p-4 text-muted form-wrapper"&gt;
                            | &lt;p&gt;Some example text that&amp;apos;s free-flowing within the dropdown menu.&lt;/p&gt;
                            | &lt;p class="mb-0"&gt;And this is more example text. &lt;/p&gt;
                            | &lt;/div&gt;
                            | &lt;/div&gt;
              .col-lg-6
                .card
                  .card-header
                    h4  Justify contents
                    p.f-m-light.mt-1
                      | Use the 
                      code (text-start/text-center/text-end)
                      |  to change dropdown texts.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.dropdown-basic.m-0
                    .common-flex
                      .btn-group
                        button.btn.btn-primary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Text-left
                        ul.dropdown-menu.dropdown-block.text-start
                          li
                            a.dropdown-item(href='#') Hello..
                          li
                            a.dropdown-item(href='#') How are you?
                          li
                            a.dropdown-item(href='#') What are you doing?
                      .btn-group
                        button.btn.btn-info.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Text-center
                        ul.dropdown-menu.dropdown-block.text-center
                          li
                            a.dropdown-item(href='#') Chocolate
                          li
                            a.dropdown-item(href='#') Ice-cream
                          li
                            a.dropdown-item(href='#') Trophy
                      .btn-group
                        button.btn.btn-primary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Text-right 
                        ul.dropdown-menu.dropdown-block.text-end
                          li
                            a.dropdown-item(href='#') I'm fine.
                          li
                            a.dropdown-item(href='#') ohh wow!!
                          li
                            a.dropdown-item(href='#') That's the good news! 
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#justify-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#justify-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="common-flex"&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Text-left&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block text-start"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Hello..&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;How are you?&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;What are you doing?&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Text-center&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block text-center"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Chocolate&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Ice-cream&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Trophy&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Text-right &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block text-end"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;I'm fine.&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;ohh wow!!&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;That's the good news! &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
              .col-lg-6
                .card
                  .card-header
                    h4  Alignments
                    p.f-m-light.mt-1
                      | Use the 
                      code (dropstart/dropup/dropend)
                      |  this class through change dropdown directions.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown
                    .common-flex
                      .btn-group.dropup
                        button.btn.btn-warning.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Warning top
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item(href='#') Be careful 
                          li
                            a.dropdown-item(href='#') Notifications
                          li
                            a.dropdown-item(href='#') Beware 
                      .btn-group.dropend
                        button.btn.btn-success.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Success right
                        ul.dropdown-menu.dropdown-block.text-end
                          li
                            a.dropdown-item(href='#') Good luck 
                          li
                            a.dropdown-item(href='#') Good job 
                          li
                            a.dropdown-item(href='#') Done!
                      .btn-group
                        button.btn.btn-primary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Primary bottom
                        ul.dropdown-menu.dropdown-block.text-end
                          li
                            a.dropdown-item(href='#') It's important
                          li
                            a.dropdown-item(href='#') Happy life 
                          li
                            a.dropdown-item(href='#') Another work
                      .btn-group.dropstart
                        button.btn.btn-danger.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Danger left
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item(href='#') Threat 
                          li
                            a.dropdown-item(href='#') Dangerous
                          li
                            a.dropdown-item(href='#') Alert 
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#alignment-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#alignment-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="btn-group dropup"&gt;
                            | &lt;button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Warning top&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Be careful &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Notifications&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Beware &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group dropend"&gt;
                            | &lt;button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Success right&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block text-end"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Good luck &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Good job &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Done!&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Primary bottom&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block text-end"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;It's important&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Happy life &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another work&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group dropstart"&gt;
                            | &lt;button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Danger left&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Threat &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Dangerous&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Alert &lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
              .col-xl-6
                .card
                  .card-header
                    h4 Helper card
                    p.f-m-light.mt-1
                      | When the
                      code .show 
                      | class starts, dropdown appears.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown
                    .common-flex
                      .btn-group
                        button.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Helper Card
                        ul.dropdown-menu.dropdown-block.p-3.dark-form
                          li
                            h6.fs-6.pb-2 Learn More!
                            p.dropdown-item.helper-truncate There is a lot of information available here
                      .btn-group
                        button.btn.btn-warning.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Warning Card
                        ul.dropdown-menu.dropdown-block.p-3.dark-form
                          li
                            h6.fs-6.pb-2 Warning!
                            p.dropdown-item.helper-truncate Please! Check your notifications.
                      .btn-group
                        button.btn.btn-info.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Alert Card
                        ul.dropdown-menu.dropdown-block.p-3.dark-form
                          li
                            h6.fs-6.pb-2 Danger
                            p.dropdown-item.helper-truncate It's a danger path.
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#helper-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#helper-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Helper Card&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block p-3 dark-form"&gt;
                            | &lt;li&gt;
                            | &lt;h6 class="fs-6 fw-bold pb-2"&gt;Learn More!&lt;/h6&gt;
                            | &lt;p class="dropdown-item p-0 helper-truncate"&gt; There is a lot of information available here&lt;/p&gt;
                            | &lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Warning Card&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block p-3 dark-form"&gt;
                            | &lt;li&gt;
                            | &lt;h6 class="fs-6 fw-bold pb-2"&gt;Warning!&lt;/h6&gt;
                            | &lt;p class="dropdown-item p-0 helper-truncate"&gt; Please! Check your notifications.&lt;/p&gt;
                            | &lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Alert Card&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block p-3 dark-form"&gt;
                            | &lt;li&gt;
                            | &lt;h6 class="fs-6 fw-bold pb-2"&gt;Danger&lt;/h6&gt;
                            | &lt;p class="dropdown-item p-0 helper-truncate" href="#"&gt;It's a danger path.&lt;/p&gt;
                            | &lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
              .col-md-6
                .card
                  .card-header
                    h4 Divider dropdown
                    p.f-m-light.mt-1
                      | When the
                      code .show 
                      | class starts, dropdown appears. And 
                      code .dropdown-divider
                      |  to change dropdown section.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown
                    .common-flex
                      .btn-group
                        button.btn.btn-success.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Wishlist
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item(href='#') Shoes 
                          li
                            a.dropdown-item(href='#') Bag
                          li
                            a.dropdown-item(href='#') Clothes 
                          li
                            hr.dropdown-divider
                          li
                            a.dropdown-item(href='#') Separated link
                      .btn-group
                        button.btn.btn-primary.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Sports 
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item(href='#') Badminton
                          li
                            a.dropdown-item(href='#') Tenis 
                          li
                            a.dropdown-item(href='#') Kho-Kho
                          li
                            hr.dropdown-divider
                          li
                            a.dropdown-item(href='#') Separated link
                      .btn-group
                        button.btn.btn-secondary.rounded-pill.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Colors 
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item(href='#') Orange 
                          li
                            a.dropdown-item(href='#') Yellow 
                          li
                            a.dropdown-item(href='#') Red 
                          li
                            hr.dropdown-divider
                          li
                            a.dropdown-item(href='#') Separated link
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#divider-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#divider-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Wishlist&lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Shoes &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Bag&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Clothes &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;
                            | &lt;hr class="dropdown-divider"&gt;
                            | &lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Sports &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Badminton&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Tenis &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Kho-Kho&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;
                            | &lt;hr class="dropdown-divider"&gt;
                            | &lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-secondary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Colors &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Orange &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Yellow &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Red &lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;
                            | &lt;hr class="dropdown-divider"&gt;
                            | &lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
              .col-md-6
                .card
                  .card-header
                    h4  Dropdown sizing
                    p.f-m-light.mt-1
                      | When the
                      code .show 
                      | class starts, dropdown appears. And 
                      code [.btn-lg/.btn-sm]
                      | class through button size changed.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.rtl-dropdown
                    .common-flex
                      .btn-group
                        button.btn.btn-info.light.btn-lg.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Large button 
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item(href='#') Small button
                          li
                            a.dropdown-item(href='#') Medium button 
                          li
                            a.dropdown-item(href='#') Large button 
                          li
                              hr.dropdown-divider
                          li
                            a.dropdown-item(href='#') Very large button 
                      .btn-group
                        button.btn.btn-dark.light.btn-sm.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-expanded='false')
                          | Small button 
                        ul.dropdown-menu.dropdown-block
                          li
                            a.dropdown-item(href='#') Small button 
                          li
                            a.dropdown-item(href='#') Very small button 
                          li
                            a.dropdown-item(href='#') Extra small button 
                          li
                              hr.dropdown-divider
                          li
                            a.dropdown-item(href='#') Extra extra small 
                      .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#size-dropdown', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre
                          code.language-html#size-dropdown
                            | &lt;!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--&gt;  
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-info light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Large button &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;
                            | &lt;hr class="dropdown-divider"&gt;
                            | &lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
                            | &lt;div class="btn-group"&gt;
                            | &lt;button class="btn btn-dark light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Small button &lt;/button&gt;
                            | &lt;ul class="dropdown-menu dropdown-block"&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                            | &lt;li&gt;
                            | &lt;hr class="dropdown-divider"&gt;
                            | &lt;/li&gt;
                            | &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                            | &lt;/ul&gt;
                            | &lt;/div&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
