Bootstrap 5 Dropdowns Dropleft
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
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
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dropleft
Please Login to comment...