Bootstrap button group radio example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, you will learn how to create button group radio in Bootstrap.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name
  • Includes css in html page

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
	<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
		
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
		
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
	</script>
		
	<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
	</script>

Step 3: Define its class name

After that, create the button group radio with a class name .form-check-input.

  <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
          Default radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
        <label class="form-check-label" for="flexRadioDefault2">
          Default checked radio
        </label>
      </div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html>

<head>
	<title> Bootstrap </title>
	
	<meta charset="utf-8">
	
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
		
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
		
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
	</script>
		
	<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
	</script>
<style>
		h1 {
			color:rgb(230, 76, 71);
		}
		
    </style>
</head>

<body>
	<h1>aGuideHub</h1>
	
	<h4>Group button radio</h4>
    
    <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
        <label class="form-check-label" for="flexRadioDefault1">
          Default radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
        <label class="form-check-label" for="flexRadioDefault2">
          Default checked radio
        </label>
      </div>
</body>

</html>	

Check the output of the above code example.

Bootstrap, Group, Button, Radio

All the best 👍

Follow me on Twitter