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">
2 <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
3 <label class="form-check-label" for="exampleRadios1">
4 Default radio
5 </label>
6</div>
7<div class="form-check">
8 <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
9 <label class="form-check-label" for="exampleRadios2">
10 Second default radio
11 </label>
12</div>
13<div class="form-check disabled">
14 <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
15 <label class="form-check-label" for="exampleRadios3">
16 Disabled radio
17 </label>
18</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>
1<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
2<label class="btn btn-secondary" for="option1">Checked</label>
3
4<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
5<label class="btn btn-secondary" for="option2">Radio</label>
6
7<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
8<label class="btn btn-secondary" for="option3">Disabled</label>
9
10<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
11<label class="btn btn-secondary" for="option4">Radio</label>
1Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox
2or radio style button toggling. Add data-toggle="buttons" to a .btn-group
3containing those modified buttons to enable their toggling behavior via
4JavaScript and add .btn-group-toggle to style the <input>s within your buttons.
5Note that you can create single input-powered buttons or groups of them.
6
7The checked state for these buttons is only updated via click event on the
8button. If you use another method to update the input—e.g., with
9<input type="reset"> or by manually applying the input’s checked
10property—you’ll need to toggle .active on the <label> manually.
11
12Note that pre-checked buttons require you to manually add the .active class to
13the input’s <label>.
14
15<div class="btn-group-toggle" data-toggle="buttons">
16 <label class="btn btn-secondary active">
17 <input type="checkbox" checked> Checked
18 </label>
19</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>