Bootstrap Checks and Radios - Bootstrap 5 Checkboxes and Radio buttons


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.

Bootstrap CheckBox

  • 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.
how-to-create-checkbox-with-bootstrap

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">
    <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>

Output

bootstrap-checkbox

Bootstrap Indeterminate Checkbox

  • Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

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 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>

Output

bootstrap-intermediate-checkbox

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.

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 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>

Output

bootstrap-checkbox-disabled

Bootstrap Radios

  • 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.

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">
    <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>

Output

bootstrap-radio

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.

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">
    <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>

Output

bootstrap-radio-disabled

Bootstrap Switches

  • 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.

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">
    <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>

Output

bootstrap-switch

Bootstrap Default (stacked)

  • Checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

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">
    <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>

Output

bootstrap-default-checkbox

Bootstrap Inline Checkbox

  • The form-check-inline class is used to display the checkbox buttons horizontally in a single row

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">
    <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>

Output

bootstrap-inline-checkbox

Bootstrap Inline Radio

  • The form-check-inline class is used to display the radio buttons horizontally in a single row

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">
    <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>

Output

bootstrap-inline-radio

Bootstrap Reverse

  • Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.

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">
    <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>

Output

form-check-reverse

Bootstrap Without labels

  • Omit the wrapping .form-check for checkboxes and radios that have no label text.

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">
    <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>

Output

bootstrap-checkbox-without-label

Bootstrap Toggle buttons

  • 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.

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="checkbox" class="btn-check" id="btn-check" autocomplete="off">
    <label class="btn btn-primary" for="btn-check">Single toggle</label>
  </body>
</html>

Output

bootstrap-checkbox-toggle-button

Bootstrap Checkbox Toggle Buttons Example 2

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="checkbox" class="btn-check" id="btn-check-2" checked="" autocomplete="off">
    <label class="btn btn-primary" for="btn-check-2">Checked</label>
  </body>
</html>

Output

bootstrap-checkbox-toggle

Bootstrap Checkbox Toggle Buttons Example 3

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="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled="">
    <label class="btn btn-primary" for="btn-check-3">Disabled</label>
  </body>
</html>

Output

bootstrap-checkbox-toggle-disabled

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

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>

Output

bootstrap-radio-toggle-buttons

Bootstrap Outlined Styles

  • Different variants of .btn, such at the various outlined styles, are supported.

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="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>

Output

bootstrap-checkbox-radio-style

Related Searches to Bootstrap Checks and Radios - Bootstrap 5 Checkboxes and Radio buttons

bootstrap 4 radio button bootstrap checkbox bootstrap radio group bootstrap radio button bootstrap 4 checkbox bootstrap 5 radio button bootstrap 5 radio button group inline radio button bootstrap 4 bootstrap checkbox bootstrap radio group bootstrap radio button bootstrap 4 checkbox bootstrap 5 radio button bootstrap 4 radio button checks and radios bootstrap 3 checks and radios bootstrap 4 boost mobile check order status does boost mobile accept checks bootstrap 4 checks and radios

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2024 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai