How do i create radio buttons using bootstrap5

Published October 08, 2021

In this bootstrap5 example tutorials we will learn how to create radio buttons. To create radio buttons we will use

form-check class and type="radio" attributes.

Let's create radio buttons example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
     
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

      <title>Bootstrap 5 Alert Example</title>
   </head>
   
   <body>
   <div style="    margin: 20px;
    border: solid;
    padding: 20px;
    width: 250px;
    border-block-width: 1px;
    border-color: #118116;">



               <div class="form-check">
                <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
                <label class="form-check-label" for="customRadio1">Mobile Apps</label>
            </div>
            <div class="form-check">
                <input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
                <label class="form-check-label" for="customRadio2">Web applications</label>
            </div>
            <div class="form-check">
                <input type="radio" id="customRadio3" name="customRadio" class="form-check-input">
                <label class="form-check-label" for="customRadio3">Desktop application</label>
            </div>
            <div class="form-check">
                <input type="radio" id="customRadio4" name="customRadio" class="form-check-input">
                <label class="form-check-label" for="customRadio4">Auto</label>
            </div>
</div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

      
   </body>
</html>

Output: When you open this in your browser you will see below output

How to disable the radio button

To disable the radio button we will add disabled attribute on specific radio button.

 <div class="form-check">
    <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
    <label class="form-check-label" for="customRadio1">Mobile Apps</label>
</div>
<div class="form-check">
    <input type="radio" id="customRadio2" name="customRadio" class="form-check-input" disabled>
    <label class="form-check-label" for="customRadio2">Web applications</label>
</div>
<div class="form-check">
    <input type="radio" id="customRadio3" name="customRadio" class="form-check-input">
    <label class="form-check-label" for="customRadio3">Desktop application</label>
</div>
<div class="form-check">
    <input type="radio" id="customRadio4" name="customRadio" class="form-check-input">
    <label class="form-check-label" for="customRadio4">Auto</label>
</div>

Output:

Conclusion: We covered create radio buttons with bootstrap5 and how to disable radio button.

Article Contributed By :

822 Views

Projects By category