Home/ Questions/Q 7800239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T00:34:14+00:00

I’m trying to set up the Pill with Dropdown UI element from Bootstrap, and

  • 0

I’m trying to set up the Pill with Dropdown UI element from Bootstrap, and it’s not showing the dropdown when I click on the caret. I’ve looked through the Bootstrap documentation, and its source) and not found what I’m missing.

Do I need to write custom JS to get it to show up? The docs made it appear that I didn’t, that it should just work.

Here’s the JS I’ve included….

  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>

Here’s the HTML

<ul class="nav nav-pills">
    <li class="dropdown all-camera-dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            All Cameras
               <b class="caret"></b>
           </a>
    <ul class="dropdown-menu">
            <li data-filter-camera-type="all"><a data-toggle="tab" href="#">All Cameras</a></li>
            <li data-filter-camera-type="Alpha"><a data-toggle="tab" href="#">Alpha</a></li>
            <li data-filter-camera-type="Zed"><a data-toggle="tab" href="#">Zed</a></li>
            <li data-filter-camera-type="Bravo"><a data-toggle="tab" href="#">Bravo</a></li>

     </ul>
</li></ul>

Any help would be appreciated

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not working because you’re loading the same plugin multiple times, remove the following scripts from your inclusions and it should work fine:

    Remove

      <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>

    The bootstrap.js script file comes packaged with all of the plugins so you don’t need to load the individual script files again.

    KEEP

      <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
  <script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
  <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
    • 0