Checkbox Style

In response to any question in Yes/No, or done/not done, the most common use is of checkboxes. Checkboxes are a small box that is ticked or marked in response to any question.

For any web designer, checkboxes are essential in almost every website. However, giving these checkboxes a touch of attractiveness and nice effects will generate much more user interaction. Find the suitable checkbox designs available in Boostrap Rev.

The checkbox in Bootstrap Rev is in thorough practice nowadays. And anyone can use it by going through the templates.

Default checkbox input

It is the basic checkbox style where the user can mark a tick by clicking on the small box. To implement it, copy and paste the given code into your code editor.

How to use it?

  • form-check is the default class for this style.

    • The input tag is for the checkbox with the id as default.

    • You can utilize the label tag for the name of the checkbox. 


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

Default switch checkbox input

The checkbox of this design has a toggling switch. It slides when someone clicks on it. It is also a basic checkbox design, highly in use.

How to use?

  • form-switch is the class for switch checkbox style.

    • The input tag is for the checkbox with the id as flexSwitchCheckDefault

    • One can use the label tag for the value of the checkbox. 


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

Custom Icon Checkbox

Have you got fed up with the same icon in the checkbox? Presently, with the styling parts of the Bootstrap Rev, you can make customizations on the symbol. Use this style to get a different eye-catching icon on the checkbox.

The icon used here is of Bootstrap. You can use any icon depending on your choice.

How to use it?

  • form-check-s1 is the class by Bootstrap Rev. It is to select this checkbox style.

Replace Icon

Step 1: Replace icon classes with bi bi-check in label tag.

How to change color of icon

Step 1: Use .form-check-s1 label:before class target and change the color to your theme color. 


<div class="form-check-s1">
	<input type="checkbox" class="form-check-s1-input" id="form-check-s1">
	<label for="form-check-s1" class="form-check-s1-label bi bi-check"><span>Custom icon Checkbox</span></label>
</div>

Custom icon Checkbox alt

This one is the same as above. You can use the icon that you want. To make it more realistic, use this design with shadow effects. It will give you a nice touch of materialism.

Make it more interactive by modifying it.

How to use?

  • Use s2 instead s1 in form-check-s1 to get this style.

How to change color of icon

Step 1: Use .form-check-s1.s2 label:before class target and change the color to your theme color.

How to change backgound of icon

Unchecked: Use .form-check-s1 label:after class target and change the background-color to your theme color.

Checked: Use .form-check-s1.s2 input:checked + label:after class target and change the background-color to your theme color. 


<div class="form-check-s1 s2">
	<input type="checkbox" class="form-check-s1 s2-input" id="form-check-s1-s2">
	<label for="form-check-s1-s2" class="form-check-s1 s2-label bi bi-check"><span>Custom icon Checkbox alt</span></label>
</div>

Full Checkbox

In this design, get a checkbox that will get entirely checked once clicked. The shade covering the tickbox will be equivalent to the subject shading one looks over the shading palette. One can make more modifications to make it look even more elegant. No use of icon is here. However, you can also add it using the above classes.

How to use?

  • Use form-check-s3 class to select this checkbox style.

How to change backgound of checkox

Unchecked: Use .form-check-s3 label.form-check-s3-label:before class target and change the background-color and border to your theme color.

Checked: Use .form-check-s3 label.form-check-s3-label:after class target and change the background-color and border to your theme color. 


<div class="form-check-s3">
	<input type="checkbox" class="form-check-s3-input" id="form-check-s3">
	<label for="form-check-s3" class="form-check-s3-label"><span>Full Checkbox</span></label>
</div>

Toggle Checkbox

Get a switch that toggles between On and Off. The color will be the same as that of the theme color. However, you can also change its color as per your need. The steps to change its color is mentioned below.

How to use?

  • Use form-check-s4 class to select styling using this checkbox.

    • There are two span tags. One is for On while the other is for Off.

How to change backgound of toggle

Unchecked Part: Use .form-check-s4 label.form-check-s4-label:before class target and change the background-color and border to your theme color.

Checked Part: Use .form-check-s4 label.form-check-s4-label:after class target and change the background-color to your theme color. 


<div class="form-check-s4">
	<input type="checkbox" class="form-check-s4-input" id="form-check-s4">
	<label for="form-check-s4" class="form-check-s4-label"><span>On</span><span>Off</span></label>
</div>