Button Group

Basic Example

Basic button group example

HTML Code for this Element

<div class="btn-group" role="group" aria-label="Basic example">
	<button type="button" class="btn btn-primary">Left</button>
	<button type="button" class="btn btn-primary">Middle</button>
	<button type="button" class="btn btn-primary">Right</button>
</div>

Active Element

You can also show the active state on a single button with the .active class.

Active link Link Link

HTML Code for this Element

<div class="btn-group">
	<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
	<a href="#" class="btn btn-primary">Link</a>
	<a href="#" class="btn btn-primary">Link</a>
</div>

Active Element

Button groups can take any .btn-* variant.

HTML Code for this Element

<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>

Outline Button Groups

Outline buttons in a button group.

HTML Code for this Element

<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>

Checkbox Button Group

Checkbox buttons in a button group.

Checkbox 1 Checkbox 2 Checkbox 3

HTML Code for this Element

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
	<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
	<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
	
	<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off checked">
	<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
	
	<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
	<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Radio Button Group

Radio buttons in a button group.

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
	<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
	<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

	<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
	<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

	<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
	<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
	</div>

Radio 1 Radio 2 Radio 3

HTML Code for this Element

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
	<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
	<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
	
	<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
	<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
	
	<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
	<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>