0

tengo este dropdown pero me sale directo a la izquierda, quisiera centrarlo con CSS porque estoy usando la version de boostrap 5.1.3 y no tiene la opcion para centrarse solo con boostrap, este es mi código

<div class="btn-group">
  <button type="button" id="btnIrLlave"class="btn dropdown-toggle btn-dropdown" data-bs-toggle="dropdown"aria-expanded="false">
      Nombre de la categoria
  </button>
  <ul class="dropdown-menu" id="ulIrLlave">
      <li><a class="dropdown-item ancho" href="#FILTRO_JUV_45_MAS_K_EL">Combate masculino juvenil -45kg elite</li>
      <li><a class="dropdown-item ancho" href="#FILTRO_JUV_45_MAS_K_EL">Combate masculino juvenil -45kg elite</li>
      ...
  </ul>
</div>

Así es cómo se ve

introducir la descripción de la imagen aquí

1 respuesta 1

1

Puedes crear una clase para alinear el contenido y abarcar el ancho del menú con la del botón de la siguiente manera:

button{
  width: 500px;
}
.menu > li {
  width: 500px;
  text-align: center;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-center">
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle btn-dropdown"  data-bs-toggle="dropdown">Nombre de la categoria</button>
    <ul class="dropdown-menu menu">
      <li><a href="#">Combate masculino juvenil -45kg elite</a></li>
      <li><a href="#">Combate masculino juvenil -45kg elite</a></li>
    </ul>
  </div>
</div>

1
  • Y cuando el dispositivo tenga un ancho diferente a 500px? el 5 ago. 2022 a las 20:39

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.