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.
<!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
Example 2: In this example, we will learn about a Dropdown Dropleft using a split button
<!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
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dropleft