1086 lines
66 KiB
Plaintext
1086 lines
66 KiB
Plaintext
- 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
|