Bootstrap button group
<
div
class
=
"docs-example"
>
<
div
class
=
"btn-group-vertical"
role
=
"group"
aria-label
=
"Vertical button group"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>
Button
</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>
Button
</
button
>
<
div
class
=
"btn-group"
role
=
"group"
>
<
button
id
=
"btnGroupVerticalDrop1"
type
=
"button"
class
=
"btn btn-primary dropdown-toggle"
data-coreui-toggle
=
"dropdown"
aria-expanded
=
"false"
>
Dropdown
</
button
>
<
ul
class
=
"dropdown-menu"
aria-labelledby
=
"btnGroupVerticalDrop1"
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
</
ul
>
</
div
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>
Button
</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
>
Button
</
button
>
<
div
class
=
"btn-group"
role
=
"group"
>
<
button
id
=
"btnGroupVerticalDrop2"
type
=
"button"
class
=
"btn btn-primary dropdown-toggle"
data-coreui-toggle
=
"dropdown"
aria-expanded
=
"false"
>
Dropdown
</
button
>
<
ul
class
=
"dropdown-menu"
aria-labelledby
=
"btnGroupVerticalDrop2"
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"btn-group"
role
=
"group"
>
<
button
id
=
"btnGroupVerticalDrop3"
type
=
"button"
class
=
"btn btn-primary dropdown-toggle"
data-coreui-toggle
=
"dropdown"
aria-expanded
=
"false"
>
Dropdown
</
button
>
<
ul
class
=
"dropdown-menu"
aria-labelledby
=
"btnGroupVerticalDrop3"
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"btn-group"
role
=
"group"
>
<
button
id
=
"btnGroupVerticalDrop4"
type
=
"button"
class
=
"btn btn-primary dropdown-toggle"
data-coreui-toggle
=
"dropdown"
aria-expanded
=
"false"
>
Dropdown
</
button
>
<
ul
class
=
"dropdown-menu"
aria-labelledby
=
"btnGroupVerticalDrop4"
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#"
>
Dropdown link
</
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"docs-example"
>
<
div
class
=
"btn-group-vertical"
role
=
"group"
aria-label
=
"Vertical radio toggle button group"
>
<
input
type
=
"radio"
class
=
"btn-check"
name
=
"vbtn-radio"
id
=
"vbtn-radio1"
autocomplete
=
"off"
checked
>
<
label
class
=
"btn btn-outline-danger"
for
=
"vbtn-radio1"
>
Radio 1
</
label
>
<
input
type
=
"radio"
class
=
"btn-check"
name
=
"vbtn-radio"
id
=
"vbtn-radio2"
autocomplete
=
"off"
>
<
label
class
=
"btn btn-outline-danger"
for
=
"vbtn-radio2"
>
Radio 2
</
label
>
<
input
type
=
"radio"
class
=
"btn-check"
name
=
"vbtn-radio"
id
=
"vbtn-radio3"
autocomplete
=
"off"
>
<
label
class
=
"btn btn-outline-danger"
for
=
"vbtn-radio3"
>
Radio 3
</
label
>
</
div
>
</
div
>
