Example of how to create a simple dropdown menu button with bootstrap:
<div class="btn-group"><button type="button" class="btn btn-default">Menu</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="">item 1</a></li><li><a href="">item 2</a></li><li><a href="">item 3</a></li><li><a href="">item 4</a></li><li><a href="">item 5</a></li></ul></div>
However, by default the dropdown is align to the left. To create a dropdown menu button align to the right change line:
<ul class="dropdown-menu" role="menu">
to:
<ul class="dropdown-menu dropdown-menu-right" role="menu">
Complete source code:
<!DOCTYPE html><html lang="en"><head><title>Mobile Friendly Test Page</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><div class="container"><div class='page-header'><h1>TEST NAVBAR</h1><br><div class='btn-toolbar pull-right'><div class="btn-group"><button type="button" class="btn btn-default">Menu</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right" role="menu"><li><a href="">item 1</a></li><li><a href="">item 2</a></li><li><a href="">item 3</a></li><li><a href="">item 4</a></li><li><a href="">item 5</a></li></ul></div></div><p class="lead">HELLO WORLD !</p></div></div></body></html>
References
| Links | Site |
|---|---|
| Bootstrap Button Groups | w3schools |
| Bootstrap Dropdowns | w3schools |
| Dropdowns | getbootstrap |
| Dropdowns | getbootstrap |
| bootstrap dropdown bubble align right (not push-right) | stackoverflow |
