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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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