How to create a dropdown menu button align to the right with Bootstrap

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">

Menu déroulant aligné à droite avec bootstrap

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

Hi, I'm Ben, the Founder of moonbooks.org. I work as a research scientist specializing in Earth satellite remote sensing, particularly focusing on Fire detection using VIIRS and ABI sensors. My areas of expertise include Python, Machine Learning, and Open Science. Feel free to reach out if you notice any errors on the site. I am constantly striving to enhance it. Thank you!

How to create a dropdown menu button align to the right with Bootstrap

References

Benjamin

Skills