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

Create radio buttons with bootstrap5

 

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:

how do i make radio button disable

 

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

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

14 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions