Bootstrap dropdown menu not visible though exist
I have below html page configured through thymeleaf and using bootstrap 4.4.1->
<body> <div class="container-fluid" id="mainBody"> <div class="row"> <!--Header Section--> <div th:replace="th_header :: th_header" th:remove="tag"></div> <!--Main Body Content--> <div class="body-content"> <div class="row"> <div class="col"> <div class="col-sm-3" style="padding-left: 20px;padding-right: 20px;padding-top: 10px;padding-bottom: 50px;position: fixed;"> <div th:replace="th_sum :: th_sum" th:remove="tag"></div> </div> </div> </div> </div> </div>
Now below is my header file where I am trying to include dropdown menu:
<div class="navbar navbar-default navbar-fixed-top bannerImg"> </div> <div class="navbar newnavbar topnav-right"> <a href="#" tabindex="-1" th:href="@{/search}" th:onclick="disableOnBeforeUnload()" id="searchPage"><i class="fa fa-fw fa-search"></i> Search</a> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div>
I have tried few other examples too but when I click on it it’s not visible. I don’t see any errors in console either.How can I debug this and get to show the dropdown menu.TIA.