BOOTSTRAP : USING DROPDOWN FOR PILL CONTENT

<div class="dropdown"> <a class="btn btn-danger dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Senarai Pegawai </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <ul class="nav nav-pills flex-column list-unstyled" role="tablist"> <li class="nav-item list-unstyled"> <a class="nav-link active umum" data-toggle="pill" href="#semua-unit">SEMUA UNIT</a> </li> <li class="nav-item list-unstyled"> <a class="nav-link umum" data-toggle="pill" href="#unit-satu">UNIT SATU</a> </li> <li class="nav-item list-unstyled"> <a class="nav-link umum" data-toggle="pill" href="#unit-dua">UNIT DUA</a> </li> <li class="nav-item list-unstyled"> <a class="nav-link umum" data-toggle="pill" href="#unit-tiga">UNIT TIGA</a> </li> <li class="nav-item list-unstyled"> <a class="nav-link umum" data-toggle="pill" href="#unit-empat"> UNIT EMPAT</a> </li> </ul> </div> </div> <div style="margin-top:50px"></div> <!-- Tab panes --> <div class="tab-content"> <div id="welcome" class=" tab-pane fade"> <h1>SELAMAT DATANG KE DIREKTORI PEGAWAI</h1> </div> <div id="semua-unit" class=" tab-pane active"> Semua unit loading... </div> <div id="unit-satu" class="tab-pane fade"> Coming soon </div> <!-- start business data--> <div id="unit-dua" class="tab-pane fade"> Coming soon </div> <div id="unit-tiga" class=" tab-pane fade"> Coming soon </div> <div id="unit-empat" class=" tab-pane fade"> Coming soon </div> <!--improvement tab--> </div> <!--tab content--> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>