A Simple Bootstrap Radio Button for Web Forms

In a previous post I talked about creating a push-button style of radio button for MVC. This blog post will show how to create the same push-button radio button 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 Radio Button

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

Figure 1: Radio buttons wrapped into a button

To create these radio buttones you wrap the radio button within the normal Bootstrap class “checkbox”. You then add a label element with the classes “btn btn-default” around the radio button as shown in the following code:

To make it appear correctly, you have to add the following CSS to align the radio button 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.