Develop Reference

Bootstrap 3.3.7 dropdown menu not working on mobile

We populating our dropdowns from a JSON file, but for some reason, it's not working on mobile. Except for the li anchors, I'm following the guidelines from the Bootstrap 3.3.7 documentation: https://getbootstrap.com/docs/3.3/components/#dropdowns.
I also added this, but the issue persists on mobile devices:
$('.dropdown-backdrop').css({display: 'none'});
What could be causing this? Here's my dropdown code.
<div class="dropdown w-100 open" id="attrib">
<button data-device="Umbra 501" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Economy
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a data-filter-dropdown="Small">Small</a></li>
<li><a data-filter-dropdown="Medium">Medium</a></li>
<li><a data-filter-dropdown="Large">Large</a></li>
<li><a data-filter-dropdown="Xlarge">Xlarge</a></li>
</ul>
</div>
UPDATES
This site is AEM 6.5. Also I noticed that all the dropdowns have the same id ("attrib").

Dropdown on icon, bootstrap

I'm using bootstrap (I have bootstrap and jquery included and dropdowns working elsewhere) and tryingo to use my profile icon as a trigger for a dropdown with an option to logout.
My profile icon is showing the downward caret like it's a dropdown, but when I click there is no dropdown triggered.
I can't use a button here, it needs to be tied to the icon.
What exactly am I doing wrong?
<div class="dropdown">
<div class="menu-button profile dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="far fa-user-circle fa-2x"></i>
</div>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</div>

Angular: How to make an element that will close UI bootstrap dropdown on click

I am using Angular UI with bootstrap and I'm using the uib-dropdown. I have auto-close set to outside click, but I want to also create a button in the dropdown that will close it. I tried adding uib-dropdown-toggle to one of the elements but that broke the drop down completely (it wouldn't open at all). How do I create an element that closes the drop down menu?
Relevant code:
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
<ul class="list-unstyled">
<!-- This is the button I want to close the dropdown -->
<li><button type="button" class="btn btn-default">X</button></li>
<li>...</li>
<li>...</li>
</ul>
</div>

Just use is-open attribute to control with and angular variable the "openness" of the dropdown. Then you can programmatically set this variable value to false to close the dropdown.
Here is an example from your code:
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body" is-open="dropdownIsOpen">
<ul class="list-unstyled">
<!-- This is the button I want to close the dropdown -->
<li><button type="button" class="btn btn-default" ng-click="dropdownIsOpen = false">X</button></li>
<li>...</li>
<li>...</li>
</ul>
</div>

Twitter Bootstrap Dropdown button and radio button

What's the logic for drop down button and radio button in twitter bootstrap ...I have seen only drop down menu in twitter bootstrap..Can anybody help me?

Button Dropdowns:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
I'm not sure what you are asking though in terms of radio buttons so I think you should read Bootstrap's Form documentation, available at http://twitter.github.io/bootstrap/base-css.html#forms

Floating footer menu with floating sub-menus

I want to create a floating footer menu using JavaScript and HTML & CSS with other-sub menus for elements in the footer menu. The sub-menus also should float on mouse hoover. Is there any way i can fulfill these needs. Please help and Thank you.

It sounds like you're fairly new to CSS (no offence if you're not!)
To make it easier, I'd suggest using the Twitter Bootstrap framework - it'll save you a lot of time if you're new to CSS and save you from many common pitfalls.
Bootstrap has a Navbar component, which you can be fixed to the bottom of the site. I've attached some sample code, but I'd strongly recommend visiting the Bootstrap website and learning your way around - it'll be well worth your effort.
HTML (make sure you include the bootstrap stylesheet and javascript)
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Submenu Example
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Normal Item
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Dropup Item
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>