Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
ChecksRadiosSwitchesInlineNo labelsToggle buttons

Checks and radios

Checks

Default

Indeterminate

Disabled

<h4 class="h5 text-muted mt-3">Default</h4>

<h4 class="h5 text-muted mt-3">Indeterminate</h4>

<h4 class="h5 text-muted mt-3">Disabled</h4>
<h4 class="h5 text-muted mt-3">Default</h4> <h4 class="h5 text-muted mt-3">Indeterminate</h4> <h4 class="h5 text-muted mt-3">Disabled</h4>

Radios

Default

Disabled

<h4 class="h5 text-muted mt-3">Default</h4>

<h4 class="h5 text-muted mt-3">Disabled</h4>
<h4 class="h5 text-muted mt-3">Default</h4> <h4 class="h5 text-muted mt-3">Disabled</h4>

Switches

Default

Disabled

<h4 class="h5 text-muted mt-3">Default</h4>

<h4 class="h5 text-muted mt-3">Disabled</h4>
<h4 class="h5 text-muted mt-3">Default</h4> <h4 class="h5 text-muted mt-3">Disabled</h4>

Inline

Check

Radio

<h4 class="h5 text-muted mt-3">Check</h4>

<h4 class="h5 text-muted mt-3">Radio</h4>
<h4 class="h5 text-muted mt-3">Check</h4> <h4 class="h5 text-muted mt-3">Radio</h4>

No labels

<input id="checkNolabel">
<input name="radioNolabel" id="radioNoLabel1">
<input id="checkNolabel"> <input name="radioNolabel" id="radioNoLabel1">

Toggle buttons

Checkbox

Radio

Outlined

<h4 class="h5 text-muted mt-3">Checkbox</h4>

<h4 class="h5 text-muted mt-3">Radio</h4>

<h4 class="h5 text-muted mt-3">Outlined</h4>
<h4 class="h5 text-muted mt-3">Checkbox</h4> <h4 class="h5 text-muted mt-3">Radio</h4> <h4 class="h5 text-muted mt-3">Outlined</h4>