Open In App

How to create a radio button similar to toggle button using Bootstrap ?

Last Updated : 11 Jun, 2020
Comments
Improve
Suggest changes
2 Likes
Like
Report

Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example: 

  • A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch. 
  • The WiFi or Bluetooth option in our phone is another example, that can either be on or off.
     


Radio Button: As the name suggests, it is the concept of the buttons in a radio, where for the first station, we select the first button, for the second station we select the second button and so on. It is like a multiple-choice question where at a time only one button will be active. Here we select from a list of options. For example:

  • Buttons in a FM Radio. 
  • Multiple choice questions in an exam.
     

Example: Create a radio button using Bootstrap.
 

html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>Radio Button</title>
</head>

<body>
    <div class="radio">
        <div class="btn-group btn-group-toggle" 
            data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button1" autocomplete="off" 
                    checked> Radio button 1
            </label>

            <label class="btn btn-primary active">
                <input type="radio" name="button" 
                id="button2" autocomplete="off">
                Radio button 2
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="button" 
                id="button3" autocomplete="off">
                Radio button 3
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="button" 
                id="button4" autocomplete="off">
                Radio button 4
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="button" 
                id="button5" autocomplete="off">
                Radio button 5
            </label>
        </div>
    </div>
</body>

</html>

Important points:

  • We have to add a checked attribute to any one of the radio buttons such that it is pre-selected when the page loads. It is a boolean attribute.
  • The same name has to be given to all the set of elements.
     

Example 2: The following code will help us to understand the difference (in code) to design a toggle and a radio button.
 

html 
<!DOCTYPE html>
<html>

<head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <!-- Popper JS -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>

    <!-- Latest compiled JavaScript -->
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
    </script>

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

    <link rel="stylesheet" type="text/css" 
        href="style.css">

    <link href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    rel="stylesheet">

    <link href=
"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap"
            rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/combined/js/gijgo.min.js" 
        type="text/javascript">
    </script>
    
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/combined/css/gijgo.min.js"
        rel="stylesheet" type="text/css">
    
    <link rel="stylesheet" type="text/css" 
            href="css/lightbox.min.css">

    <script type="text/javascript" src=
        "js/lightbox-plus-jquery.min.js">
    </script>

    <title>Buttons</title>

    <style>
        .toggle,
        .radio {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="toggle">
        <button type="button" 
            class="btn btn-warning" 
            data-toggle="button" 
            autocomplete="off">
            Toggle Button
        </button>
    </div>

    <div class="radio">
        <div class="btn-group btn-group-toggle" 
            data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button1" autocomplete="off"
                    checked> Radio button 1
            </label>

            <label class="btn btn-primary active">
                <input type="radio" name="button" 
                    id="button2" autocomplete="off"> 
                    Radio button 2
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button3" autocomplete="off"> 
                    Radio button 3
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button4" autocomplete="off">
                    Radio button 4
            </label>

            <label class="btn btn-primary">
                <input type="radio" name="button" 
                    id="button5" autocomplete="off"> 
                    Radio button 5
            </label>
        </div>
    </div>
</body>

</html>

Output:

button

M

madhumanti_gupta
Improve
Article Tags :

Explore

Lightbox