File: /home/crm/public_html/wwwroot/assets/pug/pages/theme/button-group.pug
- var height_equal = true;
- var theme_customizer = 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
| Button Group
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Buttons
li.breadcrumb-item.active Button Group
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-12
.card
.card-header
h5 Basic button group
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-primary(type='button') Left
button.btn.btn-primary(type='button') Middle
button.btn.btn-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-secondary(type='button') Left
button.btn.btn-secondary(type='button') Middle
button.btn.btn-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-success(type='button') Left
button.btn.btn-success(type='button') Middle
button.btn.btn-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-info(type='button') Left
button.btn.btn-info(type='button') Middle
button.btn.btn-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-warning(type='button') Left
button.btn.btn-warning(type='button') Middle
button.btn.btn-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-danger(type='button') Left
button.btn.btn-danger(type='button') Middle
button.btn.btn-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-light(type='button') Left
button.btn.btn-light(type='button') Middle
button.btn.btn-light(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-dark(type='button') Left
button.btn.btn-dark(type='button') Middle
button.btn.btn-dark(type='button') Right
.col-12
.card
.card-header
h5 Edges button group
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-primary(type='button') Left
button.btn.btn-primary(type='button') Middle
button.btn.btn-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-secondary(type='button') Left
button.btn.btn-secondary(type='button') Middle
button.btn.btn-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-success(type='button') Left
button.btn.btn-success(type='button') Middle
button.btn.btn-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-info(type='button') Left
button.btn.btn-info(type='button') Middle
button.btn.btn-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-warning(type='button') Left
button.btn.btn-warning(type='button') Middle
button.btn.btn-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-danger(type='button') Left
button.btn.btn-danger(type='button') Middle
button.btn.btn-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-light(type='button') Left
button.btn.btn-light(type='button') Middle
button.btn.btn-light(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-dark(type='button') Left
button.btn.btn-dark(type='button') Middle
button.btn.btn-dark(type='button') Right
.col-12
.card
.card-header
h5 Flat button group
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-primary(type='button') Left
button.btn.btn-primary(type='button') Middle
button.btn.btn-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-secondary(type='button') Left
button.btn.btn-secondary(type='button') Middle
button.btn.btn-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-success(type='button') Left
button.btn.btn-success(type='button') Middle
button.btn.btn-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-info(type='button') Left
button.btn.btn-info(type='button') Middle
button.btn.btn-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-dark(type='button') Left
button.btn.btn-dark(type='button') Middle
button.btn.btn-dark(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-warning(type='button') Left
button.btn.btn-warning(type='button') Middle
button.btn.btn-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-danger(type='button') Left
button.btn.btn-danger(type='button') Middle
button.btn.btn-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-light(type='button') Left
button.btn.btn-light(type='button') Middle
button.btn.btn-light(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-dark(type='button') Left
button.btn.btn-dark(type='button') Middle
button.btn.btn-dark(type='button') Right
.col-12
.card
.card-header
h5 large Button group
.card-body.btn-group-showcase
.row
.col-xl-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-primary.btn-lg(type='button') Left
button.btn.btn-primary.btn-lg(type='button') Middle
button.btn.btn-primary.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-secondary.btn-lg(type='button') Left
button.btn.btn-secondary.btn-lg(type='button') Middle
button.btn.btn-secondary.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-success.btn-lg(type='button') Left
button.btn.btn-success.btn-lg(type='button') Middle
button.btn.btn-success.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-info.btn-lg(type='button') Left
button.btn.btn-info.btn-lg(type='button') Middle
button.btn.btn-info.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-warning.btn-lg(type='button') Left
button.btn.btn-warning.btn-lg(type='button') Middle
button.btn.btn-warning.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-danger.btn-lg(type='button') Left
button.btn.btn-danger.btn-lg(type='button') Middle
button.btn.btn-danger.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-light.btn-lg(type='button') Left
button.btn.btn-light.btn-lg(type='button') Middle
button.btn.btn-light.btn-lg(type='button') Right
.col-xl-6.col-sm-12.button-group-mb-sm
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-dark.btn-lg(type='button') Left
button.btn.btn-dark.btn-lg(type='button') Middle
button.btn.btn-dark.btn-lg(type='button') Right
.col-12
.card
.card-header
h5 large Edges Button group
.card-body.btn-group-showcase
.row
.col-xl-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-primary.btn-lg(type='button') Left
button.btn.btn-primary.btn-lg(type='button') Middle
button.btn.btn-primary.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-secondary.btn-lg(type='button') Left
button.btn.btn-secondary.btn-lg(type='button') Middle
button.btn.btn-secondary.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-success.btn-lg(type='button') Left
button.btn.btn-success.btn-lg(type='button') Middle
button.btn.btn-success.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-info.btn-lg(type='button') Left
button.btn.btn-info.btn-lg(type='button') Middle
button.btn.btn-info.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-warning.btn-lg(type='button') Left
button.btn.btn-warning.btn-lg(type='button') Middle
button.btn.btn-warning.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-danger.btn-lg(type='button') Left
button.btn.btn-danger.btn-lg(type='button') Middle
button.btn.btn-danger.btn-lg(type='button') Right
.col-xl-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-light.btn-lg(type='button') Left
button.btn.btn-light.btn-lg(type='button') Middle
button.btn.btn-light.btn-lg(type='button') Right
.col-xl-6.col-sm-12.button-group-mb-sm
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-dark.btn-lg(type='button') Left
button.btn.btn-dark.btn-lg(type='button') Middle
button.btn.btn-dark.btn-lg(type='button') Right
.col-12
.card
.card-header
h5 Outline Custom button group
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-primary(type='button') Left
button.btn.btn-primary(type='button') Middle
button.btn.btn-outline-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-secondary(type='button') Left
button.btn.btn-secondary(type='button') Middle
button.btn.btn-outline-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-success(type='button') Left
button.btn.btn-success(type='button') Middle
button.btn.btn-outline-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-info(type='button') Left
button.btn.btn-info(type='button') Middle
button.btn.btn-outline-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-warning(type='button') Left
button.btn.btn-warning(type='button') Middle
button.btn.btn-outline-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-danger(type='button') Left
button.btn.btn-danger(type='button') Middle
button.btn.btn-outline-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-light.txt-dark(type='button') Left
button.btn.btn-light(type='button') Middle
button.btn.btn-outline-light.txt-dark(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-dark(type='button') Left
button.btn.btn-dark(type='button') Middle
button.btn.btn-outline-dark(type='button') Right
.col-12
.card
.card-header
h5 Outline custom button group
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-primary(type='button') Left
button.btn.btn-outline-primary(type='button') Middle
button.btn.btn-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-secondary(type='button') Left
button.btn.btn-outline-secondary(type='button') Middle
button.btn.btn-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-success(type='button') Left
button.btn.btn-outline-success(type='button') Middle
button.btn.btn-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-info(type='button') Left
button.btn.btn-outline-info(type='button') Middle
button.btn.btn-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-warning(type='button') Left
button.btn.btn-outline-warning(type='button') Middle
button.btn.btn-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-danger(type='button') Left
button.btn.btn-outline-danger(type='button') Middle
button.btn.btn-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-light(type='button') Left
button.btn.btn-outline-light.txt-dark(type='button') Middle
button.btn.btn-light(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-dark(type='button') Left
button.btn.btn-outline-dark(type='button') Middle
button.btn.btn-dark(type='button') Right
.col-12
.card
.card-header
h5 Outline button group
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-primary(type='button') Left
button.btn.btn-outline-primary(type='button') Middle
button.btn.btn-outline-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-secondary(type='button') Left
button.btn.btn-outline-secondary(type='button') Middle
button.btn.btn-outline-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-success(type='button') Left
button.btn.btn-outline-success(type='button') Middle
button.btn.btn-outline-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-info(type='button') Left
button.btn.btn-outline-info(type='button') Middle
button.btn.btn-outline-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-warning(type='button') Left
button.btn.btn-outline-warning(type='button') Middle
button.btn.btn-outline-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-danger(type='button') Left
button.btn.btn-outline-danger(type='button') Middle
button.btn.btn-outline-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-light.txt-dark(type='button') Left
button.btn.btn-outline-light.txt-dark(type='button') Middle
button.btn.btn-outline-light.txt-dark(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group(role='group', aria-label='Basic example')
button.btn.btn-outline-dark(type='button') Left
button.btn.btn-outline-dark(type='button') Middle
button.btn.btn-outline-dark(type='button') Right
.col-12
.card
.card-header
h5 Outline Edges button
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-primary(type='button') Left
button.btn.btn-outline-primary(type='button') Middle
button.btn.btn-outline-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-secondary(type='button') Left
button.btn.btn-outline-secondary(type='button') Middle
button.btn.btn-outline-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-success(type='button') Left
button.btn.btn-outline-success(type='button') Middle
button.btn.btn-outline-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-info(type='button') Left
button.btn.btn-outline-info(type='button') Middle
button.btn.btn-outline-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-warning(type='button') Left
button.btn.btn-outline-warning(type='button') Middle
button.btn.btn-outline-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-danger(type='button') Left
button.btn.btn-outline-danger(type='button') Middle
button.btn.btn-outline-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-light.txt-dark(type='button') Left
button.btn.btn-outline-light.txt-dark(type='button') Middle
button.btn.btn-outline-light.txt-dark(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group.btn-group-pill(role='group', aria-label='Basic example')
button.btn.btn-outline-dark(type='button') Left
button.btn.btn-outline-dark(type='button') Middle
button.btn.btn-outline-dark(type='button') Right
.col-12
.card
.card-header
h5 Outline flat button
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-primary(type='button') Left
button.btn.btn-outline-primary(type='button') Middle
button.btn.btn-outline-primary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-secondary(type='button') Left
button.btn.btn-outline-secondary(type='button') Middle
button.btn.btn-outline-secondary(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-success(type='button') Left
button.btn.btn-outline-success(type='button') Middle
button.btn.btn-outline-success(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-info(type='button') Left
button.btn.btn-outline-info(type='button') Middle
button.btn.btn-outline-info(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-warning(type='button') Left
button.btn.btn-outline-warning(type='button') Middle
button.btn.btn-outline-warning(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-danger(type='button') Left
button.btn.btn-outline-danger(type='button') Middle
button.btn.btn-outline-danger(type='button') Right
.col-xxl-4.col-md-6.col-sm-12
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-light.txt-dark(type='button') Left
button.btn.btn-outline-light.txt-dark(type='button') Middle
button.btn.btn-outline-light.txt-dark(type='button') Right
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-group.btn-group-square(role='group', aria-label='Basic example')
button.btn.btn-outline-dark(type='button') Left
button.btn.btn-outline-dark(type='button') Middle
button.btn.btn-outline-dark(type='button') Right
.col-12
.card
.card-header
h5 Radio button group
span
| Add
code .active
| for active state and
code .disabled
| class or
code disabled="disabled"
| attribute
.card-body.btn-group-showcase
.row
.col-xxl-4.col-md-6.col-sm-12
.btn-radio
.btn-group(data-bs-toggle='buttons')
div.btn.btn-primary
.radio.radio-primary
input#radio7(type='radio', name='radio1', value='option1')
label(for='radio7') Option 1
div.btn.btn-primary.active
.radio.radio-primary
input#radio8(type='radio', name='radio1', value='option1', checked='')
label(for='radio8') Option 2
.col-xxl-4.col-md-6.col-sm-12
.btn-radio
.btn-group(data-bs-toggle='buttons')
div.btn.btn-secondary
.radio.radio-secondary
input#radio11(type='radio', name='radio2', value='option1')
label(for='radio11') Option 1
div.btn.btn-secondary.active
.radio.radio-secondary
input#radio12(type='radio', name='radio2', value='option1', checked='')
label(for='radio12') Option 2
.col-xxl-4.col-md-6.col-sm-12
.btn-radio
.btn-group(data-bs-toggle='buttons')
div.btn.btn-success
.radio.radio-success
input#radio13(type='radio', name='radio3', value='option1')
label(for='radio13') Option 1
div.btn.btn-success.active
.radio.radio-success
input#radio14(type='radio', name='radio3', value='option1', checked='')
label(for='radio14') Option 2
.col-xxl-4.col-md-6.col-sm-12
.btn-radio
.btn-group(data-bs-toggle='buttons')
div.btn.btn-info
.radio.radio-info
input#radio15(type='radio', name='radio4', value='option1')
label(for='radio15') Option 1
div.btn.btn-info.active
.radio.radio-info
input#radio16(type='radio', name='radio4', value='option1', checked='')
label(for='radio16') Option 2
.col-xxl-4.col-md-6.col-sm-12
.btn-radio
.btn-group(data-bs-toggle='buttons')
div.btn.btn-warning
.radio.radio-warning
input#radio17(type='radio', name='radio5', value='option1')
label(for='radio17') Option 1
div.btn.btn-warning.active
.radio.radio-warning
input#radio18(type='radio', name='radio5', value='option1', checked='')
label(for='radio18') Option 2
.col-xxl-4.col-md-6.col-sm-12
.btn-radio
.btn-group(data-bs-toggle='buttons')
div.btn.btn-danger
.radio.radio-danger
input#radio20(type='radio', name='radio6', value='option1')
label(for='radio20') Option 1
div.btn.btn-danger.active
.radio.radio-danger
input#radio22(type='radio', name='radio6', value='option1', checked='')
label(for='radio22') Option 2
.col-xxl-4.col-md-6.col-sm-12.button-group-mb-sm
.btn-radio
.btn-group(data-bs-toggle='buttons')
div.btn.btn-light.txt-dark
.radio.radio-light
input#radio23(type='radio', name='radio7', value='option1')
label(for='radio23') Option 1
div.btn.btn-light.active.txt-dark
.radio.radio-light
input#radio24(type='radio', name='radio7', value='option1', checked='')
label(for='radio24') Option 2
.col-12
.card
.card-header
h5 Check Box button group
span
| Add
code .active
| for active state and
code .disabled
| class or
code disabled="disabled"
| attribute
.card-body.btn-group-showcase
.row
.col-xl-6.col-sm-12
.btn-group.btn-option(data-bs-toggle='buttons')
div.btn.btn-primary
.checkbox.checkbox-primary
input#checkbox-primary-1(type='checkbox')
label(for='checkbox-primary-1') Option 1
div.btn.btn-primary
.checkbox.checkbox-primary
input#checkbox-primary-2(type='checkbox')
label(for='checkbox-primary-2') Option 2
.col-xl-6.col-sm-12
.btn-group.btn-option(data-bs-toggle='buttons')
div.btn.btn-secondary
.checkbox.checkbox-secondary
input#checkbox-primary-3(type='checkbox')
label(for='checkbox-primary-3') Option 1
div.btn.btn-secondary
.checkbox.checkbox-secondary
input#checkbox-primary-4(type='checkbox')
label(for='checkbox-primary-4') Option 2
.col-xl-6.col-sm-12
.btn-group.btn-option(data-bs-toggle='buttons')
div.btn.btn-success
.checkbox.checkbox-success
input#checkbox-primary-5(type='checkbox')
label(for='checkbox-primary-5') Option 1
div.btn.btn-success
.checkbox.checkbox-success
input#checkbox-primary-6(type='checkbox')
label(for='checkbox-primary-6') Option 2
.col-xl-6.col-sm-12
.btn-group.btn-option(data-bs-toggle='buttons')
div.btn.btn-info
.checkbox.checkbox-info
input#checkbox-primary-7(type='checkbox')
label(for='checkbox-primary-7') Option 1
div.btn.btn-info
.checkbox.checkbox-info
input#checkbox-primary-8(type='checkbox')
label(for='checkbox-primary-8') Option 2
.col-xl-6.col-sm-12
.btn-group.btn-option(data-bs-toggle='buttons')
div.btn.btn-warning
.checkbox.checkbox-warning
input#checkbox-warning-9(type='checkbox')
label(for='checkbox-warning-9') Option 1
div.btn.btn-warning
.checkbox.checkbox-warning
input#checkbox-warning-10(type='checkbox')
label(for='checkbox-warning-10') Option 2
.col-xl-6.col-sm-12
.btn-group.btn-option(data-bs-toggle='buttons')
div.btn.btn-danger
.checkbox.checkbox-danger
input#checkbox-danger-11(type='checkbox')
label(for='checkbox-danger-11') Option 1
div.btn.btn-danger
.checkbox.checkbox-danger
input#checkbox-danger-12(type='checkbox')
label(for='checkbox-danger-12') Option 2
.col-xl-6.col-sm-12.button-group-mb-sm
.btn-group.btn-option(data-bs-toggle='buttons')
div.btn.btn-light.txt-dark
.checkbox.checkbox-light
input#checkbox-light-13(type='checkbox')
label(for='checkbox-light-13') Option 1
div.btn.btn-light.txt-dark
.checkbox.checkbox-light
input#checkbox-light-14(type='checkbox')
label(for='checkbox-light-14') Option 2
.col-lg-6
.card.height-equal
.card-header
h5 Nesting
span Make nesting buttons
.card-body.btn-group-wrapper
.m-b-30
.btn-group(role='group', aria-label='Button group with nested dropdown')
button.btn.btn-primary
i.fa.fa-bold
button.btn.btn-secondary
i.fa.fa.fa-italic
.btn-group(role='group')
button#btnGroupDrop1.btn.btn-light.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
.dropdown-menu(aria-labelledby='btnGroupDrop1')
a.dropdown-item(href='#') Dropdown link
a.dropdown-item(href='#') Dropdown link
a.dropdown-item(href='#') Dropdown link
a.dropdown-item(href='#') Dropdown link
.m-b-30
.btn-group
button.btn.btn-primary
i.fa.fa-bold
button.btn.btn-secondary
i.fa.fa.fa-italic
button.btn.btn-success
i.fa.fa-file-image-o
button.btn.btn-info
i.fa.fa-paperclip
.m-b-30
.btn-group
button.btn.btn-primary.btn-lg
i.fa.fa-bold
button.btn.btn-secondary.btn-lg
i.fa.fa.fa-italic
button.btn.btn-success.btn-lg
i.fa.fa-file-image-o
button.btn.btn-info.btn-lg
i.fa.fa-paperclip
.col-lg-6
.card.height-equal
.card-header
h5 Vertical
span Make vertical buttons
.card-body.btn-group-wrapper
.btn-group-vertical(role='group', aria-label='Vertical button group')
button.btn.btn-primary(type='button') Button
button.btn.btn-secondary(type='button') Button
.btn-group(role='group')
button#btnGroupVerticalDrop1.btn.btn-success.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
.dropdown-menu(aria-labelledby='btnGroupVerticalDrop1')
a.dropdown-item(href='#') Dropdown link
a.dropdown-item(href='#') Dropdown link
button.btn.btn-info(type='button') Button
button.btn.btn-warning(type='button') Button
.btn-group(role='group')
button#btnGroupVerticalDrop2.btn.btn-danger.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
.dropdown-menu(aria-labelledby='btnGroupVerticalDrop2')
a.dropdown-item(href='#') Dropdown link
a.dropdown-item(href='#') Dropdown link
.btn-group(role='group')
button#btnGroupVerticalDrop3.btn.btn-light.dropdown-toggle(type='button', data-bs-toggle='dropdown', aria-haspopup='true', aria-expanded='false') Dropdown
.dropdown-menu(aria-labelledby='btnGroupVerticalDrop3')
a.dropdown-item(href='#') Dropdown link
a.dropdown-item(href='#') Dropdown link
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files