1

Según la nueva versión de Bootstrap para mostrar una ventana modal se utiliza el siguiente código básico:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Cómo puedo centrar el Título de la ventana, he intentado poner text-center pero no funciona

<h5 class="modal-title text-center">Modal title</h5>
2
  • 1
    Con la versión 3.4.0 no deberías tener problemas así como lo has hecho en tu título.
    – Edgard
    el 28 jun. 2019 a las 21:40
  • 2
    @Edgard pero con la versión 4 sí que hay un problema. el 24 nov. 2019 a las 3:47

5 respuestas 5

2

Siempre lo he hecho de esta forma:

<div class="modal-header">
    <h5 class="modal-title col-11 text-center">Modal title</h5>
    <button type="button" class="close col-1" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

También luego de experimentar mucho con Bootstrap lo he hecho así:

<div class="modal-header">
    <h5 class="modal-title w-100 text-center">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
1
  • En realidad este sería un hack de diseño el 24 nov. 2019 a las 3:36
2

para versión 4 de Bootstrap. En lugar de <div class="modal-header"> añade la clase d-block quedando así:

 <!-- Modal Header -->
    <div class="modal-header d-block">
      <h4 class="modal-title text-center">Modal Heading</h4>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
1
  • 2
    En parte esta solución es correcta, solamente se debe tener cuidado con el botón de cierre, pues lo estaríamos dejando al borde (casi por fuera) del modal-content el 24 nov. 2019 a las 3:46
2

yo lo resuelvo aplicando la propiedad en los dos elementos, así:

<div className="modal-header-center">
  <h4 className="modal-title text-center">Modal title center</h4>
  <button type="button" className="close" data-dismiss="modal">&times;</button>
</div>
-1

tan simple como hacer la referencia a la clase titulo y usar css para complementar bootstrap

.modal-title{
    text-align:center;
}
1
  • Incorrecto, no va a funcionar así como lo indicas. el 24 nov. 2019 a las 3:31
-1

Intenta agreado la clase mx-auto de bootstrap, la cual coloca un margen a la derecha e izquierda.

Asi deberia de quedar tu h5

<h5 class="modal-title mx-auto">Modal title</h5>
1
  • Esto se aplicaría solamente respecto al ancho del contenido dentro de la etiqueta h5. No es una forma correcta de centrarlo. el 24 nov. 2019 a las 3:44

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.