Bootstrap 5 Dropdowns Dropup is used to show dropdown menus above the parent elements by using the .dropup class.
Bootstrap 5 Dropdowns Dropup Class:
- dropup: To launch dropdown menus above elements.
Syntax:
<div class="btn-group dropup">
...
</div>
Example 1: This example describes the basic usage of the Dropdowns Dropup in Bootstrap 5
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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 Dropup</h2>
<div class="btn-group dropup mt-5">
<button type="button"
class="btn-success dropdown-toggle
dropdown-toggle-split"
data-bs-toggle="dropdown">
Select Course from GeeksforGeeks-DropUp
</button>
<div class="dropdown-menu dropdown-menu-end ">
<a class="dropdown-item">
C Programming
</a>
<a class="dropdown-item">
C++ Programming
</a>
<a class="dropdown-item">
Java Programming
</a>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: This example describes the basic usage of the Dropdowns Dropup using a split button in Bootstrap 5
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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 Dropup</h2>
<div class="btn-group dropup mt-5">
<button type="button" class="btn btn-success">
Select Course from GeeksforGeeks - DropUp
</button>
<button type="button"
class="btn btn-success
dropdown-toggle
dropdown-toggle-split"
data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu dropdown-menu-end ">
<a class="dropdown-item">
C Programming
</a>
<a class="dropdown-item">
C++ Programming
</a>
<a class="dropdown-item">
Java Programming
</a>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#dropup