Open In App

Bootstrap 5 Dropdowns Dropright

Last Updated : 20 Feb, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

Bootstrap 5  Dropdowns Dropright is used to open the dropdown on the right-hand side of the user, We can one the dropdowns anywhere 

Bootstrap 5  Dropdowns Dropright Class:

  • dropend: This class is used to launch dropdown menus to the right of the button.

Syntax

<div class="btn-group dropend">
     <button type="button" 
                   class="btn dropdown-toggle"
                   data-bs-toggle="dropdown">
            ...
     </button>
      <ul class="dropdown-menu">
           ...
      </ul>
</div>

Below examples illustrate the Bootstrap 5  Dropdowns Dropright:

Example 1: In this example, we will create a dropdown menu and trigger it to right. 

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="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Dropdowns Dropright</h2>
        <div class="btn-group dropend">
            <button class="btn btn-success dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown">
                Click Me!!
            </button>
            <ul class="dropdown-menu">
                <li>
                    <h6 class="dropdown-header 
                        text-success">
                        Non Living Things
                    </h6>
                </li>
                <li><a class="dropdown-item" href="#">
                        Pencil
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Erazer
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Sharpener
                    </a>
                </li>
                <li>
                    <h6 class="dropdown-header 
                        text-danger">
                        Living Things
                    </h6>
                </li>
                <li><a class="dropdown-item" href="#">
                        Human Beings
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Plants
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Animals
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Output:

 

Example 2: In this example, we will create a dropright dropdown menu using a split button.

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="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Dropdowns Dropright</h2>
        <div class="btn-group dropend">
            <button class="btn btn-success dropdown-toggle"
                    type="button"
                    data-bs-toggle="dropdown">
                Click Me!!
            </button>
            <ul class="dropdown-menu">
                <li>
                    <h6 class="dropdown-header 
                        text-success">
                        Non Living Things
                    </h6>
                </li>
                <li><a class="dropdown-item" href="#">
                        Pencil
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Erazer
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Sharpener
                    </a>
                </li>
                <li>
                    <h6 class="dropdown-header 
                        text-danger">
                        Living Things
                    </h6>
                </li>
                <li><a class="dropdown-item" href="#">
                        Human Beings
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Plants
                    </a>
                </li>
                <li><a class="dropdown-item" href="#">
                        Animals
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dropright


N

nikitamehrotra99
Improve
Article Tags :

Explore

Lightbox