bootstrap
  1. bootstrap-check-and-radio
PreviousNext

Bootstrap Check and Radio Buttons

Bootstrap provides a set of classes that can be used to create custom check and radio buttons that are more visually appealing and customizable than the default form elements.

Syntax

For check and radio buttons, the syntax is similar. Here's an example:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck">
  <label class="form-check-label" for="defaultCheck">
    Default check
  </label>
</div>

<div class="form-check">
  <input class="-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>

Example

Here's an example of how to create a set of custom check buttons.

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

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck3" checked>
  <label class="form-check-label" for="defaultCheck3">
    Checked checkbox
  </label>
</div>
Try Playground

Radios

Here's an example of how to create a set of custom radio buttons.

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
        Default radio
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
        Second radio
    </label>
</div>

<div class="form-check disabled">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
        Disabled radio
    </label>
</div>
Try Playground

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch.

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

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

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

Reverse

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

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

Explanation

In the code above, we use the following Bootstrap classes to create custom check and radio buttons:

  • form-check: This is a container class for all form check and radio-related elements.
  • form-check-input: This is a class applied to the input element used to create the form check or radio element.
  • form-check-label: This is a class applied to the label element associated with the form check or radio element.
  • disabled: This class is used to make the element disabled and unclickable.
  • checked: This class is used to make the element checked by default.

Use

Custom checkbox and radio buttons can be used in forms to enhance the visual appeal and usability of the form UI. Bootstrap provides a set of classes and styles that can be used to create custom buttons that fit within the overall theme of the site.

Important Points

  • Bootstrap provides a set of classes for creating custom checkbox and radio buttons.
  • These custom buttons can be used to enhance the visual appeal and usability of forms.
  • Bootstrap provides classes and styles that make it easy to create custom buttons that fit with the overall theme of the site.

Summary

Bootstrap's custom check and radio buttons provide a great way to enhance the visual appeal and usability of forms. By using these classes and styles, developers can create custom buttons that are visually appealing and fit with the overall theme of the site.

SelectRange
Published on: