Bootstrap 5 Dropdowns Disabled Last Updated : 26 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Bootstrap 5 Dropdowns Disabled is used to disable some text items in the dropdown. A disabled drop-down list is unusable and un-clickable. Bootstrap 5 Dropdowns Disabled classes: There is no specific class for the Bootstrap 5 Dropdowns disabled feature, we need to add a combination of Bootstrap5 Dropdown classes.Bootstrap 5 Dropdowns Disabled Attribute: disabled: This attribute is used to make the dropdown disabled.Syntax:<div class="dropdown" ...> <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown"> .... </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">...</a></li> <li><a class="dropdown-item disabled"..>...</a></li> .... </ul> ...</div>Example 1: In this example, we set buttons using btn class, the button turned into a dropdown toggle, and disabled the text item in the dropdown. 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body class="m-3"> <div class="container text-center"> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 Dropdowns Disabled</h5> </div> <div class="dropdown p-4 border bg-light text-center dropend" style="height:130px;"> <button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"> Select the city </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"> Agra</a></li> <li><a class="dropdown-item" href="#"> Rampur</a></li> <li><a class="dropdown-item" href="#"> Praygraj</a></li> <li><a class="dropdown-item" href="#"> kanpur</a></li> <li><a class="dropdown-item disabled" href="#" tabindex="-1"> Delhi </a> </li> <li><a class="dropdown-item" href="#"> Lucknow</a></li> </ul> </div> </body> </html> Output:Example 2: In this example, we set multiple buttons with a dropdown toggle to show the menu and use disabled class to disable the text in the dropdown. 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src= "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> </head> <body class="m-3"> <div class="container text-center"> <h1 class="text-success">GeeksforGeeks</h1> <h5>Bootstrap 5 Dropdowns Disabled</h5> </div> <div class="p-3 border bg-light text-center" style="height:120px;"> <div class="btn-group dropstart"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> <button type="button" class="btn btn-danger"> Choose the Phone </button> <span class="visually-hidden"> Toggle Dropdown </span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"> Redmi</a></li> <li><a class="dropdown-item" href="#" >Realme</a></li> <li><a class="dropdown-item" href="#"> Samsung A1</a></li> <li><a class="dropdown-item disabled" href="#" tabindex="-2"> Iphone 12</a></li> <li><a class="dropdown-item" href="#"> Motorola G2</a></li> <li><a class="dropdown-item disabled" href="#" tabindex="-2"> Vivo T1</a></li> </ul> </div> <div class="btn-group dropend"> <button type="button" class="btn btn-primary"> Choose the Company </button> <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> <span class="visually-hidden"> Toggle Dropdown </span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"> Amazon</a></li> <li><a class="dropdown-item" href="#"> GeeksforGeeks</a></li> <li><a class="dropdown-item disabled" href="#" tabindex="-3"> Reliance JIO</a></li> <li><a class="dropdown-item" href="#"> Tesla</a></li> <li><a class="dropdown-item disabled" href="#" tabindex="-3">Messo</a></li> <li><a class="dropdown-item" href="#"> Tata Motors</a></li> </ul> </div> </div> </body> </html> Output:Reference: https://getbootstrap.com/docs/5.0/components/dropdowns/#disabled Comment More infoAdvertise with us B bulbultomar Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Bootstrap-5 +1 More Similar Reads Bootstrap 5 Dropdowns Single Button Bootstrap 5 Dropdowns Single button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items. Bootstrap 5 Dropdowns Single Button class:dropdown-toggle: This class is used to make the button drop down.Syntax:<div class=" 2 min read Bootstrap 5 Dropdowns Split Button Bootstrap 5 Dropdowns split button is used to turn a button into a dropdown toggle with some basic markup. A dropdown button lets the user select from a number of items. Bootstrap 5  Dropdowns split button class:dropdown-toggle-split: This class is used for proper spacing around the dropdown caret i 3 min read Bootstrap 5 Dropdowns Sizing Bootstrap 5 Dropdowns Sizing is used to create dropdowns on different sizes of buttons. It normally works on any size of a button, there can be a single large button or a split small button. Bootstrap 5 Dropdowns Sizing Class: There is no pre-defined class for this you can use the Bootstrap 5 Dropdo 2 min read Bootstrap 5 Dropdowns Dark dropdowns Bootstrap 5 Dropdowns Dark dropdowns are needed to match the navbar or site theme. Add .dropdown-menu-dark to an existing .dropdown-menu to enable darker dropdowns to match a dark navbar or custom style. No changes are necessary for the dropdowns. Prerequisites: Refer to buttons and dropdowns for cu 2 min read Bootstrap 5 Dropdowns Directions Bootstrap 5 Dropdowns Directions are used to change the direction in which we want the dropdown to pop up. The arrow direction is changed based on the direction set for the dropdown to appear. Bootstrap 5 Dropdowns Directions: Dropdown Dropleft: This is used to show dropdown menus left-side of the r 2 min read Bootstrap 5 Dropdowns Dropup 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 u 2 min read Bootstrap 5 Dropdowns Dropright Bootstrap 5 Dropdowns Dropright is used to open the dropdown on the right-hand side of the user, We can one the dropdowns anywhere Bootstrap 5 Dropdowns Dropright Class: dropend: This class is used to launch dropdown menus to the right of the button. Syntax <div class="btn-group dropend"> < 2 min read Bootstrap 5 Dropdowns Dropleft Bootstrap 5 Dropdowns Dropleft is used to open the dropdown on the left-hand side of the user. Dropdown menus can be set up to the left of the elements by adding .dropstart to the parent element. Bootstrap 5 Dropdowns Dropleft Class: dropstart: This class is used to launch dropdown menus to the righ 2 min read Bootstrap 5 Dropdowns Menu items Bootstrap 5 Dropdowns Menu items are a list of options on a website that appears only when a user interacts with the menu, like by clicking on it or hovering over it. Bootstrap 5  Dropdowns Menu items:Bootstrap 5 Dropdowns Menu items Active: It helps to set the state of any item in the dropdown menu 2 min read Bootstrap 5 Dropdowns Active Bootstrap5 Dropdowns Active helps to set the state of any item in the dropdown menu as active. By default, the active item's background color will be set to blue and the text color will be set to white to make it different from the surrounding items. Dropdowns Active Class: active: This class is use 2 min read Like