0
0
Bootsrapmarkup~5 mins

Dropdown menu alignment in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Dropdown menus help users pick options. Aligning them well makes the page look neat and easy to use.

When you want the dropdown menu to open aligned to the left side of the button.
When you want the dropdown menu to open aligned to the right side of the button.
When you want to adjust dropdown alignment for better mobile or desktop display.
Syntax
Bootsrap
Use these Bootstrap classes on the dropdown menu element:

.dropdown-menu-start  // aligns menu to the left
.dropdown-menu-end    // aligns menu to the right

These classes control where the dropdown menu appears relative to the toggle button.

Make sure your Bootstrap CSS is included for these classes to work.

Examples
This dropdown menu opens aligned to the left side of the button.
Bootsrap
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Left Align
  </button>
  <ul class="dropdown-menu dropdown-menu-start">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>
This dropdown menu opens aligned to the right side of the button.
Bootsrap
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Right Align
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>
Sample Program

This page shows two dropdown buttons. Each button's menu opens aligned differently: left and right. The menus have two items each. The page uses Bootstrap 5.3 CSS and JS from CDN.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Dropdown Alignment</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="p-4">
    <h1>Dropdown Menu Alignment Examples</h1>
    <div class="mb-3">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Left Align
        </button>
        <ul class="dropdown-menu dropdown-menu-start" aria-label="Left aligned dropdown">
          <li><a class="dropdown-item" href="#">Left Action 1</a></li>
          <li><a class="dropdown-item" href="#">Left Action 2</a></li>
        </ul>
      </div>
    </div>
    <div class="mb-3">
      <div class="dropdown">
        <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          Right Align
        </button>
        <ul class="dropdown-menu dropdown-menu-end" aria-label="Right aligned dropdown">
          <li><a class="dropdown-item" href="#">Right Action 1</a></li>
          <li><a class="dropdown-item" href="#">Right Action 2</a></li>
        </ul>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Use aria-label on the dropdown menu for screen readers to improve accessibility.

Dropdown toggle buttons should have aria-expanded attribute updated automatically by Bootstrap.

Test dropdown alignment on different screen sizes to ensure good user experience.

Summary

Bootstrap provides classes to align dropdown menus: dropdown-menu-start and dropdown-menu-end.

Aligning dropdown menus helps keep your page tidy and easy to use.

Always include accessibility attributes like aria-label for better support.