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: 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" >w3wiki</ 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.
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" >w3wiki</ 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
Contact Us