Bootstrap 5 Dropdowns Menu Content Text

Last Updated : 30 Jan, 2023

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: There is no specific class used for Dropdowns Menu content Text. To create a button, we use the .btn class, and 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.

HTML

<!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:

Bootstrap 5 Dropdowns Menu content Text

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

HTML

<!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>