Open In App

Bootstrap 5 Dropdowns Menu alignment

Improve
Improve
Like Article
Like
Save
Share
Report

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. The .dropdown class is used to design the drop-down menu.

Using Bootstrap 5 dropdown menu alignment classes dropdown menu can be aligned in any direction like the end, start, drop start,dropUp, etc

  • Dropdown Menu Alignment option: The dropdown menu is positioned 100% from the top and along the left side of its parent, by default. We can change its alignment to right, by adding a dropdown-menu-end class.
  • Dropdown Menu Responsive Alignment: To utilize responsive alignment, we need to disable dynamic positioning by adding the data-bs display=”static” attribute. Moreover, we need to add breakpoint-specific alignment class

Below examples illustrate the Bootstrap 5 Dropdowns Menu alignment:

Example 1: In this example, we will learn about Dropdown Menu Alignment options

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Dropdown Menu Alignment Options</h3>
    </div>
    <div class="btn-group ">
        <button type="button"
                class="btn-success dropdown-toggle dropdown-toggle-split"
                data-bs-toggle="dropdown">
            Select Course from GeeksforGeeks </button>
        <div class="dropdown-menu dropdown-menu-end ">
            <a class="dropdown-item" href="#">
                C Programming
            </a>
            <a class="dropdown-item" href="#">
                C++ Programming
            </a>
            <a class="dropdown-item" href="#">
                Java Programming
            </a>
        </div>
    </div>
    </div>
</body>
 
</html>


Output

Dropdown Menu Alignment Options

Example 2: In this example, we will learn about Dropdown Menu Responsive Alignment.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h3>Dropdown Menu Responsive Alignment</h3>
        <div class="btn-group">
            <button type="button"
                    class="btn btn-secondary dropdown-toggle"
                    data-bs-toggle="dropdown"
                    data-bs-display="static">
                GeeksforGeeks is a Computer Science Portal
            </button>
            <ul class="dropdown-menu dropdown-menu-lg-end">
                <li><button class="dropdown-item"
                            type="button">
                    Java
                    </button>
                </li>
                <li><button class="dropdown-item"
                            type="button">
                    Stack
                    </button>
                </li>
                <li><button class="dropdown-item"
                            type="button">
                    Queue
                    </button>
                </li>
            </ul>
        </div>
    </div>
</body>
 
</html>


Output

Dropdown Menu Responsive Alignment

References: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads