Button group example 1

Component
Name	Button group
Description	Groups of buttons made with the BootstrapComponents extension
Provider	Skin
Note	Keep the <!-- --> comments between the buttons. Without them, the buttons do not join into a group.
Reference	getbootstrap.com - button group
Styling	For all possible color styles and corresponding examples, see colors.

Button group

Code

<div class="btn-group mb-3" role="group" aria-label="Skins"><!--
-->{{#bootstrap_button: Chameleon |color=primary }}<!--
-->{{#bootstrap_button: Medik |color=primary }}<!--
-->{{#bootstrap_button: Tweeki |color=primary }}<!--
--></div>

Result

ChameleonMedikTweeki

Outline buttons

Code

<div class="btn-group mb-3" role="group" aria-label="Topics"><!--
-->{{#bootstrap_button: Components |color=secondary |outline }}<!--
-->{{#bootstrap_button: Colors |color=secondary |outline }}<!--
-->{{#bootstrap_button: Grid |color=secondary |outline }}<!--
--></div>

Result

ComponentsColorsGrid

Vertical button group

Code

<div class="btn-group-vertical mb-3" role="group" aria-label="Extensions"><!--
-->{{#bootstrap_button: Bootstrap (extension) |color=info |text=Bootstrap }}<!--
-->{{#bootstrap_button: BootstrapComponents |color=info }}<!--
--></div>

Result

BootstrapBootstrapComponents

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!