Default Checkbox
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
Custom Checkbox
Each checkbox is wrapped in a <div> with a sibling <span> to create our custom control and a <label> for the accompanying text. Structurally, this is the same approach as our default .form-check.
Default Radio Buttons
By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
Custom Radio Buttons
Each radio is wrapped in a <div> with a sibling <span> to create our custom control and a <label> for the accompanying text. Structurally, this is the same approach as our default .form-check.
Custom Color Checkbox
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
Custom Color Radio Buttons
By default, any number of radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.
Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
Without labels
Add .position-static to inputs within .form-check that don’t have any label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).
iCheck Checkbox
Basic Skin iCheck
Wrap with .icheck_minimal.skin for this style of checkbox.
Square Skin iCheck
Wrap with .skin.skin-square for square and colored checkbox. Have to do color changes using JS.
Flat Skin iCheck
Wrap with .skin.skin-flat for Flat colored checkbox. Have to do color changes using JS.
Line iCheck Checkbox
Wrap with .skin.skin-line for line checkbox. Have to do color changes using JS.
Polaris Skin iCheck
Wrap with .skin.skin-polaris for polaris checkbox.
Futurico Skin iCheck
Wrap with .skin.skin-futurico for futurico checkbox.
iCheck Radio Buttons
Minimal iCheck Radio Option
Wrap with .icheck_minimal with .skin to use another icheck radio style.
Filled Skin iCheck Radio
Wrap with .skin.skin-square for square and colored radio. Have to do color changes using JS.
Flat Skin iCheck Radio
Wrap with .skin.skin-flat for Flat colored radio. Have to do color changes using JS.
Line iCheck Radio
Wrap with .skin.skin-line for line Radio. Have to do color changes using JS.
Polaris Skin iCheck Radio
Wrap with .skin.skin-polaris for polaris radio.
Futurico Skin iCheck Radio
Wrap with .skin.skin-futurico for futurico radio.