Dropdown react not working with Bootstrap v4
I have a table and in the last column I have the following dropdown:
<td>
<div>
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" id="dropdownMenu2" type="button">Dropdown</button>
<div aria-labelledby="dropdownMenu2">
<button type="button">Action</button> <button type="button">Another action</button> <button type="button">Something else here</button>
</div>
</div>
</td>
When I click on the dropdown menu it won't open, what could be the problem?
Could it be caused by aria
attributes too data
?
+3
source to share
2 answers
I don't think className attributes work here. If you replace "className" with "class" and just add bootstrap, it works.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</td>
</body>
</html>
0
source to share