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/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.pos{position:absolute;}
</style>
</head>
<body>
<div >
<button type="button" data-toggle="dropdown">
Dropdown button
</button>
<div >
<div >
<input type="radio" value="">
<span>ption 2</span>
</div>
<div >
<input type="radio" value="">
<span>ption 2</span>
</div>
<div >
<input type="radio" value="">
<span>ption 2</span>
</div>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
Use this html stucture for radio button
<div >
<input type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked>
<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/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.pos{position:absolute;}
</style>
</head>
<body>
<div >
<button type="button" data-toggle="dropdown">
Dropdown button
</button>
<div >
<div >
<div >
<input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label for="exampleRadios1">
option 1
</label>
</div>
</div>
<div >
<div >
<input type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked>
<label for="exampleRadios2">
option 2
</label>
</div>
</div>
<div >
<div >
<input type="radio" name="exampleRadios" id="exampleRadios3" value="option1" checked>
<label for="exampleRadios3">
option 3
</label>
</div>
</div>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
You Shold try this code!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div >
<button type="button" data-toggle="dropdown">
Dropdown button
</button>
<div >
<div >
<input type="radio" value="">
<label >ption 2</label>
</div>
<div >
<input type="radio" value="">
<label >ption 2</label>
</div>
<div >
<input type="radio" value="">
<label >ption 2</label>
</div>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>