0

No consigo alinear verticalmente la segunda fila, quiero poner cada fila con 3 col en cada parte, superior inferior y medio

   
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
      crossorigin="anonymous"
    ></script>
   <div
      class="container text-center bg-light bg-opacity-75 rounded-5 border-3 border border-warning h-50 p-3 position-fixed top-50 start-50 translate-middle"
    >
      <div class="row fixed-top">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
      </div>
      <div class="row align-items-center">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
      </div>
      <div class="row fixed-bottom">
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
        <div class="col">One of three columns</div>
      </div>
    </div>

Uso la documentación https://getbootstrap.com/docs/5.0/layout/columns/#alignment por ejemplo y tampoco sirve, quiero hacer un div con bordes justo en el medio, y en este 3 filas de 3 columnas, en la parte superior medio e inferior

1 respuesta 1

0

En grid bootsrap o el sistema de rejillas un row contiene como metrica 12 objetos o espacios en toda la linea, lo que tienes que hacer es especificar la metrica para cada clase col, como tienes 3 columnas cada una debe contener la clase col-4 indicando que ocupara 4 metricas cada una.

  <div
  class="container text-center bg-light bg-opacity-75 rounded-5 border-3 border border-warning h-50 p-3 position-fixed top-50 start-50 translate-middle">
  <div class="row fixed-top">
    <div class="col-4">One of three columns</div>
    <div class="col-4">Two of three columns</div>
    <div class="col-4">Three of three columns</div>
  </div>
  <div class="row align-items-center">
    <div class="col-4">One of three columns</div>
    <div class="col-4">Two of three columns</div>
    <div class="col-4">Three of three columns</div>
  </div>
  <div class="row fixed-bottom">
    <div class="col-4">One of three columns</div>
    <div class="col-4">Two of three columns</div>
    <div class="col-4">Three of three columns</div>
  </div>
</div>
2
  • gracias por la explicación hacia tiempo que no usaba este framework, no lo recuerdaba el sys. Commented el 30 may. 2022 a las 5:01
  • pero aún sigue sin alinearse Commented el 30 may. 2022 a las 5:01

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.