A Simple Bootstrap Radio Button for MVC

In a previous blog post I talked about a simple push button style of radio buttones. This sample push button style can be applied to radio buttons too. This style of button is very easy to do with just some built-in Bootstrap styles and a little extra CSS.

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.