1<div class="form-group form-check">
2 <input type="checkbox" class="form-check-input" id="exampleCheck1">
3 <label class="form-check-label" for="exampleCheck1">Check me out</label>
4 </div>
1<div class="form-check form-check-inline">
2 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
3 <label class="form-check-label" for="inlineRadio1">1</label>
4</div>
5<div class="form-check form-check-inline">
6 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
7 <label class="form-check-label" for="inlineRadio2">2</label>
8</div>
9<div class="form-check form-check-inline">
10 <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
11 <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
12</div>
1<div class="form-check form-check-inline">
2 <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
3 <label class="form-check-label" for="inlineCheckbox1">1</label>
4</div>
5<div class="form-check form-check-inline">
6 <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
7 <label class="form-check-label" for="inlineCheckbox2">2</label>
8</div>
9<div class="form-check form-check-inline">
10 <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
11 <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
12</div>
1<div class="btn-group btn-group-toggle" data-toggle="buttons">
2 <label class="btn btn-secondary active">
3 <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
4 </label>
5 <label class="btn btn-secondary">
6 <input type="radio" name="options" id="option2" autocomplete="off"> Radio
7 </label>
8 <label class="btn btn-secondary">
9 <input type="radio" name="options" id="option3" autocomplete="off"> Radio
10 </label>
11</div>
1Bootstrap’s .button styles can be applied to other elements, such as
2<label>s, to provide checkbox or radio style button toggling. Add
3data-toggle="buttons" to a .btn-group containing those modified buttons
4to enable their toggling behavior via JavaScript and add .btn-group-toggle
5to style the <input>s within your buttons. Note that you can create single
6input-powered buttons or groups of them.
7
8The checked state for these buttons is only updated via click event on the
9button. If you use another method to update the input—e.g., with
10<input type="reset"> or by manually applying the input’s checked
11property—you’ll need to toggle .active on the <label> manually.
12
13Note that pre-checked buttons require you to manually add the .active class
14to the input’s <label>.
15
16<div class="btn-group btn-group-toggle" data-toggle="buttons">
17 <label class="btn btn-secondary active">
18 <input type="radio" name="options" id="option1" checked> Active
19 </label>
20 <label class="btn btn-secondary">
21 <input type="radio" name="options" id="option2"> Radio
22 </label>
23 <label class="btn btn-secondary">
24 <input type="radio" name="options" id="option3"> Radio
25 </label>
26</div>