0
301
VistasHow 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>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta