Skip to main content
se añadieron 929 caracteres en el cuerpo
Origen Enlace
  <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>

   
    <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

  <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>

   
    <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

Origen Enlace

No se alinea verticalmente

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

  <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>