640 lines
46 KiB
Plaintext
640 lines
46 KiB
Plaintext
- var prism = true;
|
|
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
- var clipboard = true;
|
|
- var customcard = true;
|
|
- var sidebar = true;
|
|
- var scrollbar = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| Edge Buttons
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Buttons
|
|
li.breadcrumb-item.active Edge Style
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Default buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| class for edge button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-primary(type='button') Primary Button
|
|
button.btn.btn-pill.btn-secondary(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-success(type='button') Success Button
|
|
button.btn.btn-pill.btn-info(type='button') Info Button
|
|
button.btn.btn-pill.btn-warning(type='button') Warning Button
|
|
button.btn.btn-pill.btn-danger(type='button') Danger Button
|
|
button.btn.btn-pill.btn-light(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-primary">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-secondary">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-success">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-info">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-warning">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-danger">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-light">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Large buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| and
|
|
code .btn-lg
|
|
| class for large button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-primary.btn-lg(type='button') Primary Button
|
|
button.btn.btn-pill.btn-secondary.btn-lg(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-success.btn-lg(type='button') Success Button
|
|
button.btn.btn-pill.btn-info.btn-lg(type='button') Info Button
|
|
button.btn.btn-pill.btn-warning.btn-lg(type='button') Warning Button
|
|
button.btn.btn-pill.btn-danger.btn-lg(type='button') Danger Button
|
|
button.btn.btn-pill.btn-light.btn-lg(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head1
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-primary btn-lg">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-secondary btn-lg">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-success btn-lg">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-info btn-lg">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-warning btn-lg">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-danger btn-lg">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-light btn-lg">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Small buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| and
|
|
code .btn-sm
|
|
| class for small button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-primary.btn-sm(type='button') Primary Button
|
|
button.btn.btn-pill.btn-secondary.btn-sm(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-success.btn-sm(type='button') Success Button
|
|
button.btn.btn-pill.btn-info.btn-sm(type='button') Info Button
|
|
button.btn.btn-pill.btn-warning.btn-sm(type='button') Warning Button
|
|
button.btn.btn-pill.btn-danger.btn-sm(type='button') Danger Button
|
|
button.btn.btn-pill.btn-light.btn-sm(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head2
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-primary btn-sm">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-secondary btn-sm">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-success btn-sm">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-info btn-sm">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-warning btn-sm">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-danger btn-sm">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-light btn-sm">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Active Buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .active
|
|
| for active state
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-primary.active(type='button') Active
|
|
button.btn.btn-pill.btn-secondary.active(type='button') Active
|
|
button.btn.btn-pill.btn-success.active(type='button') Active
|
|
button.btn.btn-pill.btn-info.active(type='button') Active
|
|
button.btn.btn-pill.btn-warning.active(type='button') Active
|
|
button.btn.btn-pill.btn-danger.active(type='button') Active
|
|
button.btn.btn-pill.btn-light.active.txt-dark(type='button') Active
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head3
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-primary active">Active</button>
|
|
| <button type="button" class="btn btn-pill btn-secondary active">Active</button>
|
|
| <button type="button" class="btn btn-pill btn-success active">Active</button>
|
|
| <button type="button" class="btn btn-pill btn-info active">Active</button>
|
|
| <button type="button" class="btn btn-pill btn-warning active">Active</button>
|
|
| <button type="button" class="btn btn-pill btn-danger active">Active</button>
|
|
| <button type="button" class="btn btn-pill btn-light active txt-dark">Active</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Disabled buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .disabled
|
|
| class or
|
|
code disabled="disabled"
|
|
| attribute for disabled button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-primary.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-secondary.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-success.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-info.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-warning.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-danger.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-light.disabled(type='button') Disabled
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head4
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-primary disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-secondary disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-success disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-info disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-warning disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-danger disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-light disabled">Disabled</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Custom state buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| The
|
|
code .btn
|
|
| class used with
|
|
code <button>
|
|
| ,
|
|
code <a>
|
|
| and
|
|
code <input>
|
|
| elements.
|
|
.card-body.btn-showcase
|
|
a.btn.btn-pill.btn-primary(href='javascript:void(0)', data-bs-toggle='tooltip', title='btn btn-primary', role='button') Link
|
|
input.btn.btn-pill.btn-secondary(type='button', value='Input', data-bs-toggle='tooltip', title='btn btn-secondary')
|
|
input.btn.btn-pill.btn-success(type='submit', value='Submit', data-bs-toggle='tooltip', title='btn btn-success')
|
|
button.btn.btn-pill.btn-info(type='submit') Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head5', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head5
|
|
| <!-- Cod Box Copy begin -->
|
|
| <a class="btn btn-pill btn-primary" href="#" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
|
|
| <input class="btn btn-pill btn-primary" type="button" value="Input" data-bs-toggle="tooltip;" title="btn btn-secondary">
|
|
| <input class="btn btn-pill btn-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success">
|
|
| <button class="btn btn-pill btn-info" type="submit">Button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 outline buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| and
|
|
code .btn-outline-*
|
|
| class for button with outline
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-outline-primary(type='button') Primary Button
|
|
button.btn.btn-pill.btn-outline-secondary(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-outline-success(type='button') Success Button
|
|
button.btn.btn-pill.btn-outline-info(type='button') Info Button
|
|
button.btn.btn-pill.btn-outline-warning(type='button') Warning Button
|
|
button.btn.btn-pill.btn-outline-danger(type='button') Danger Button
|
|
button.btn.btn-pill.btn-outline-light.txt-dark(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head6', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head6
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-outline-primary">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-secondary">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-success">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-info">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-warning">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-danger">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-light txt-dark">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 bold Border outline buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| and
|
|
code .btn-outline-*-2x
|
|
| class for button with bold outline
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-outline-primary-2x(type='button') Primary Button
|
|
button.btn.btn-pill.btn-outline-secondary-2x(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-outline-success-2x(type='button') Success Button
|
|
button.btn.btn-pill.btn-outline-info-2x(type='button') Info Button
|
|
button.btn.btn-pill.btn-outline-warning-2x(type='button') Warning Button
|
|
button.btn.btn-pill.btn-outline-danger-2x(type='button') Danger Button
|
|
button.btn.btn-pill.btn-outline-light-2x.txt-dark(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head7', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head7
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-outline-primary-2x">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-secondary-2x">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-success-2x">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-info-2x">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-warning-2x">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-danger-2x">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-light-2x txt-dark">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 outline Large buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| ,
|
|
code .btn-outline-*
|
|
| and
|
|
code .btn-lg
|
|
| class for large button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-outline-primary.btn-lg(type='button') Primary Button
|
|
button.btn.btn-pill.btn-outline-secondary.btn-lg(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-outline-success.btn-lg(type='button') Success Button
|
|
button.btn.btn-pill.btn-outline-info.btn-lg(type='button') Info Button
|
|
button.btn.btn-pill.btn-outline-warning.btn-lg(type='button') Warning Button
|
|
button.btn.btn-pill.btn-outline-danger.btn-lg(type='button') Danger Button
|
|
button.btn.btn-pill.btn-outline-light.btn-lg.txt-dark(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head8', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head8
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-outline-primary btn-lg">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-secondary btn-lg">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-success btn-lg">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-info btn-lg">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-warning btn-lg">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-danger btn-lg">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-light btn-lg txt-dark">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 outline small buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| ,
|
|
code .btn-outline-*
|
|
| and
|
|
code .btn-sm
|
|
| class for small button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-outline-primary.btn-sm(type='button') Primary Button
|
|
button.btn.btn-pill.btn-outline-secondary.btn-sm(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-outline-success.btn-sm(type='button') Success Button
|
|
button.btn.btn-pill.btn-outline-info.btn-sm(type='button') Info Button
|
|
button.btn.btn-pill.btn-outline-warning.btn-sm(type='button') Warning Button
|
|
button.btn.btn-pill.btn-outline-danger.btn-sm(type='button') Danger Button
|
|
button.btn.btn-pill.btn-outline-light.btn-sm.txt-dark(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head9', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head9
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-outline-primary btn-sm">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-secondary btn-sm">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-success btn-sm">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-info btn-sm">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-warning btn-sm">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-danger btn-sm">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-light btn-sm txt-dark">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Outline extra small buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| ,
|
|
code .btn-outline-*
|
|
| and
|
|
code .btn-xs
|
|
| class for extra small button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-outline-primary.btn-xs(type='button') Primary Button
|
|
button.btn.btn-pill.btn-outline-secondary.btn-xs(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-outline-success.btn-xs(type='button') Success Button
|
|
button.btn.btn-pill.btn-outline-info.btn-xs(type='button') Info Button
|
|
button.btn.btn-pill.btn-outline-warning.btn-xs(type='button') Warning Button
|
|
button.btn.btn-pill.btn-outline-danger.btn-xs(type='button') Danger Button
|
|
button.btn.btn-pill.btn-outline-light.btn-xs.txt-dark(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head10', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head10
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-outline-primary btn-xs">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-secondary btn-xs">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-success btn-xs">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-info btn-xs">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-warning btn-xs">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-danger btn-xs">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-light btn-xs txt-dark">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Disabled outline buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .disabled
|
|
| class or
|
|
code disabled="disabled"
|
|
| attribute for disabled button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-outline-primary.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-outline-secondary.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-outline-success.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-outline-info.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-outline-warning.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-outline-danger.disabled(type='button') Disabled
|
|
button.btn.btn-pill.btn-outline-light.disabled.txt-dark(type='button') Disabled
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head11', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head11
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-outline-primary disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-secondary disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-success disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-info disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-warning disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-danger disabled">Disabled</button>
|
|
| <button type="button" class="btn btn-pill btn-outline-light disabled txt-dark">Disabled</button>
|
|
| <!-- Cod Box Copy end -->
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Gradien buttons
|
|
.setting-list
|
|
ul.list-unstyled.setting-option
|
|
li
|
|
.setting-primary
|
|
i.icon-settings
|
|
li
|
|
i.view-html.fa.fa-code.font-primary
|
|
li
|
|
i.icofont.icofont-maximize.full-card.font-primary
|
|
li
|
|
i.icofont.icofont-minus.minimize-card.font-primary
|
|
li
|
|
i.icofont.icofont-refresh.reload-card.font-primary
|
|
li
|
|
i.icofont.icofont-error.close-card.font-primary
|
|
span
|
|
| Add
|
|
code .btn-pill
|
|
| and
|
|
code .btn-*-gradien
|
|
| class for gradien button
|
|
.card-body.btn-showcase
|
|
button.btn.btn-pill.btn-primary-gradien(type='button') Primary Button
|
|
button.btn.btn-pill.btn-secondary-gradien(type='button') Secondary Button
|
|
button.btn.btn-pill.btn-success-gradien(type='button') Success Button
|
|
button.btn.btn-pill.btn-info-gradien(type='button') Info Button
|
|
button.btn.btn-pill.btn-warning-gradien(type='button') Warning Button
|
|
button.btn.btn-pill.btn-danger-gradien(type='button') Danger Button
|
|
button.btn.btn-pill.btn-light-gradien.txt-dark(type='button') Light Button
|
|
.code-box-copy
|
|
button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head12', title='Copy')
|
|
i.icofont.icofont-copy-alt
|
|
pre
|
|
code.language-html#example-head12
|
|
| <!-- Cod Box Copy begin -->
|
|
| <button type="button" class="btn btn-pill btn-primary-gradien">primary button</button>
|
|
| <button type="button" class="btn btn-pill btn-secondary-gradien">secondary button</button>
|
|
| <button type="button" class="btn btn-pill btn-success-gradien">Success button</button>
|
|
| <button type="button" class="btn btn-pill btn-info-gradien">Info button</button>
|
|
| <button type="button" class="btn btn-pill btn-warning-gradien">warning button</button>
|
|
| <button type="button" class="btn btn-pill btn-danger-gradien">danger button</button>
|
|
| <button type="button" class="btn btn-pill btn-light-gradien.txt-dark">light button</button>
|
|
| <!-- Cod Box Copy end -->
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|