Open In App

Bootstrap 5 Dropdowns Dropleft

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Dropdowns Dropleft is used to open the dropdown on the left-hand side of the user. Dropdown menus can be set up to the left of the elements by adding .dropstart to the parent element.

Bootstrap 5 Dropdowns Dropleft Class:

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

Syntax:

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

Note: In both the example we will use a float-end class so the dropstart can be easily visible.

Example 1: In this example, we will learn about a Dropdown Dropleft.

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="container">
  
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5  Dropdowns Dropleft</h2>
  
        <div class="btn-group dropstart float-end">
            <button type="button" 
                    class="btn-success dropdown-toggle
                           dropdown-toggle-split" 
                    data-bs-toggle="dropdown"
                    data-bs-display="static"
                    aria-expanded="false">
                Select Course from GeeksforGeeks - DropStart
            </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

Bootstrap 5 Dropdowns Dropleft

Bootstrap 5 Dropdowns Dropleft

Example 2: In this example, we will learn about a Dropdown Dropleft using a split button

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="container">
  
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>Bootstrap 5 Dropdowns Dropleft</h2>
  
        <div class="btn-group dropstart float-end" role="group">
            <button type="button" 
                    class="btn btn-success dropdown-toggle 
                           dropdown-toggle-split" 
                    data-bs-toggle="dropdown" aria-expanded="false">
            </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>
            <button type="button" class="btn btn-success">
                Split Button
            </button>
        </div>
    </div>
</body>
  
</html>


Output

Bootstrap 5  Dropdowns Dropleft

Bootstrap 5 Dropdowns Dropleft

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



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