Ways to use Bootstrap radio buttons with 5 Examples

Bootstrap radio buttons

Using radio buttons allow selecting one option from many in HTML forms.

While using Bootstrap form, it is quite easy to create radio buttons with Bootstrap classes.

By using your own style or third party plug-ins, you may also create beautiful looking radio buttons.

Custom radio button demo inline radio demo radio button switch

In this tutorial, I will show you simply using Bootstrap to create radio buttons along with plug-ins to style it beautifully.

A simple Bootstrap radio button example

In this demo, a simple page is created with radio buttons. A group of three radio buttons is used that uses the radio class (by Bootstrap).

The class is used in the div while input type radio is used inside the label tags.

See the example/code online by clicking the link or image below:

Bootstrap-radio

See online demo and code

Make sure including the Bootstrap CSS file in the <head> section.

The markup:

Using inline radio buttons

By using the radio-inline built-in class in the label tag, that contains the input radio, you may create the inline radio buttons. In this demo, the same set of radio buttons is used as in above example.

Bootstrap radio inline

See online demo and code

The Markup for this demo

You can see all radio buttons are inline. Instead of the label, you can also use span tag there, however, the user won’t be able to select an option by clicking on the text.

Adding custom style in Bootstrap radio

The custom styles can be added to the Bootstrap radio buttons. I will show you a few demos by using the third party small plug-in, awesome-bootstrap-checkbox, which is just a CSS file.

First, have a look at the style of radio buttons that you can create by using this:

Bootstrap radio custom

See online demo and code

You may see the difference between the first and this example. If you look at the code in this example, it is using an additional class in the radio’s div elements.

The class name is radio-info. Before that, in the head section a CSS file is included:

After that, you just need to refer these classes in the radio div elements, e.g.

This style file is given by the maker and can be seen here.

By using this file, you can create nicely styled radio and checkboxes for your web pages.

See another example of radio group in a form by using this CSS class.

Using custom radio in a Bootstrap form example

Following is a sign-in form example, where a Bootstrap form with custom style is created. First, have a look which is followed by step by step process to design this:

Bootstrap radio pretty

See online demo and code

Step by step to design this form:

First of all Bootstrap library is included in the head section:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”  crossorigin=”anonymous”>

This is followed by the plug-in file for radio and checkbox:

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

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

Note: In above example, I only included build.css file. However, to use the checkbox as well, you have to include font file as well.

This is how Bootstrap radio buttons are created:

And the code for checkbox:

For text boxes, I used a custom CSS file which is placed in the head section as well.

Turning radio buttons in switches example

You may also create beautiful switches based on radio button using Bootstrap framework. The switches allow the users selecting an option with nice user interface. You can see a few in the figure below.

The following example shows the code for creating a radio based switch where I used another jQuery plug-in:

radio switch

See online demo and code

So if you have a form that uses radio buttons for options like:

  • Yes/No
  • Agree / Disagree
  • Male / Female
  • True / False
  • On / Off
  • Enable / Disable
  • Or other

Then you may use this nice plug-in. For complete details of creating switches based on radio buttons and checkboxes, go to this tutorial: Bootstrap switches.