Bootstrap 5 Dropdowns Dropleft
Last Updated :
27 Dec, 2022
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
Share your thoughts in the comments
Please Login to comment...