In this tutorial, we will learn about bootstrap 4 radio buttons with different examples.
Bootstrap 4 radio button types are very easy, just we need to add the radio input class in radio buttons. If we want to add a new style in the radio buttons, then you can use the third-party plug-ins as well.
First, we need to set up the bootstrap and javascript libraries. Follow the below snippet.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> Then, we need to add the button input fields on the body tag. Follow the below examples to work different types of radio buttons.
Default radio button example
In this example, we have created the simple default radio buttons. Also we used the bootstrap class for a group of radio buttons.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 dafault radio button Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2><b>1. choose any option below</b></h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="defaultradio" id="example1" value="a" checked>
<label class="form-check-label" for="example1">A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="defaultradio" id="example2" value="b">
<label class="form-check-label" for="example2">B</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="defaultradio" id="example3" value="c">
<label class="form-check-label" for="example3">C</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="defaultradio" id="example4" value="d">
<label class="form-check-label" for="example4">D</label>
</div>
</div>
</body>
</html> Inline radio button example
In this example, we need to use the bootstrap class form-check-inline with the div outside the input radio buttons.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Inline radio button example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2><b>1. choose any option below</b></h2>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="defaultradio" id="example1" value="a" checked>
<label class="form-check-label" for="example1">A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="defaultradio" id="example2" value="b">
<label class="form-check-label" for="example2">B</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="defaultradio" id="example3" value="c">
<label class="form-check-label" for="example3">C</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="defaultradio" id="example4" value="d">
<label class="form-check-label" for="example4">D</label>
</div>
</div>
</body>
</html> Bootstrap radio button toggle example
Here, we just need to add the data-toggle=”button” in the button. And need to add the .active class on the button to set the pre-toggling state of a button.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 radio button toggle example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h4>1. Choose any option below</h4>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="team_a" autocomplete="off" checked> Team A
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="team_b" autocomplete="off"> Team B
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="team_c" autocomplete="off"> Team C
</label>
</div>
</div>
</body>
</html>