Bootstrap 4 Radio Buttons in Form Tutorial with Examples

Last updated on: by Digamber
Bootstrap 4 Radio Buttons in form tutorial is going to be discussed in this tutorial. As we know, Radio buttons allow a user to choose one option among other options using HTML forms. Bootstrap is a free and open-source UI framework. It was developed using HTML, CSS, and JavaScript, and it provides beautiful and cross-browser compatible UI components e.g., forms, buttons, menus, typography, and many more.

Creating radio buttons with Bootstrap 4 is very easy, you have to add the radio input class in your radio buttons. Alternatively, if you want to add new style in your radio buttons, then you can use the third-party plug-ins as well.

Set up Bootstrap Library in Your Project

To work with radio buttons using Bootstrap, we need to set up and configure Bootstrap 4 UI library in our project. I suggest you to use Bootstrap CDN to set up Bootstrap in your project.

Paste the below code in the header part of your HTML file.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Import Bootstrap JavaScript Files in Footer

There are lots of components in Bootstrap which are dependent on jQuery and Popper js. Paste the following JavaScript scripts before the closing body tag in your HTML layout. Please paste in the same order as the scripts mentioned in this tutorial.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Bootstrap Starter Template Example

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Default Radio Buttons Example

We’ve created a basic Bootstrap layout to show the radio buttons example. Now, check out below we are about to create a group of radio buttons using Bootstrap class.

<div class="container">
<strong>Which option do you want to choose?</strong>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="a" checked>
   <label class="form-check-label" for="exampleRadios1">
   A
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="b">
   <label class="form-check-label" for="exampleRadios2">
   B
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="c">
   <label class="form-check-label" for="exampleRadios3">
   C
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="d">
   <label class="form-check-label" for="exampleRadios4">
   D
   </label>
</div>

Simple Radio Buttons Example with Bootstrap 4

Bootstrap Inline Radio Buttons Example

To create Bootstrap inline radio buttons use the form-check-inline class with the div outside the radio buttons the same as in the example below.

<div class="container">
<h4>Which option do you want to choose?</h4>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="a" checked>
   <label class="form-check-label" for="exampleRadios1">
   A
   </label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="b">
   <label class="form-check-label" for="exampleRadios2">
   B
   </label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="c">
   <label class="form-check-label" for="exampleRadios3">
   C
   </label>
</div>
<div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="d">
   <label class="form-check-label" for="exampleRadios4">
   D
   </label>
</div>

Demo of Inline Radio Buttons

Create Bootstrap Radio Button Group

To create radio button group in Bootstrap is very easy, just add the following code in your HTML layout.

Bootstrap Radio Button Toggle State

To trigger the active state in the Bootstrap radio button we need to pass data-toggle="button" in the button. You should add .active class and arai-pressed=”true” in button to set the pre-toggling state of a button.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Toggle Me
</button>
<div class="container">
<h4>Which car do you have?</h4>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
   <label class="btn btn-secondary active">
   <input type="radio" name="options" id="hatchback" autocomplete="off" checked> Hatchback
   </label>
   <label class="btn btn-secondary">
   <input type="radio" name="options" id="sedan" autocomplete="off"> Sedan
   </label>
   <label class="btn btn-secondary">
   <input type="radio" name="options" id="suv" autocomplete="off"> SUV
   </label>
</div>

Check out the demo

Adding Custom Style to Radio Buttons

Adding custom styling to radio buttons in bootstrap can easily be done using 3rd party plug-ins and custom css. I will create a custom style and add it to style radio buttons in Bootstrap.

Add the following code in your HTML template.

<div class="container">
	<div class="row">
		
<div class="custom-radio-button">
  <div>
    <input type="radio" id="color-red" name="color" value="color-red" checked>
    <label for="color-red">
      <span>
      </span>
    </label>
  </div>
  
  <div>
    <input type="radio" id="color-blue" name="color" value="color-blue">
    <label for="color-blue">
      <span>
      </span>
    </label>
  </div>
  
  <div>
    <input type="radio" id="color-orange" name="color" value="color-orange">
    <label for="color-orange">
      <span>
      </span>
    </label>
  </div>
  <div>
    <input type="radio" id="color-pink" name="color" value="color-pink">
    <label for="color-pink">
      <span>
      </span>
    </label>
  </div>
</div>
	</div>
</div>

Then go to your CSS file and include the following code to style custom radio buttons in Bootstrap.

body {
  text-align: center;
  padding-top: 25px;
}
.custom-radio-button div {
  display: inline-block;
}
.custom-radio-button input[type="radio"] {
  display: none;
}
.custom-radio-button input[type="radio"] + label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.custom-radio-button input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
}
.custom-radio-button input[type="radio"] + label span img {
  opacity: 0;
  transition: all 0.3s ease;
}
.custom-radio-button input[type="radio"]#color-red + label span {
  background-color: red;
}
.custom-radio-button input[type="radio"]#color-blue + label span {
  background-color: blue;
}
.custom-radio-button input[type="radio"]#color-orange + label span {
  background-color: orange;
}
.custom-radio-button input[type="radio"]#color-pink + label span {
  background-color: pink;
}
.custom-radio-button input[type="radio"]:checked + label span {
  opacity: 1;
  background: url("https://www.positronx.io/wp-content/uploads/2019/06/tick-icon-4657-01.png")
    center center no-repeat;
  width: 40px;
  height: 40px;
  display: inline-block;
}

Check out the Demo

Finally, we’ve finished Radio Buttons tutorial with Bootstrap, if you loved this tutorial then don’t forget to share it with others.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recommended Posts:

How to Create Custom File Input with Bootstrap File Input
Bootstrap 4 Form Validation with Validator.js Tutorial
Bootstrap 5 is Coming, Expected Features / Release Date
What are the Differences Between Bootstrap 3 & 4?
Vertically Center HTML Elements using Bootstrap 4