Open In App

Bootstrap 5 Dropdowns Responsive alignment

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
            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

Dropdown responsive alignment

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=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
            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>


Output

Dropdown responsive alignment

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



Last Updated : 30 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads