A Simple Bootstrap Check Box for Web Forms

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:

<div class="form-group">

  <div class="checkbox">

    <label class="btn btn-default">

      <asp:CheckBox ID="IsJazz" runat="server"

                    Text="Jazz" />

    </label>

  </div>

</div>

<div class="form-group">

  <div class="checkbox">

    <label class="btn btn-default">

      <asp:CheckBox ID="IsCountry" runat="server"

                    Text="Country" />

    </label>

  </div>

</div>

<div class="form-group">

  <div class="checkbox">

    <label class="btn btn-default">

      <asp:CheckBox ID="IsRock" runat="server"

                    Text="Rock" />

    </label>

  </div>

</div>

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!

<style>

  .checkbox .btn,

  .checkbox-inline .btn {

    padding-left: 2em;

    min-width: 8em;

  }

 

  .checkbox label,

  .checkbox-inline label {

    text-align: left;

    padding-left: 0.5em;

  }

</style>

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.

Past Blog Content

Blog Archive

No Comments