# Desplegables Bootstrap nos facilita la creación de botones con listas de opciones desplegables mediante la clase `.dropdown`. Este elemento requiere que el *plugin* JavaScript de Bootstrap esté incluido en la plantilla. La estructura básica para crear un elemento de este tipo es la siguiente: ```markup
Action Another action Something else here
``` Con lo que obtendríamos el siguiente resultado: ![](/files/-LwrBRNzCfdkmZ17IlpC) Sobre el botón principal podemos aplicar todos los colores de botones que hemos visto en la sección titulada "Botones", por ejemplo "`.btn-success`" o "`.btn-danger`". También podemos añadir los modificadores de tamaño "`.btn-lg`" y "`.btn-sm`" para aumentar o disminuir el tamaño del botón del desplegable. Si nos fijamos en el código anterior, para el botón principal se ha usado la etiqueta "`button`" y para los elementos del desplegable la etiqueta "`a`", sin embargo podríamos haber usado solamente la etiqueta "`a`" o solamente la etiqueta "`button`", es decir, funcionan exactamente igual y su apariencia es la misma. > Los atributos que empiezan con "aria" son para crear contenido accesible, para que los lectores de pantalla pueden encontrar las etiquetas correctas a la hora de interpretar el contenido. Para más información consultar la documentación sobre HTML 5 ARIA. Para alinear un menú a la derecha se puede añadir la clase `.dropdown-menu-right` a la lista "`dropdown-menu`", por ejemplo: ```markup
``` ## Encabezados en un desplegable Para añadir un encabezado (o varios) y dividir en secciones un desplegable podemos utilizar la clase `.dropdown-header` de la siguiente forma: ```markup
Dropdown header
Action Another action
``` Con lo que obtendremos: ![](/files/-LwrBRO0g3NqMBt4yhmg) ## Separadores en un desplegable También podemos añadir separadores en un desplegable mediante la clase `.dropdown-divider` de la forma: ```markup
Action Another action Something else here
Separated link
``` Con lo que obtendríamos el siguiente listado con separador: ![](/files/-LwrBRO2gdhc2ExO1gJ6) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ajgallego.gitbook.io/bootstrap-4/componentes-responsive/desplegables.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.