0

Estoy trabajando sobre Bootstrap 4 quiero tratar de centrar horizontalmente tanto verticalmente, los elementos que están dentro de mi columna, lo he tratado de hacer con flex pero no lo logro, adjunto mi código

.box-services {
    width: 250px;
    height: 350px;
}
<section class="services">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
      <h1>Lorem</h1>
      <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
    </div>
      <div class="col-lg-4 bg-primary box-services">
        <h4>Lorem</h4>
        <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
      </div>
      <div class="col-lg-4 bg-secondary">
        <h4>Lorem</h4>
        <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
    </div>
    <div class="col-lg-4 bg-primary">
      <h4>Lorem</h4>
      <p>Far far away, behind the word mountains, far from the countries Vokalia.</p>
    </div>
  </div>
</section>

introducir la descripción de la imagen aquí.

Gracias

5
  • ¿Te refieres a los textos cierto?
    – user128299
    Commented el 6 oct. 2020 a las 17:45
  • Es correcto, lo trate de hacer con flex box pero el h1 se divide con el p. Commented el 6 oct. 2020 a las 17:47
  • ¿Dónde aplicaste flexbox exactamente?
    – user128299
    Commented el 6 oct. 2020 a las 18:22
  • div class="col-lg-4 d-flex justify-content-center align-items-center bg-primary box-services"> Commented el 6 oct. 2020 a las 18:26
  • 2
    ¿Responde esto a tu pregunta? Bootstrap 4 Centrar vertical y horizontalmente Commented el 6 oct. 2020 a las 18:48

1 respuesta 1

1

Para lograr el objetivo deseado aplicando FlexBox podrías que hacer lo siguiente:

  • Al contenedor del título y del párrafo dale una disposición flex
  • Usa el valor de column para establecer un direccionamiento vertical de los elementos, ya que inicialmente el uso de flex te va a colocar el h# junto al párrafo p en el eje horizontal uno a lado del otro
  • Como el direccionamiento cambió, entonces usaremos:
    • justify-content con un valor de center para mover los elementos al centro de manera vertical
  • Movemos al párrafo al centro con text-center al centro de su contenedor

Quedando así:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
      .elementos {
        border: 1px solid;
        width: 350px;
        height: 350px;
    }
    </style>
    <section class="container">
      <div class="elementos 
                  d-flex 
                  flex-column 
                  justify-content-center 
                  text-center">
        <h3>Elemento título</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam perferendis odio 
        </p>
      </div>
    </section>

Enlaces de referencia

1
  • Muchas gracias, quedo solucionado. Commented el 6 oct. 2020 a las 18:44

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.