A Simple Bootstrap Check Box for Web Forms

In a previous post I talked about creating a push-button style of check box for MVC. This blog post will show how to create the same push-button check box using Web Forms. There are only a few minor differences in the CSS and, of course, in the use of a Web Forms server control.

Simple Check Box

As a way to get a better looking check box, you can wrap a check box into a button as shown in Figure 1. What is nice about this style of check box is it really puts the label together with the check box. In addition, on a mobile device it is much easier to hit as the whole button area is clickable.

Figure 1: Check boxes wrapped into a button

To create these check boxes you simply have to wrap the check box within the normal Bootstrap class “checkbox”. You then add a label element with the classes “btn btn-default” around the check box as shown in the following code:

To make it appear correctly, you have to add the following CSS to align the check box and the text correctly within the button. That is all there is to it!

Summary

Creating better looking controls for your web page is sometimes very simple and just involves combing a couple of elements together along with a tiny bit of CSS.