Bootstrap Checkbox: 11 Styles with Demos Online

Checkbox in Bootstrap framework

The Bootstrap framework has built-in classes to use checkboxes in the forms of your web pages. By using those classes, the checkbox will take the default style as well.

You may include Bootstrap checkbox in a form independently, just like ordinary HTML forms and also include this in textboxes to add functionality like enable/disable a textbox.

In this tutorial, I will show you examples of using single and multiple checkboxes along with other possibilities in Bootstrap related to the checkbox.

A demo to use checkbox Bootstrap in a form

In this example, a checkbox is created in a simple form of Bootstrap. The form is basically a sign-in form where a user is given an option to “Remember me” by clicking the checkbox.

See online demo and code

In the code, you can see a checkbox is created by using the simple code:

 

An example of multiple checkboxes

In this example, multiple checkboxes are created to allow users making multiple selections.

See online demo and code

Multiple checkboxes are created by using the checkbox class in each div that contains checkboxes. The last checkbox is disabled.

In the active checkboxes, as you bring the mouse over the text or label, the hand icon will be shown. While in the “Bootstrap” checkbox, which is disabled, the ‘ban-circle’ icon is shown that represents it cannot be selected.

Inline Multiple checkboxes example

In this example of Bootstrap checkbox, I will use inline checkboxes rather each at the new line (that I used in above example).

See online demo and code

You can see in the output, the checkboxes are inline. This is done by using the class provided by Bootstrap: checkbox-inline.

The checkbox-inline class is used in the label tag for each checkbox. Just like in the above example, first four checkboxes (PHP, CSS, Java and HTML) are enabled where the hand icon is shown as you bring the mouse over it. Whereas the last (Bootstrap checkbox) is disabled with a ban-circle icon.

Pretty looking checkboxes by Bootstrap

You may also apply customized styles in checkboxes as using the Bootstrap framework. For that, custom CSS can be designed or available third party plug-ins can be used.

I will show you a few styles of designing checkboxes by a simple third party plug-in awesome-bootstrap-checkbox. It simply requires referring two CSS files in the head section where one is hosted at CDN and second can be hosted at your own server.

Let me show you a few styles followed by step by step instructions to set up this.

See online demo and code

You can see a list of different styles that look nice by using the plug-in.

This is how you may set up this plug-in to create Bootstrap checkboxes:

Step 1:

Refer the font-awesome.min.css CSS file:

<link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css”>

Step 2:

Also, refer build.css file in the head section:

<link rel=”stylesheet” href=”build.css”>

You may get the style in the github website, here. This is a small file that you can host in your own server.

Step 3:

Refer classes in the input checkbox tag’s div elements. The class names match the pattern of Bootstrap style, for example:

checkbox-warning, checkbox-primary etc.

The complete code to create a checkbox can be:

 

Another style:

 

The complete code using different styles can be seen in the demo page or visit the plug-in site by the link given below.

An example to use checkbox in a form

In this example, I will use a few above created checkbox styles in a Bootstrap form. So checkbox code mixes up with some other controls of the form to show how it looks.

See online demo and code

You can see in the figure and demo page, the form uses different controls including text boxes, select dropdown and a few different styles of checkboxes. The checkboxes are using the awesome-bootstrap-checkbox add-on and you can see how it mixes up with other form elements.

In the head section, the dependency files are included. That is:

 

 

While the head section also includes a custom CSS style which is applied to form controls.

Reference and credit for this section: Plug-in URL

Attaching a checkbox to textbox example

You may attach a checkbox to a textbox by using built-in classes. This can be useful for different scenarios.

See online demo and code

You can see the figure or output of the above example that two textboxes are shown. A checkbox is attached to the left of checkbox while in the other textbox the checkbox is attached to the right side.

For that, the input-group-addon class is used in a span element that contains the checkbox.

If you add the textbox code before that span, the checkbox will be attached at the right side. While If the code is placed after the span element that contained checkbox code, the checkbox will be added to the left.

You may also add custom classes to style the textbox and span element that contains a checkbox. A demo is shown below:

See online demo and code

Following CSS classes are created, that you may change as per the need of the project.

For textbox:

 

For the span tag containing the checkbox:

These classes are added in addition to the built-in classes in the input tag that creates a textbox and span tag.

Turn Bootstrap checkbox into switches

You may create beautiful switches based on the checkboxes that use Bootstrap classes along with jQuery. The good looking switches can enhance the user experience and make your forms more interactive.

Have a look at a few demos of creating Bootstrap checkbox based switches. After that, you may also see the link for a detailed guide to setup on your website.

Demo 1: on/off switch

The on and off switch with options to get the current selected value of the checkbox. That is if checked or on, the true will return otherwise false:

See online demo and code

Demo 2: Various colors switches using checkboxes

Create pre-defined themes switches as you generally use for other Bootstrap components like buttons. Have a look:

See online demo and code

Using other text than On/Off

Of course, you may set the text as per the context of your form. For example, a checkbox Bootstrap switch for True/False or Agree/Do not agree etc.:

See online demo and code

Similarly, you may create different sized switches, setting different colors for On/Off states and use other options. I have written a detailed guide about this awesome checkbox based switches.

Using checkboxes in Bootstrap with treeview

The next demo is another nice plug-in that is based on jQuery and uses Bootstrap framework. It enables creating treeview with as many options/choice or values as you require. Against, each value or option, a checkbox is given.

You may see the demo by clicking the link below:

See online demo and code

For details and how to set up this on your website, follow this link: treeview with checkboxes.

Create select dropdown with checkboxes in Bootstrap with jQuery

The following demo shows using the select dropdown with checkboxes so that with each option in the select, a checkbox is attached to it. All the selected options appear on top:

See online demo and code

To learn more about this, visit this tutorial: dropdown with checkboxes.