- 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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dashboard</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Project</a></li> | <li><a class="dropdown-item" href="#">Ecommerce</a></li> | <li><a class="dropdown-item" href="#">Crypto</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Ecommerce</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Product</a></li> | <li><a class="dropdown-item" href="#">Product details</a></li> | <li><a class="dropdown-item" href="#">Cart</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-warning text-black dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Ui kits</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Typography</a></li> | <li><a class="dropdown-item" href="#">Avatars</a></li> | <li><a class="dropdown-item" href="#">Grid</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Error page</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Error 400</a></li> | <li><a class="dropdown-item" href="#">Error 403</a></li> | <li><a class="dropdown-item" href="#">Error 500</a></li> | </ul> | </div> .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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Primary</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Primary-dark</a></li> | <li><a class="dropdown-item" href="#">Primary-light</a></li> | <li><a class="dropdown-item" href="#">Primary-lighter</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Success </button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Success dark</a></li> | <li><a class="dropdown-item" href="#">Success light </a></li> | <li><a class="dropdown-item" href="#">Success lighter </a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-info rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Info </button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Info dark </a></li> | <li><a class="dropdown-item" href="#">Info light </a></li> | <li><a class="dropdown-item" href="#">Info lighter </a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-warning rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Warning</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Warning dark </a></li> | <li><a class="dropdown-item" href="#">Warning light </a></li> | <li><a class="dropdown-item" href="#">Warning lighter </a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-danger rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Danger </button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Danger dark </a></li> | <li><a class="dropdown-item" href="#">Danger light </a></li> | <li><a class="dropdown-item" href="#">Danger lighter </a></li> | </ul> | </div> .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.me-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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-outline-primary" type="button">Widgets</button> | <div class="dropdown separated-btn"> | <button class="btn btn-primary" type="button"><i class="icofont icofont-arrow-down"></i></button> | <div class="dropdown-content"><a href="#">General</a><a href="#">Chart</a></div> | </div> | </div> | <div class="btn-group"> | <button class="btn btn-outline-secondary" type="button">Animations</button> | <div class="dropdown separated-btn"> | <button class="btn btn-secondary" type="button"><i class="icofont icofont-arrow-down"></i></button> | <div class="dropdown-content"><a href="#">Animate </a><a href="#">Scroll reveal </a><a href="#">AOS animations</a></div> | </div> | </div> | <div class="btn-group"> | <button class="btn btn-outline-success" type="button">Charts</button> | <div class="dropdown separated-btn"> | <button class="btn btn-success" type="button"><i class="icofont icofont-arrow-down"></i></button> | <div class="dropdown-content"><a href="#">Echarts</a><a href="#">Apex chart</a><a href="#">Google chart</a><a href="#">Sparkline chart</a></div> | </div> | </div> | <div class="btn-group"> | <button class="btn btn-outline-info" type="button">Email</button> | <div class="dropdown separated-btn"> | <button class="btn btn-info" type="button"><i class="icofont icofont-arrow-down"></i></button> | <div class="dropdown-content"><a href="#">Email app </a><a href="#">Email compose</a></div> | </div> | </div> | <div class="btn-group"> | <button class="btn btn-outline-warning" type="button">Icons</button> | <div class="dropdown separated-btn"> | <button class="btn btn-warning" type="button"><i class="icofont icofont-arrow-down"></i></button> | <div class="dropdown-content"><a href="#">Flag icons </a><a href="#">Fontawesome icons </a><a href="#">Ico icons</a><a href="#">Feather icons </a></div> | </div> | </div> | <div class="btn-group"> | <button class="btn btn-outline-danger" type="button">Learning</button> | <div class="dropdown separated-btn"> | <button class="btn btn-danger" type="button"><i class="icofont icofont-arrow-down"></i></button> | <div class="dropdown-content"><a href="#">Learning List</a><a href="#">Detailed Course</a></div> | </div> | </div> .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 .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.border-bottom.border-2 a.dropdown-item.fw-bold.fs-6.bg-light(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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Party</button> | <ul class="dropdown-menu dropdown-block"> | <li class="border-bottom border-2"><a class="dropdown-item fw-bold fs-6 bg-light" href="#">Party List </a></li> | <ul> | <li> <a class="dropdown-item" href="#">Balloons</a></li> | <li> <a class="dropdown-item" href="#">Cake </a></li> | </ul> | </ul> | </div> .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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <btn-group> | <button class="btn btn-warning" type="button" data-bs-toggle="dropdown" aria-expanded="false">Inputs </button> | <ul class="dropdown-menu dropdown-block p-3"> | <li> | <div class="input-group mb-2 rounded-0 border-0 shadow-none"> | <div class="input-group-text"> | <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input"> | </div><span>Default checkbox</span> | </div> | <div class="input-group rounded-0 border-0 shadow-none"> | <div class="input-group-text"> | <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input"> | </div><span>Default radio</span> | </div> | </li> | </ul> | </btn-group> .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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dark Night</button> | <ul class="dropdown-menu dropdown-menu-dark dropdown-block"> | <li><a class="dropdown-item active" href="#">Dark moon</a></li> | <li><a class="dropdown-item" href="#">Dark owl </a></li> | <li><a class="dropdown-item" href="#">Nightfall</a></li> | </ul> .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(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.text-muted.form-wrapper p | Some example text that'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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">Dropdown form</button> | <form class="dropdown-menu p-4 form-wrapper"> | <div class="mb-3"> | <label class="form-label" for="exampleDropdownFormEmail2">Email address</label> | <input class="form-control" id="exampleDropdownFormEmail2" type="email" placeholder="email@example.com"> | </div> | <div class="mb-3"> | <label class="form-label" for="exampleDropdownFormPassword2">Password</label> | <input class="form-control" id="exampleDropdownFormPassword2" type="password" placeholder="Password"> | </div> | <div class="mb-3"> | <div class="form-check"> | <input class="form-check-input" id="dropdownCheck2" type="checkbox"> | <label class="form-check-label" for="dropdownCheck2">Remember me</label> | </div> | </div> | <button class="btn btn-dark" type="submit">Sign in</button> | </form> | </div> | <div class="btn-group"> | <button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text </button> | <div class="dropdown-menu p-4 text-muted form-wrapper"> | <p>Some example text that&apos;s free-flowing within the dropdown menu.</p> | <p class="mb-0">And this is more example text. </p> | </div> | </div> .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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="common-flex"> | <div class="btn-group"> | <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text-left</button> | <ul class="dropdown-menu dropdown-block text-start"> | <li><a class="dropdown-item" href="#">Hello..</a></li> | <li><a class="dropdown-item" href="#">How are you?</a></li> | <li><a class="dropdown-item" href="#">What are you doing?</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text-center</button> | <ul class="dropdown-menu dropdown-block text-center"> | <li><a class="dropdown-item" href="#">Chocolate</a></li> | <li><a class="dropdown-item" href="#">Ice-cream</a></li> | <li><a class="dropdown-item" href="#">Trophy</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Text-right </button> | <ul class="dropdown-menu dropdown-block text-end"> | <li><a class="dropdown-item" href="#">I'm fine.</a></li> | <li><a class="dropdown-item" href="#">ohh wow!!</a></li> | <li><a class="dropdown-item" href="#">That's the good news! </a></li> | </ul> | </div> .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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group dropup"> | <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Warning top</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Be careful </a></li> | <li><a class="dropdown-item" href="#">Notifications</a></li> | <li><a class="dropdown-item" href="#">Beware </a></li> | </ul> | </div> | <div class="btn-group dropend"> | <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Success right</button> | <ul class="dropdown-menu dropdown-block text-end"> | <li><a class="dropdown-item" href="#">Good luck </a></li> | <li><a class="dropdown-item" href="#">Good job </a></li> | <li><a class="dropdown-item" href="#">Done!</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Primary bottom</button> | <ul class="dropdown-menu dropdown-block text-end"> | <li><a class="dropdown-item" href="#">It's important</a></li> | <li><a class="dropdown-item" href="#">Happy life </a></li> | <li><a class="dropdown-item" href="#">Another work</a></li> | </ul> | </div> | <div class="btn-group dropstart"> | <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Danger left</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Threat </a></li> | <li><a class="dropdown-item" href="#">Dangerous</a></li> | <li><a class="dropdown-item" href="#">Alert </a></li> | </ul> | </div> .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.fw-bold.pb-2 Learn More! p.dropdown-item.p-0.helper-truncate(href='#') 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.fw-bold.pb-2 Warning! p.dropdown-item.p-0.helper-truncate(href='#') 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.fw-bold.pb-2 Danger p.dropdown-item.p-0.helper-truncate(href='#') 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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Helper Card</button> | <ul class="dropdown-menu dropdown-block p-3"> | <li> | <h6 class="fs-6 fw-bold pb-2">Learn More!</h6> | <p class="dropdown-item p-0 helper-truncate" href="#"> There is a lot of information available here</p> | </li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Warning Card</button> | <ul class="dropdown-menu dropdown-block p-3"> | <li> | <h6 class="fs-6 fw-bold pb-2">Warning!</h6> | <p class="dropdown-item p-0 helper-truncate" href="#"> Please! Check your notifications.</p> | </li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Alert Card</button> | <ul class="dropdown-menu dropdown-block p-3"> | <li> | <h6 class="fs-6 fw-bold pb-2">Danger</h6> | <p class="dropdown-item p-0 helper-truncate" href="#">It's a danger path.</p> | </li> | </ul> | </div> .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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Wishlist</button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Shoes </a></li> | <li><a class="dropdown-item" href="#">Bag</a></li> | <li><a class="dropdown-item" href="#">Clothes </a></li> | <li> | <hr class="dropdown-divider"> | </li> | <li><a class="dropdown-item" href="#">Separated link</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Sports </button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Badminton</a></li> | <li><a class="dropdown-item" href="#">Tenis </a></li> | <li><a class="dropdown-item" href="#">Kho-Kho</a></li> | <li> | <hr class="dropdown-divider"> | </li> | <li><a class="dropdown-item" href="#">Separated link</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-secondary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Colors </button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Orange </a></li> | <li><a class="dropdown-item" href="#">Yellow </a></li> | <li><a class="dropdown-item" href="#">Red </a></li> | <li> | <hr class="dropdown-divider"> | </li> | <li><a class="dropdown-item" href="#">Separated link</a></li> | </ul> | </div> .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 | <!--You can use .dropdown-menu and inside added .dropdown-item.*(dropdown list)--> | <div class="btn-group"> | <button class="btn btn-info light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Large button </button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Action</a></li> | <li><a class="dropdown-item" href="#">Another action</a></li> | <li><a class="dropdown-item" href="#">Something else here</a></li> | <li> | <hr class="dropdown-divider"> | </li> | <li><a class="dropdown-item" href="#">Separated link</a></li> | </ul> | </div> | <div class="btn-group"> | <button class="btn btn-dark light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Small button </button> | <ul class="dropdown-menu dropdown-block"> | <li><a class="dropdown-item" href="#">Action</a></li> | <li><a class="dropdown-item" href="#">Another action</a></li> | <li><a class="dropdown-item" href="#">Something else here</a></li> | <li> | <hr class="dropdown-divider"> | </li> | <li><a class="dropdown-item" href="#">Separated link</a></li> | </ul> | </div> // Container-fluid Ends include ../../components/footer include ../../components/footer-files