Bootstrap 5 Dropdowns Dropup
Last Updated :
05 Dec, 2022
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
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 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
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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...