Checkboxes and Radio Buttons

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.

Color schemes

Square Skin iCheck

Wrap with .skin.skin-square for square and colored checkbox. Have to do color changes using JS.

Color schemes

Flat Skin iCheck

Wrap with .skin.skin-flat for Flat colored checkbox. Have to do color changes using JS.

Color schemes

Line iCheck Checkbox

Wrap with .skin.skin-line for line checkbox. Have to do color changes using JS.

Normal State
Hover State
Checked State
Disabled State
Checked & Disabled State
Color schemes

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.

Color schemes

Filled Skin iCheck Radio

Wrap with .skin.skin-square for square and colored radio. Have to do color changes using JS.

Color schemes

Flat Skin iCheck Radio

Wrap with .skin.skin-flat for Flat colored radio. Have to do color changes using JS.

Color schemes

Line iCheck Radio

Wrap with .skin.skin-line for line Radio. Have to do color changes using JS.

Normal State
Hover State
Checked State
Disabled State
Checked & Disabled State
Color schemes

Polaris Skin iCheck Radio

Wrap with .skin.skin-polaris for polaris radio.

Futurico Skin iCheck Radio

Wrap with .skin.skin-futurico for futurico radio.

Switches

Custom Switch

Use class .custom-switch for Custom Switch

Custom Inline Switch

Use class .custom-control-inline for Inline Custom Switch

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image

Try Layout Builder