Question

0

300

Views

How to add a radio button in bootstrap dropdown options

anyone can you please help me how to add a radio button inside of dropdown option. here i am trying to add button getting radio button outside of the dropdown

Please have a look on this ref... images.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  
  <style>
  .pos{position:absolute;}
  </style>
</head>
<body>

                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
    <div class="form-group">
    <input type="radio" class="form-check-input pos" value="">
    <span>ption 2</span>
      
      </div>
      
      <div class="form-group">
    <input type="radio" class="form-check-input pos" value="">
    <span>ption 2</span>
      
      </div>
      
      <div class="form-group">
    <input type="radio" class="form-check-input pos" value="">
    <span>ption 2</span>
      
      </div>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T12:43:42.688Z

Use this html stucture for radio button

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked>
  <label class="form-check-label" for="exampleRadios2">
    option 2
  </label>
</div>

Working Demo

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
  
  <style>
  .pos{position:absolute;}
  </style>
</head>
<body>

                                          
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
    <div class="form-group">
    <div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    option 1
  </label>
</div>  
      </div>
      
      <div class="form-group">
     <div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked>
  <label class="form-check-label" for="exampleRadios2">
    option 2
  </label>
</div> 
      </div>
      
      <div class="form-group">
    <div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option1" checked>
  <label class="form-check-label" for="exampleRadios3">
    option 3
  </label>
</div> 
      
      </div>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
</div>

</body>
</html>

Answer 2 · 2022-07-05T12:43:42.696Z

You Shold try this code!

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
 <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
        <div class="form-check">
          <input type="radio" class="form-check-input pos" value="">
          <label class="form-check-label">ption 2</label>      
      </div>      
      <div class="form-check">
        <input type="radio" class="form-check-input pos" value="">
         <label class="form-check-label">ption 2</label>
      
      </div>      
      <div class="form-check">
            <input type="radio" class="form-check-input pos" value="">
             <label class="form-check-label">ption 2</label>      
      </div>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>

0

300

How to add a radio button in bootstrap dropdown options

2 answers

0

0

Find remote jobs

Andres GPT