Skip to content

Checks and Radios

In Beets CSS you have assex to checkboxes, radios and switches styled by the theme colors. The reason why Bootstrap haven't included this functionality is propably because they have build in form validation, that styles the form controls like success or danger if the input is valid or invalid. This is a really good reason so be careful styling your forms with the classes below!

What is actually useful is the fact that you can create your own theme color and use it within your form!

You add the .form-check-* class to any <div class="form-check"> to style the form control.

Checkbox


<div class="form-check form-check-inline form-check-primary">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1">
    <label class="form-check-label" for="inlineCheckbox1">Primary</label>
</div>

Radio


<div class="form-check form-check-inline form-check-primary">
    <input class="form-check-input" type="radio" id="inlineRadio1" name="inlineRadio1">
    <label class="form-check-label" for="inlineRadio1">Primary</label>
</div>

Switch


<div class="form-check form-switch form-check-inline form-check-primary">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox1">
    <label class="form-check-label" for="inlineCheckbox1">Primary</label>
</div>