Bootstrap 5 Dropdowns Menu Content Text

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.

Output:

Example 2: In this example, we set a split button with the text at different margins within the dropdown menu.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/dropdowns/#text