Develop Reference

When tabbing only open dropdown when hitting enter

I have a few dropdowns in a list. Currently, when I hover over the dropdowns they open just fine. However, when tabbing through the website when I tab through each list item the dropdown opens. I would like to only open the dropdown when hitting enter then continue to tab through the menu afterwards while keeping the hover functionality the same.
<div class="container">
<ul>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
<li class="dropdown tabindex="2">
<a class="menu-anchor" href="javascript:;" tabindex="-1">Program Areas</a>
<i class="dropdown-toggle" data-toggle="dropdown" style="display: none;"></i>
<div class="dropdown-menu">
</div>
</li>
</ul>
</div>
CSS
.dropdown:hover > .dropdown-menu {
display: block;
}

How to make dependency in dropdowns which is made with buttons and list

I have task to create dependency of options selected in first dropdown to "filter" options in second dropdown.
For this I've already create "value" in li tag which is acquired from the backend side. FE side is created of buttons and ul, il tags due to some css options etc.
Logic of selection is:
when I choose in first dropdown option1 in the second dropdown should appear only v1.0, when option2 is selected there should be latest and v2.0 etc.
I would like to have code as much easy as possible.
This is my existing HTML page:
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="1"><a rel="name1">option1</a></li>
<li value="2"><a rel="name1">option2</a></li>
<li value="3"><a rel="name1">option3</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="2"><a rel="tag">latest</a></li>
<li value="2"><a rel="tag">v2.0</a></li>
<li value="1"><a rel="tag">v1.0</a></li>
... // more options ...
</ul>
</div>
I've started the JS with:
$('.dropdown-menu li a[rel=name1]').on('click',function() {
var value = $(this).parents('li').val()
With this I'm able to get the value from items in first dropdown but I'm lost how to continue and filter options in the second dropdown. Thank you for any help!

Unless you have a href on the a it is useless - you do not even get a little hand.
Also .val() is reserved for form field which are the only object that can have a value and be valid
Instead use data-attr on the LI itself and give each ul a class
$('#firstSel>li').on('click',function() {
var value = $(this).attr("data-value");
$("#secondSel").find("li").hide()
$("#secondSel").find("li[data-value="+value+"]").show();
});
.dropdown-menu>li { cursor: pointer }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="firstSel">
<li data-value="1">option1</li>
<li data-value="2">option2</li>
<li data-value="3">option3</li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="secondSel">
<li data-value="2">latest</li>
<li data-value="2">v2.0</li>
<li data-value="1">v1.0</li>
</ul>

bootstrap dynamic dropdown in list-group

I'm trying to build a list-group, with each item in the list have an icon which will trigger a dropdown menu. I have a few problems how to position the dropdown, also the glyphicon is not visible at all, unless I put text in the button, and then it has a bad position.
Also I want to build and position the dropdown dynamically with javascript, but first I need to see one that is position correctly, then I will do all the JS DOM work..
Thanks for help!
jsfiddle:
https://jsfiddle.net/DTcHh/24900/
Some code:
<div class="container">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
</ul>
</div> <!--.col-sm-4 -->
<div class="col-sm-8">
</div>
</div>

I've updated the version of bootstrap css to a cdn version which includes the glyphicons. I have then moved the anchor element next to the icon which I believe is what you're looking for. I also removed your custom css which was causing a layout issue.
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-option-vertical"></i>
option
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
https://jsfiddle.net/DTcHh/24902/

HTML align dropdown elements

I want to insert custom element(not a simple link ) to drop down.
Here is my code:
<div class="container">
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">
<div style="display:block">
<span>Action</span>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-check-circle-o fa-lg"></i></button>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-times-circle-o fa-lg"></i></button>
</div>
</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</ul>
</div>
</div>
I faced problem, that I cannot align label of Item like another ones.
Maybe someone can give me a helping hand to make strings in drop down aligned.
Here is a picture what I get:
I use angular, bootstrap and bootstrap-UI.
Fiddle link: http://jsfiddle.net/dJDHd/1165/

Should be a simple addition to your custom CSS file:
.dropdown-menu > li > div {
padding: 0 20px;
}
Demo
Demo 2 (Fork of OP's code - thanks Manoj Kumar)

Bootstrap - Custom Content In Dropdowns?

As the title states, I'm looking to have one single dropdown then have other HTML content in another dropdown submenu, making the dropdown act as a pop out for HTML content. The issue I'm having so far is that once I try just putting a div and code into the UL tag for the secondary drop down, it no longer stays visible on hover. Here is my current markup,
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <i class="icon-caret-down"></i></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<div>
<h1 style="color: #333;">Things</h1>
</div>
</ul>
</li>
The markup is to be honest horrendous as of now, but is there an easier way to have custom content in a Bootstrap sub drop down? This way is causing miles upon miles of issues.

You can think of this way:
<ul class="unstyled">
<li class="dropdown">
<a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<li>
<div class="custom">
<h1 style="color: #333;">Things</h1>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This makes the menu more semantically correct and valid... I feel something you might require in the CSS is:
.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}
Preview
Fiddle: http://jsfiddle.net/praveenscience/yEJ3c/

If you don't need the other children and you're just looking for a rich dropdown, perhaps you want to be using the Popover component instead of the Dropdown component.

Update for Bootstrap 4 - it's now easy to add custom HTML to dropdowns:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item active" href="#">Option one</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">
<div class="row">
<div class="col">Html</div>
<div class="col">Content</div>
<div class="col">Here</div>
</div>
</a>
</div>
</div>