Bootstrap 5 Dropdowns Responsive alignment

Last Updated : 29 Jul, 2024

Bootstrap 5 Dropdowns Responsive alignment is used to align dropdowns by using the responsive variation classes. We need to add a breakpoint-specific alignment class to make the dropdown alignment responsive.

Dropdown Responsive alignment class

dropdown-menu{-*}-end: To align the dropdown right with a given breakpoint. Here * can be replaced by sm, md,lg,xl, xxl.
dropdown-menu{-*}-start: To align the dropdown left with a given breakpoint. Here * can be replaced by sm, md,lg,xl, xxl.

Attribute Required:

data-bs-display: To utilize responsive alignment, we need to disable dynamic positioning by setting this attribute to "static".

Syntax:

 <ul class="dropdown-menu dropdown-menu-*-**">
   <li>Content</li>
 </ul>

* can be substituted with screen breakpoints like sm,md,lg etc
** can be substituted with alignment options like end, start

Example 1: In this example, The Dropdown menu will be aligned to the end on large screen, and left aligned when not on large screen

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>

</head>

<body>
    <div class="m-2">
        <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"
                    aria-expanded="false">
                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

Example 2: In this example, The Dropdown menu will be aligned to the end on a medium screen and left aligned on the small screen and large screen.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>

</head>

<body>
    <div class="m-2">
        <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"
                    aria-expanded="false">
                GeeksforGeeks is a Computer Science Portal
            </button>
            <ul class="dropdown-menu 
                       dropdown-menu-md-end 
                       dropdown-menu-sm-start 
                       dropdown-menu-lg-start">
                <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>