Bootstrap Checks and Radios
To style checkboxes, use a wrapper element with class="form-check" to ensure proper margins for labels and checkboxes.
Then, add the .form-check-label class to label elements, and .form-check-input to style checkboxes properly inside the .form-check container.
Use the checked attribute if you want the checkbox to be checked by default.
The form-check class is used to group the checkbox and its label, while the form-check-input class is applied to the checkbox itself. The form-check-label class is used to style the label associated with the checkbox.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="flexCheckDefault" >
<label class ="form-check-label" for ="flexCheckDefault" >
Default checkbox
</label >
</div >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="flexCheckChecked" checked ="" >
<label class ="form-check-label" for ="flexCheckChecked" >
Checked checkbox
</label >
</div >
</body >
</html >
Bootstrap Indeterminate Checkbox
Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example bd-example-indeterminate" >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="flexCheckIndeterminate" >
<label class ="form-check-label" for ="flexCheckIndeterminate" >
Indeterminate checkbox
</label >
</div >
</body >
</html >
Bootstrap Indeterminate Checkbox Disabled
Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example bd-example-indeterminate" >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="flexCheckIndeterminateDisabled" disabled ="" >
<label class ="form-check-label" for ="flexCheckIndeterminateDisabled" >
Disabled indeterminate checkbox
</label >
</div >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="flexCheckDisabled" disabled ="" >
<label class ="form-check-label" for ="flexCheckDisabled" >
Disabled checkbox
</label >
</div >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="flexCheckCheckedDisabled" checked ="" disabled ="" >
<label class ="form-check-label" for ="flexCheckCheckedDisabled" >
Disabled checked checkbox
</label >
</div >
</body >
</html >
The form-check class is used to group the radio and its label, while the form-check-input class is applied to the radio itself. The form-check-label class is used to style the label associated with the radio.
The checked attribute is used to pre-select the first radio option.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check" >
<input class ="form-check-input" type ="radio" name ="flexRadioDefault" id ="flexRadioDefault1" >
<label class ="form-check-label" for ="flexRadioDefault1" >
Default radio
</label >
</div >
<div class ="form-check" >
<input class ="form-check-input" type ="radio" name ="flexRadioDefault" id ="flexRadioDefault2" checked ="" >
<label class ="form-check-label" for ="flexRadioDefault2" >
Default checked radio
</label >
</div >
</body >
</html >
Bootstrap Radios Disabled
Add the disabled attribute and the associated <label> s are automatically styled to match with a lighter color to help indicate the input’s state.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check" >
<input class ="form-check-input" type ="radio" name ="flexRadioDisabled" id ="flexRadioDisabled" disabled ="" >
<label class ="form-check-label" for ="flexRadioDisabled" >
Disabled radio
</label >
</div >
<div class ="form-check" >
<input class ="form-check-input" type ="radio" name ="flexRadioDisabled" id ="flexRadioCheckedDisabled" checked ="" disabled ="" >
<label class ="form-check-label" for ="flexRadioCheckedDisabled" >
Disabled checked radio
</label >
</div >
</body >
</html >
A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check form-switch" >
<input class ="form-check-input" type ="checkbox" role ="switch" id ="flexSwitchCheckDefault" >
<label class ="form-check-label" for ="flexSwitchCheckDefault" > Default switch checkbox input</label >
</div >
<div class ="form-check form-switch" >
<input class ="form-check-input" type ="checkbox" role ="switch" id ="flexSwitchCheckChecked" checked ="" >
<label class ="form-check-label" for ="flexSwitchCheckChecked" > Checked switch checkbox input</label >
</div >
<div class ="form-check form-switch" >
<input class ="form-check-input" type ="checkbox" role ="switch" id ="flexSwitchCheckDisabled" disabled ="" >
<label class ="form-check-label" for ="flexSwitchCheckDisabled" > Disabled switch checkbox input</label >
</div >
<div class ="form-check form-switch" >
<input class ="form-check-input" type ="checkbox" role ="switch" id ="flexSwitchCheckCheckedDisabled" checked ="" disabled ="" >
<label class ="form-check-label" for ="flexSwitchCheckCheckedDisabled" > Disabled checked switch checkbox input</label >
</div >
</body >
</html >
Bootstrap Default (stacked)
Checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check .
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="defaultCheck1" >
<label class ="form-check-label" for ="defaultCheck1" >
Default checkbox
</label >
</div >
<div class ="form-check" >
<input class ="form-check-input" type ="checkbox" value ="" id ="defaultCheck2" disabled ="" >
<label class ="form-check-label" for ="defaultCheck2" >
Disabled checkbox
</label >
</div >
</body >
</html >
Bootstrap Inline Checkbox
The form-check-inline class is used to display the checkbox buttons horizontally in a single row
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check form-check-inline" >
<input class ="form-check-input" type ="checkbox" id ="inlineCheckbox1" value ="option1" >
<label class ="form-check-label" for ="inlineCheckbox1" > 1</label >
</div >
<div class ="form-check form-check-inline" >
<input class ="form-check-input" type ="checkbox" id ="inlineCheckbox2" value ="option2" >
<label class ="form-check-label" for ="inlineCheckbox2" > 2</label >
</div >
<div class ="form-check form-check-inline" >
<input class ="form-check-input" type ="checkbox" id ="inlineCheckbox3" value ="option3" disabled ="" >
<label class ="form-check-label" for ="inlineCheckbox3" > 3 (disabled)</label >
</div >
</body >
</html >
The form-check-inline class is used to display the radio buttons horizontally in a single row
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check form-check-inline" >
<input class ="form-check-input" type ="radio" name ="inlineRadioOptions" id ="inlineRadio1" value ="option1" >
<label class ="form-check-label" for ="inlineRadio1" > 1</label >
</div >
<div class ="form-check form-check-inline" >
<input class ="form-check-input" type ="radio" name ="inlineRadioOptions" id ="inlineRadio2" value ="option2" >
<label class ="form-check-label" for ="inlineRadio2" > 2</label >
</div >
<div class ="form-check form-check-inline" >
<input class ="form-check-input" type ="radio" name ="inlineRadioOptions" id ="inlineRadio3" value ="option3" disabled ="" >
<label class ="form-check-label" for ="inlineRadio3" > 3 (disabled)</label >
</div >
</body >
</html >
Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div class ="form-check form-check-reverse" >
<input class ="form-check-input" type ="checkbox" value ="" id ="reverseCheck1" >
<label class ="form-check-label" for ="reverseCheck1" >
Reverse checkbox
</label >
</div >
<div class ="form-check form-check-reverse" >
<input class ="form-check-input" type ="checkbox" value ="" id ="reverseCheck2" disabled ="" >
<label class ="form-check-label" for ="reverseCheck2" >
Disabled reverse checkbox
</label >
</div >
<div class ="form-check form-switch form-check-reverse" >
<input class ="form-check-input" type ="checkbox" id ="flexSwitchCheckReverse" >
<label class ="form-check-label" for ="flexSwitchCheckReverse" > Reverse switch checkbox input</label >
</div >
</body >
</html >
Omit the wrapping .form-check for checkboxes and radios that have no label text.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<div >
<input class ="form-check-input" type ="checkbox" id ="checkboxNoLabel" value ="" aria-label ="..." >
</div >
<div >
<input class ="form-check-input" type ="radio" name ="radioNoLabel" id ="radioNoLabel1" value ="" aria-label ="..." >
</div >
</body >
</html >
Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements.
Bootstrap Checkbox Toggle Buttons Example 1
Bootstrap Checkbox toggle buttons are UI components that allow users to switch between two states: checked and unchecked. They are often used for binary options or boolean settings, such as on/off switches.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<input type ="checkbox" class ="btn-check" id ="btn-check" autocomplete ="off" >
<label class ="btn btn-primary" for ="btn-check" > Single toggle</label >
</body >
</html >
Bootstrap Checkbox Toggle Buttons Example 2
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<input type ="checkbox" class ="btn-check" id ="btn-check-2" checked ="" autocomplete ="off" >
<label class ="btn btn-primary" for ="btn-check-2" > Checked</label >
</body >
</html >
Bootstrap Checkbox Toggle Buttons Example 3
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<input type ="checkbox" class ="btn-check" id ="btn-check-3" autocomplete ="off" disabled ="" >
<label class ="btn btn-primary" for ="btn-check-3" > Disabled</label >
</body >
</html >
Bootstrap Radio Toggle Buttons
Bootstrap Radio toggle buttons are UI components that allow users to select a single option from a group of options. They are often used for mutually exclusive options, such as selecting a payment method or choosing a size or color.
Sample code:
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<input type ="radio" class ="btn-check" name ="options" id ="option1" autocomplete ="off" checked ="" >
<label class ="btn btn-secondary" for ="option1" > Checked</label >
<input type ="radio" class ="btn-check" name ="options" id ="option2" autocomplete ="off" >
<label class ="btn btn-secondary" for ="option2" > Radio</label >
<input type ="radio" class ="btn-check" name ="options" id ="option3" autocomplete ="off" disabled ="" >
<label class ="btn btn-secondary" for ="option3" > Disabled</label >
<input type ="radio" class ="btn-check" name ="options" id ="option4" autocomplete ="off" >
<label class ="btn btn-secondary" for ="option4" > Radio</label >
</body >
</html >
Bootstrap Outlined Styles
Different variants of .btn , such at the various outlined styles, are supported.
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1" >
<link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel ="stylesheet" >
<link href ="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel ="stylesheet" >
<title > Bootstrap Example</title >
<script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </script >
</head >
<body class ="p-3 m-0 border-0 bd-example" >
<input type ="checkbox" class ="btn-check" id ="btn-check-outlined" autocomplete ="off" >
<label class ="btn btn-outline-primary" for ="btn-check-outlined" > Single toggle</label > <br >
<input type ="checkbox" class ="btn-check" id ="btn-check-2-outlined" checked ="" autocomplete ="off" >
<label class ="btn btn-outline-secondary" for ="btn-check-2-outlined" > Checked</label > <br >
<input type ="radio" class ="btn-check" name ="options-outlined" id ="success-outlined" autocomplete ="off" checked ="" >
<label class ="btn btn-outline-success" for ="success-outlined" > Checked success radio</label >
<input type ="radio" class ="btn-check" name ="options-outlined" id ="danger-outlined" autocomplete ="off" >
<label class ="btn btn-outline-danger" for ="danger-outlined" > Danger radio</label >
</body >
</html >
