Develop Reference

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>

How to create dropdown menu in bootstrap

I'm working on Bootstrap template to create site similar to this one https://casper.com/
I want to know how to create dropdown menu like Shop/About/Reviews when you click the menu slides down panel with sub menu.
This is not a commercial project I just recreating this casper.com site to learn how to build website with Bootstrap.
Thanks

<div class="container">
<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>Shop</li>
<li>About</li>
<li>Reviews</li>
</ul>
</div>
</div>
Fiddle : https://jsfiddle.net/k04cujnj/

Protractor clicking on dropdown toggle

I am running E2E on my angular application using Protractor. I am running into a very weird problem.
I am using the Bootstrap Dropdown which has some options. I need to click on one of the options.
I referred this answer which tries to do something similar, but doesn't work for me:
Protractor - how to select heavily nested dropdown element?
My structure looks like:
<div id="fc-more-btn" class="btn-group btn-group-sm dropdown" role="group" dropdown="" is-open="ctrl.fcDropdown">
<button type="button" class="btn btn-default dropdown-toggle filetree-btn" tooltip="More Actions" tooltip-trigger="mouseenter" tooltip-placement="bottom" ng-disabled="ctrl.sd.noSelections" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu filetree-dropdown" role="menu">
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewFile()">
New File
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewDir()">
New Folder
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections" ng-click="ctrl.copyFiles()">
Copy
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.clipboardEmpty||ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.pasteFiles()" disabled="disabled">
Paste
</a>
</li>
<li>
<a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||ctrl.sd.multipleSelections" ng-click="ctrl.renameFile()">
Rename
</a>
</li>
</ul>
</div>
In my test, I am trying to click on the Rename link.
The code I have written is:
element(by.css('.dropdown-toggle')).click().then(function(){
//click on rename
});
On running the test, there is a small flicker over the dropdown toggle button, and it seems that the button is clicked. However, the dropdown that should be shown is not shown.
As a result of this, I am not able to simulate a click to rename. Am I doing something wrong?

Try selecting by cssContainingText, very helpful with dropdowns and nested elements!
element(by.cssContainingText('option', 'Rename')).click();

Bootstrap Popover with Dropdown

I'm trying to stick a dropdown inside a popover (both bootstrap), and it 'sort of' works. The first popover I open works fine, but as soon as I open another one (from a different image) it stops working (take a look at this video to see what I mean).
In my HTML I'm making sure every dropdown has a different IDs (by binding my object ID, which is always different) since apparently that's what Bootstrap uses:
<div class="dropdown collection-selection-view">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-<%- id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-<%- id %>"></ul>
</div>
And they render with unique IDs alright.
Example #1:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-40261">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
Example #2:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-39935" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-39935">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
But for some reason it still doesn't work... any ideas of what could be going on?

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