Bootstrap 5 Dropdowns Menu Content text is placed in the freeform in the dropdown menu. There is no special margin to place the text within a dropdown menu.
Pre-requisite: Bootstrap 5 Dropdown, Bootstrap 5 Spacing & Bootstrap 5 Buttons.
Bootstrap 5 Dropdowns Menu content Text classes: No specific class is used for Dropdowns Menu content Text. To create a button, we use the .btn class; to create a dropdown-menu, we use the .dropdown-menu class.
Syntax:
<div class="btn-group" role="group">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
....
</button>
<div class="dropdown-menu">
<p> ... </p>
<p class="mb-*">... </p>
...
</div>
</div>
Note: The * can take values 0,1,2,3 and so on.
Example 1: In this example, we set the text with a different margin within the dropdown menu toggle button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body class="m-2">
<div class="container text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Dropdowns Menu content Text</h5>
</div>
<div class="p-3 border bg-light text-center">
<div class="btn-group dropend" role="group">
<button class="btn btn-success dropdown-toggle"
type="button"
data-bs-toggle="dropdown">
Select the course
</button>
<div class="dropdown-menu border">
<p>
B.tech
</p>
<p class="mb-1">
B.pharma
</p>
<p>
MCA
</p>
<p class="mb-3">
M.tech
</p>
<p>
Bed
</p>
<p class="mb-2">
BSC Agriculture
</p>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we set a split button with the text at different margins within the dropdown menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body class="m-2">
<div class="container text-center ">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Dropdowns Menu content Text</h5>
</div>
<div class="p-3 border text-center bg-light"
style="height:100px;">
<div class="btn-group dropstart">
<button type="button" class="btn btn-primary
dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown">
<button type="button" class="btn btn-danger">
Select the City
</button>
</button>
<div class="dropdown-menu">
<p>
Lucknow
</p>
<p class="mb-1">
Agra
</p>
<p>
Mathura
</p>
<p class="mb-3">
Jaipur
</p>
</div>
</div>
<div class="btn-group dropend ">
<button type="button" class="btn btn-success">
Select the Car
</button>
<button type="button" class="btn btn-info dropdown-toggle
dropdown-toggle-split" data-bs-toggle="dropdown">
</button>
<div class="dropdown-menu">
<p>
Swift Dzire
</p>
<p class="mb-0">
Celerio
</p>
<p>
Maruti suzuki
</p>
<p class="mb-1">
XUV 500
</p>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#text