Ways to use Bootstrap radio buttons with 4 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 as well.

In this tutorial, I will show you simply using Bootstrap to create radio buttons along with a plug-in 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 are used that use 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 online by clicking the link or image below:

Bootstrap-radio

See online demo and code

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

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 at the text.

Adding custom style in Bootstrap radio

The custom styles can be added in 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 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” integrity=”sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==” 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 textboxes, I used a custom CSS file which is placed in the head section as well.