Como se logra que las filas o columnas tengan un alto? por ejemplo en el reto numero 1 sacha no tiene nada dentro de las columnas pero au...

Pregunta de la clase:
Reto: La grilla de Bootstrap
Luis Felipe Guarin Pastrana

Luis Felipe Guarin Pastrana

Pregunta
student•hace 5 años

Como se logra que las filas o columnas tengan un alto? por ejemplo en el reto numero 1 sacha no tiene nada dentro de las columnas pero aun asi pareciera que hay un espacio, yo cuando quito el contenido dentro de las columnas las filas desaparecen. Se le coloca un alto definido de forma normal usando css o se puede hacer con bootstrap?

 <!--RETO 1-->
        <div class="container" style="background: greenyellow;">

          <!--fila 1-->
          <div class="row">
            <div class="col-4 col-color">
              &nbsp
            </div>
            <div class="col-4 col-color">
              2 of 3
            </div>
            <div class="col-4 col-color">
              3 of 3
            </div>
          </div>


            <!--fila 2-->
          <div class="row">
            <div class="col col-color">
              &nbsp
            </div>
            <div class="col col-color">
              &nbsp
            </div>
            <div class="col col-color">
              &nbsp
            </div>
            <div class="col col-color">
              &nbsp
            </div>
            <div class="col col-color">
              &nbsp
            </div>
            <div class="col col-color">
              &nbsp
            </div>
            <div class="col col-color">
              &nbsp
            </div>
            <div class="col col-color">
              &nbsp
            </div> 
            <div class="col col-color">
              &nbsp
            </div> 
            <div class="col col-color">
              &nbsp
            </div> 
          </div>

          <!--fila 3-->
          <div class="row">
            <div class="col col-color">
              1 of 2
            </div>
            <div class="col col-color">
              2 of 2
            </div>
          </div>

          <!--fila 4-->
          <div class="row">
            <div class="col col-color">
              1 of 5
            </div>
            <div class="col col-color">
              2 of 5
            </div>
            <div class="col col-color">
              3 of 5
            </div>
            <div class="col col-color">
              4 of 5
            </div>
            <div class="col col-color">
              5 of 5
            </div>
          </div>

          <!--fila 5-->
          <div class="row">
            <div class="col col-color">
              1
            </div>
          </div>
        </div>

        <div class="box">

        </div>



        <!--RETO 2  -->

        <div class="container" style="background: hotpink;">
          <!--fila 1-->
          <div class="row">
            <div class="col-6 col-md-3 col-color">
              1 of 4
            </div>
            <div class="col-6 col-md-3 col-color">
              2 of 4
            </div>
            <div class="col-6 col-md-3 col-color">
              3 of 4
            </div>
            <div class="col-6 col-md-3 col-color">
              4 of 4
            </div>
          </div>

          <!--fila 2-->
          <div class="row">
              <div class="col-12 col-md-6 col-lg col-color">
                1 
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                2 
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                3 
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                4 
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                5
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                6
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                7 
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                8 
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                9 
              </div>
              <div class="col-12 col-md-6 col-lg col-color">
                10 
              </div>
          </div>
        </div>

        <div class="box">

        </div>



        <!--RETO 3  -->

        <div class="container" style="background: blueviolet;">
          <!--fila 1-->
          <div class="row">
            <div class="col-12 col-md-6 offset-md-6 col-color">
              1 of 4
            </div>
          </div>

           <!--fila 2-->
           <div class="row">
            <div class="col-8 col-md-8 offset-md-4 col-color">
              1 of 4
            </div>
          </div>

           <!--fila 3-->
           <div class="row">
            <div class="col-3 offset-9 col-md-3 offset-md-0 col-color">
              1 of 4
            </div>

          </div>
        </div>
1 respuestas
para escribir tu comentario
    jonathan gonzalez

    jonathan gonzalez

    student•hace 4 años

    abre una etiqueta style arriba de la etiqueta title y le colocas un higth: 100px; así...

    <!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <style>
            .row div{
                border: white solid 1px;
                height: 100px;
            }
      
        </style>
        <title>Hello, world!</title>
    </head>
    <body>
        <h2>Reto 1</h2>
        <div class="container mt-3" >
            <div class="row" style="background: purple;">
                <div class="col-4">.</div>
                <div class="col-4"></div>
                <div class="col-4"></div>
            </div>
            <div class="row" style="background: purple;">
                <div class="col">.</div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
            </div>
            <div class="row" style="background: purple;">
                <div class="col-6">.</div>
                <div class="col-6"></div>
            </div>
            <div class="row" style="background: purple;">
                <div class="col">.</div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
            </div>
            <div class="row" style="background: purple;">
                <div class="col-12">.</div>
            </div>
        </div>
Curso de Bootstrap

Curso de Bootstrap

Crea sitios web compatibles entre navegadores de forma fácil y práctica con Bootstrap, un framework frontend que te permite definir estructuras y agregar estilos, comportamientos, modals, tooltips y animaciones. Conoce cómo y en qué casos usarlo en este Curso de Bootstrap.

Ir al curso
Curso de Bootstrap
Curso de Bootstrap

Curso de Bootstrap

Crea sitios web compatibles entre navegadores de forma fácil y práctica con Bootstrap, un framework frontend que te permite definir estructuras y agregar estilos, comportamientos, modals, tooltips y animaciones. Conoce cómo y en qué casos usarlo en este Curso de Bootstrap.

Ir al curso