Ways to use Bootstrap radio buttons with 5 Examples
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.
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:
See online demo and code
Make sure including the Bootstrap CSS file in the <head> section.
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div class="container"> <h1>Are you sure, you want to close?</h1> <div class="radio"> <label> <input type="radio" name="survey" id="Radios1" value="Yes"> Yes </label> </div> <div class="radio"> <label> <input type="radio" name="survey" id="Radios2" value="No"> No </label> </div> <div class="radio disabled"> <label> <input type="radio" name="survey" id="Radios3" value="Notsure" disabled> Not sure </label> </div> </div> |
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.
See online demo and code
The Markup for this demo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="container"> <h1>Are you sure, you want to close?</h1> <label class="radio-inline"> <input type="radio" name="survey" id="Radios1" value="Yes"> Yes </label> <label class="radio-inline"> <input type="radio" name="survey" id="Radios2" value="No"> No </label> <label class="radio-inline"> <input type="radio" name="survey" id="Radios3" value="Notsure" disabled> Not sure </label> </div> |
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:
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:
|
1 |
<link rel="stylesheet" href="build.css"> |
After that, you just need to refer these classes in the radio div elements, e.g.
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="radio radio-info"> <input type="radio" name="survey" id="Radios2" value="No"> <label> No </label> </div> |
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:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div class="form-group"> <label for="radiobtn" class="col-sm-2 control-label">Subscribe for updates?</label> <div class="col-sm-5"> <div class="radio radio-danger"> <input type="radio" name="survey" id="Radios1" value="Yes" checked> <label> Yes </label> </div> <div class="radio radio-danger"> <input type="radio" name="survey" id="Radios1" value="No"> <label> No </label> </div> <div class="radio radio-danger disabled"> <input type="radio" name="survey" id="Radios1" value="declater"> <label> Decide later </label> </div> </div> |
And the code for checkbox:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox checkbox-primary"> <input id="checkbox2" class="styled" type="checkbox" checked> <label for="checkbox2"> Remember me </label> </div> </div> </div> |
For text boxes, I used a custom CSS file which is placed in the head section as well.
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:
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.