No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Reto: La grilla de Bootstrap

6/21
Recursos

Tenemos un reto para tí, queremos que crees tu propia grilla. Te damos todas las instrucciones de cómo hacerlo en esta clase. Encuentra la respuesta a este desafío en el repositorio del curso.

Aportes 449

Preguntas 27

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Reto 1:
Valores de las clases de todos los elementos de la…
primera fila: col-4
segunda fila: col
tercera fila: col-6
cuarta fila: col
quinta fila: col-12 o col

Reto 2:
Valores de las clases de todos los elementos de la…
primera fila: col-6 col-md
segunda fila: col-12 col-md-6 col-lg

Reto 3:
Valores de las clases de todos los elementos de la…
primera fila: col-12 col-md-6 offset-md-6
segunda fila: col-8 offset-md-2
tercera fila: col-3 offset-9 offset-md-0

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Retos Grilla Bootstrap</title>
    
    <style>
        
        .col{
            border: 1px solid white;
            height: 70px;
        }  
        
        
        .reto1 .col{
             background-color:darkseagreen;
        }
        
        .reto2 .col{
            background-color:burlywood;
        }
        
        .reto3 .col{
            background-color: firebrick;
            color: white;
        }
    </style>
  </head>
  
  
  <body>
    <br>
    <br>
    <div class="container reto1">
      <h2>Reto 1</h2>
       <div class="row">
            <div class="col"> </div>
            <div class="col"> </div>
            <div class="col"> </div>
       </div>
       
       <div class="row">
            <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 class="col"> </div>
       </div>
       
       <div class="row">
            <div class="col"> </div>
            <div class="col"> </div>
       </div>
       
       <div class="row">
            <div class="col"> </div>
            <div class="col"> </div>
            <div class="col"> </div>
            <div class="col"> </div>
            <div class="col"> </div>
       </div>
        
        <div class="row">
            <div class="col"> </div>
       </div>
        
    </div>
    
    <br>
    <br>
    <br>
    
    <div class="container reto2">
      <h2>Reto 2</h2>
       <div class="row">
            <div class="col col-6 col-md ">Fila 1/Col 1</div>
            <div class="col col-6 col-md ">Fila 1/Col 2</div>
            <div class="col col-6 col-md ">Fila 1/Col 3</div>
            <div class="col col-6 col-md ">Fila 1/Col 4</div>
       </div>
       
       <div class="row">
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 1</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 2</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 3</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 4</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 5</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 6</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 7</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 8</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 9</div>
            <div class="col col-12 col-md-6 col-lg">Fila 2/ Col 10</div>
       </div>
                
    </div>
    
    
    <br>
    <br>
    <br>
    
    <div class="container reto3">
      <h2>Reto 3</h2>
       <div class="row">
            <div class="col col-12 col-md-6 offset-md-6">Fila 1/Col 1</div>
       </div>
       
       <div class="row">
            <div class="col col-8 offset-md-2">Fila 2/ Col 1</div>
       </div>
               
        <div class="row">
            <div class="col col-3 offset-9 offset-md-0">Fila 3/ Col 1</div>
       </div>
                
    </div>
    
    <br>
    <br>
    <br>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>```

El diseño de las columnas de bootstrap se basa en el principio de mobile first. Es decir que las configuraciones por defecto aplican a la interfaz mas pequeña. De allí que la clase col aplique para el tamaño extra-small y si no se especifica lo contrario para los tamaños mas grandes, esta estructura de diseño se respetará a medida que el ancho del viewport se incremente. Por lo tanto, al momento de diseñar la interfaz hay que partir del diseño con el viewport del browser lo mas angosto posible y a partir de allí incrementar el ancho para ajustar el diseño con las otras clases -sm, -md, -lg, -xl

Para quienes estén tomando este curso con la versión v.5.0.2 de Bootstrap, hay un bug que va a afectar la resolución del segundo reto.

Este problema se menciona aquí https://github.com/twbs/bootstrap/issues/34335

Lo mejor sería trabajar con la version 5.0.1, para ello hay que sustituir con:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

y

	<!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

que es esto? me siento mas fuerte

En la versión 5.0, la sección de clases Offset se encuentra en la pestaña de Columnas: https://getbootstrap.com/docs/5.0/layout/columns/#offsetting-columns

una manera de realizar los desafios es empezando por las vistas mas pequeÑas y poco a poco agregar los breakpoints. ya que la manera en que estan configrados en bootstrap son de “mayor que” ejemplo, la linea “col-md-6” le asignara 6columnas a esa grilla cuando se encuentre en pantalla con un tamaÑo MAYOR a 768px

Reto 1

Reto 2

Reto 3

No

entendí

ni pío

de offset…

quedé como si me estuviesen hablando mandarín antíguo…

he visto este vídeo como 20 veces…

reto 3

  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 offset-sm-6"></div>
      </div>
      <div class="row">
        <div class="col-8 col-sm-8 offset-sm-2"></div>
      </div>
      <div class="row">
        <div class="col-3 offset-9 col-sm-3 offset-sm-0"></div>
      </div>
    </div>

    </div>```

listos!!

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>Hello, world!</title>
  <style>
    .col {
      border: solid .5px white;
      background-color: #3ad09f ;
    }
    .tipo1{
      height: 100px;
    }
    .tipo2 .col-lg,
    .tipo2 .col-sm,
    .tipo2 .col-md,
    .fondo{
      background-color:#3ad09f;
      border: solid .5px white;
      height: 100px;
    }
  </style>
</head>

<body>
   <div class="row tipo1">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row tipo1">
      <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 class="col"></div>
    </div>
    <div class="row tipo1">
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row tipo1">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row tipo1">
      <div class="col"></div>
    </div>
    <div class="row tipo2">
      <div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 1</div>
      <div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 2</div>
      <div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 3</div>
      <div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 4</div>
    </div>
    <div class="row tipo2">
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 1</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 2</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 3</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 4</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 5</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 6</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 7</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 8</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 9</div>  
      <div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 10</div>  
    </div> 
    <div class="row tipo3">
      <div class="col-12 col-sm-12 col-md-6 offset-md-6 fondo">Fila 1 / col 1</div>
    </div>
    <div class="row tipo3">
      <div class="col-9 col-sm-9 col-md-8 offset-md-2 fondo">Fila 2 / col 2</div>
    </div>
    <div class="row tipo3">
      <div class="offset-10 col-2 offset-sm-10 col-sm-2 col-md-3 offset-md-0 fondo">Fila 3 /Col 1</div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
  </script>
</body>

</html>

Al principio me sentí muy muy perdido ya que no explicó casi nada de muchas cosas del reto pero me di cuenta que para eso está la documentación y nuestra curiosidad de aprender más allá y no esperar que el profe haga todo, me costó un poco adaptarme pero lo logré!

Acá el código!

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <title>Desafío 1</title>
</head>
<body>
  <style>
  .container.uno .row div{
    border: 1px solid white; 
    background-color:lightgreen; 
    height: 50px
  }

  .container.dos .row div{
    border: 1px solid white; 
    background-color: yellowgreen; 
    height: 50px
  }
  
  .container.tres .row div{
    border: 1px solid white; 
    background-color: lightcoral; 
    height: 50px
  }
  </style>

  <h2>Desafío 1</h2>
  <div class="container uno">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <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 class="col"></div>
    </div>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col"></div>
    </div>
  </div>

  <h2>Desafío 2</h2>
  <div class="container dos">
    <div class="row">
      <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div>
      <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div>
      <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div>
      <div class="col-6 col-sm-6 col-md-3 col-lg-3"></div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
      <div class="col-sm-12 col-md-6 col-lg"></div>
    </div>
  </div>

  <h2>Desafío 3</h2>
  <div class="container tres">
    <div class="row">
      <div class="col-12 col-md-12 offset-md-6"></div>
    </div>
    <div class="row">
      <div class="col-8 col-md-8 offset-md-2"></div>
    </div>
    <div class="row">
      <div class="col-3 offset-9 col-md-4"></div>
    </div>
  </div>
</body>
</html>

Cómo les fue a ustedes?😃

Cumpliendo el reto

Challenge 1:

    <div class="container pt-3">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>
    </div>

Challenge 2:

    <div class="container pt-3">
        <div class="row">
            <div class="col-sm-6 col-md-3">Fila 1/Col 1</div>
            <div class="col-sm-6 col-md-3">Fila 1/Col 2</div>
            <div class="col-sm-6 col-md-3">Fila 1/Col 3</div>
            <div class="col-sm-6 col-md-3">Fila 1/Col 4</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 1</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 2</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 3</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 4</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 5</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 6</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 7</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 8</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 9</div>
            <div class="col-sm-12 col-md-6 col-lg-auto">Fila 2/Col 10 </div>
        </div>
    </div>

Challenge 3:

    <div class="col-12 col-md-6 offset-md-6"></div>
    <div class="col-8 offset-md-2"></div>
    <div class="col-3 offset-9 offset-md-0"></div>

Despues para darle estilos usé la etiqueta <style> en el head quedando así:

<style>
        div[class^="col"] {
            background-color: rgb(218, 72, 72);
            border: solid 0.1px white;
            height: 5rem;
        }
    </style>

Dejo la realización de los tres retos, actualizado a Bootstrap 5:
HTML:

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Retos Grilla Bootstrap</title>
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
      <link rel="stylesheet" href="./main.css">
    </head>
    <body>
      <!-- Reto 1 -->  
      <section class="reto1">
        <div>
          <h1>Reto 1</h1>
        </div>
        <div class="container">
          <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
          </div>
          <div class="row">
            <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 class="col"></div>
          </div>
          <div class="row">
            <div class="col"></div>
            <div class="col"></div>
          </div>
          <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
          </div>
          <div class="row">
            <div class="col"></div>
          </div>
        </div>
      </section>     

      <!-- Reto 2 -->  
      <section class="reto2"> 
        <div>
          <h1>Reto 2</h1>
        </div>
        <div class="container">
          <div class="row">
            <div class="col col-6 col-md"> Fila 1/Col 1</div>
            <div class="col col-6 col-md"> Fila 1/Col 2</div>
            <div class="col col-6 col-md"> Fila 1/Col 3</div>
            <div class="col col-6 col-md"> Fila 1/Col 4</div>
          </div>
          <div class="row">
            <div class="col col-12 col-lg">Fila 2/Col 1</div>
            <div class="col col-12 col-lg">Fila 2/Col 2</div>
            <div class="col col-12 col-lg">Fila 2/Col 3</div>
            <div class="col col-12 col-lg">Fila 2/Col 4</div>
            <div class="col col-12 col-lg">Fila 2/Col 5</div>
            <div class="col col-12 col-lg">Fila 2/Col 6</div>
            <div class="col col-12 col-lg">Fila 2/Col 7</div>
            <div class="col col-12 col-lg">Fila 2/Col 8</div>
            <div class="col col-12 col-lg">Fila 2/Col 9</div>
            <div class="col col-12 col-lg">Fila 2/Col 10</div>
          </div>
        </div>
      </section> 

    <!-- Reto 3 -->  
    <section class="reto3"> 
      <div>
        <h1>Reto 3</h1>
      </div>
      <div class="container">
        <div class="row">
          <div class="col col-12 col-md-6 offset-md-6"> Fila 1/Col 1</div>
        </div>
        <div class="row">
          <div class="col col-8 offset-md-2">Fila 2/Col 1</div>
        </div>
        <div class="row">
          <div class="col col-3 offset-9 offset-md-0">Fila 3/Col 1</div>
        </div>
      </div>
    </section>  

      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
    </body>
</html>

CSS:

h1{
    text-align: center;
    margin-top: 10px;
}


.reto1 .col {
    background-color: blue;
    height: 50px;
    border: 2px solid white;
}

.reto2 .col {
    background-color: rgb(46, 126, 11);
    height: 50px;
    border: 2px solid white;
}

.reto3 .col {
    background-color: rgb(189, 115, 23);
    height: 50px;
    border: 2px solid white;
}

primer desafio

Estimados compañeros de platzi, les comparto la resolución de mis ejercicios para su guía. Si alguien tiene dudas no tenga miedo en preguntar, estoy para compartir lo que he aprendido, saludos cordiales para todos.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>ejercicio1</title>
    <style>
    .col, .col-8, .col-12, .col-3{
         border: 1px solid white;
         height: 70px;
         background-color: aquamarine;
    }
    </style>
</head>
<body>
    <h1>RETO 1</h1>
    <div class="container">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
        </div>

        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
            <div class="col">9</div>
            <div class="col">10</div>
        </div>

        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
        </div>

        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
        </div>

        <div class="row">
            <div class="col">1</div>
        </div> <!--container-->
    </div>

    <h1>RETO 2</h1>
    <div class="container">
        <div class="row">
            <div class="col col-6 col-md"></div>
            <div class="col col-6 col-md"></div>
            <div class="col col-6 col-md"></div>
            <div class="col col-6 col-md"></div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
        </div>
    </div>

    <h1>RETO 3</h1>
    <div class="container">
        <div class="row">
            <div class="col offset-md-6"></div>
        </div>
        <div class="row">
            <div class="col-8 offset-md-2"></div>
        </div>
        <div class="row">
            <div class="col-3 offset-9 offset-md-0"></div>
        </div>    
    </div>

</body>
</html> 

Reto 1:

<style>
            .col{
                border: solid white 1px;
                background-color: green;
                height: 100px;
            }
        </style> 
<div class=container>
            <div class="row">
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
            </div>
            <div class="row">
                <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 class="col"></div>
            </div>
            <div class="row">
                <div class="col"></div>
                <div class="col"></div>
            </div>
            <div class="row">
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col"></div>
            </div>
            <div class="row">
                <div class="col"></div>
            </div>
        </div>

Reto 2:

<style>            
            .col-6 ,.col-12{
                border: white 1px solid;
                background-color: orange;
                height: 100px;
            }
        </style>
<div class="container">
            <div class="row">
                <div class="col-6 col-md">Fila 1/Col 1</div>
                <div class="col-6 col-md">Fila 1/Col 2</div>
                <div class="col-6 col-md">Fila 1/Col 3</div>
                <div class="col-6 col-md">Fila 1/Col 4</div>
            </div>
            <div class="row">
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 1</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 2</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 3</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 4</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 5</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 6</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 7</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 8</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 9</div>
                <div class="col-12 col-md-6 col-lg">Fila 2/Col 10</div>
            </div>
        </div>

Reto 3:

<style>
            .col,.col-3,.col-8{
                background-color: red;
                height: 100px;
                border: solid 1px white;
                color: white;
            }
        </style>
<div class="container">            
            <div class="row">
                <div class="col offset-md-6 col-md-6">Fila 1/Col 1</div>
            </div>
            <div class="row">
                <div class="col-8 offset-md-2">Fila 2/Col 1</div>
            </div>
            <div class="row">
                <div class="col-3 offset-9 offset-md-0">Fila 3/Col 1</div>
            </div>

Les comparto mi resolución del reto

<<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Practicando Grilla</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <style>
      .col {
        border: 1px solid white;
        color: #5dc1b9;
      }
    </style>
  </head>
  <body>
    <div class="container text-center" style="background: #5dc1b9;">
      <div class="row align-items-start">
        <div class="col">
         1
        </div>
        <div class="col">
         2
        </div>
        <div class="col">
          3
        </div>
      </div>
      <div class="row align-items-start">
        <div class="col">
         1
        </div>
        <div class="col">
         2
        </div>
        <div class="col">
         3
        </div>
        <div class="col">
         4
        </div>
        <div class="col">
         5
        </div>
        <div class="col">
         6
        </div>
        <div class="col">
         7
        </div>
        <div class="col">
         8
        </div>
        <div class="col">
         9
        </div>
        <div class="col">
         10
        </div>
      </div>
      <div class="row">
        <div class="col">
          1
        </div>
      </div>
      <div class="row">
        <div class="col">
          1
        </div>
        <div class="col">
          2
        </div>
        <div class="col">
          3
        </div>
        <div class="col">
          4
        </div>
        <div class="col">
          5
        </div>
      </div>
      <div class="row">
        <div class="col">
          1
        </div>
      </div>
    </div>

    <br> <br>

    <div class="container" style="background: #ffb347; color: #ffb347;">
      <div class="row">
        <div class="col-6 col-md-3 col-lg-3"  style="border: 1px solid white">
          1
       </div>  
        <div class="col-6 col-md-3 col-lg-3" style="border: 1px solid white">
          2
        </div>
        <div class="col-6 col-md-3 col-lg-3" style="border: 1px solid white">
          3
        </div>
        <div class="col-6 col-md-3 col-lg-3" style="border: 1px solid white">
          4
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          1
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          2
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          3
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          4
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          5
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          6
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          7
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          8
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          9
        </div>
        <div class="col-12 col-md-6 col-lg" style="border: 1px solid white">
          10
        </div>
      </div>
    </div>

    <br><br>

    <div class="container text-center" style="color: red;">
      <div class="row" style="border: 1px solid white">
        <div class="col-12 col-md-6 ms-md-auto" style="background: red;">.col-12 .col-md-6 .ms-md-auto</div>
      </div>
      <div class="row" style="border: 1px solid white">
        <div class="col-8 col-md-8 offset-md-2" style="background: red;">.col-8 .col-md-8 .offset-md-2</div>
      </div>
      <div class="row" style="border: 1px solid white">
      <div class="col-3 me-auto col-md-3" style="background: red;">.col-md-3</div>
      </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>> 

De esta forma pude entender el TP2! Espero les sirva a los principiantes como yo! PlatziSalud2!

Para el TP2!

Reto resuelto


Me demore un poco pero esta resuelto.

Reto 1

Reto 2

Reto 3

Ya entiendo por que piden tanto boostrap en los empleos.

/* Reto 1 */
<div class="container" style="background-color:turquoise;">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>
    </div>

/* Reto 2 */
<div class="container" style="background-color:wheat;">
        <div class="row">
            <div class="col-6 col-md-3">Fila 1/Col 1</div>
            <div class="col">Fila 1/Col 2</div>
            <div class="col-6 col-md-3">Fila 1/Col 3</div>
            <div class="col">Fila 1/Col 4</div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 1</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 2</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 3</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 4</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 5</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 6</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 7</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 8</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 9</div>
            <div class="col-12 col-md-6 col-lg">Fila 2/Col 10</div>
        </div>
    </div>

/* Reto 3 */
<div class="container">
        <div class="row">
            <div class="col offset-md-6">Fila 1/Col 1</div>
        </div>
        <div class="row">
            <div class="col-8 col-md-8 offset-md-2">Fila 2/Col 1</div>
        </div>
        <div class="row">
            <div class="col col-md-3 offset-10 offset-md-0">Fila 3/Col 1</div>
        </div>
    </div>

Hola, solo a manera de aporte esta lo siguiente:

Segundo Reto

    <div class="container">
        <div class="row">
            <div class="col-6 col-md"></div>
            <div class="col-6 col-md"></div>
            <div class="col-6 col-md"></div>
            <div class="col-6 col-md"></div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
            <div class="col-12 col-md-6 col-lg"></div>
        </div>
    </div>

Segundo desafío tenemos quer tener en cuenta que el segundo desafío lo que varia son las medidas de las filas, desde un col-sm hasta un col-md que son las filas de small y medium

<style>
        .col-6{
            background-color: orange;
            border: 1px solid white;
            height: 100px;
        }
        .col-12{
            background-color: orange;
            border: 1px solid white;
            height: 100px;
        }
    </style>
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container" >
        Hello, world!
        <div class="row">
            <div class="col-6 col-md">
              1
            </div>
            <div class="col-6 col-md">
              2
            </div>
            <div class="col-6 col-md" >
              3
            </div>
            <div class="col-6 col-md" >
              4
            </div>
        </div>

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

    </div>
    <div class="container">
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
        </div>
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
            <div class="col">6</div>
            <div class="col">7</div>
            <div class="col">8</div>
        </div>
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
        </div>
        <div class="row">
            <div class="col">1</div>
            <div class="col">2</div>
            <div class="col">3</div>
            <div class="col">4</div>
            <div class="col">5</div>
        </div>
        <div class="row">
            <div class="col">1</div>
        </div>
    </div>

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

    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 offset-md-6">1</div>
        </div>
        <div class="row">
            <div class="col-8 col-md-8 offset-md-2">2</div>
        </div>
        <div class="row">
            <div class="col-3 col-md-3 offset-md-0 offset-9">3</div>
        </div>
    </div>```

Reto 2

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Main stylesheet -->
    <style>
            .container
      {
          margin-top: 50px;
      }
      .col
      {
          background-color: #FECA6E;
          border: 1px solid white;
          height: 112px;
      }

      .col:hover
      {
          background-image: url("../img/doge.jpg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
      }
    </style>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <title>Hello, world!</title>
  </head>
  <body>
      <div class="container">
        <div class="row">
            <div class="col col-6 col-lg-3">
                <P>Fila 1/Col 1</P>
            </div>
            <div class="col col-6 col-lg-3">
                <P>Fila 1/Col 2</P>
            </div>
            <div class="col col-6 col-lg-3">
                <P>Fila 1/Col 3</P>
            </div>
            <div class="col col-6 col-lg-3">
                <P>Fila 1/Col 4</P>
            </div>
        </div>        
        <div class="row">
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 1</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 2</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 3</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 4</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 5</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 6</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 7</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 8</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 9</P>
            </div>
            <div class="col col-12 col-lg-6 col-xl">
                <P>Fila 2/Col 10</P>
            </div>
        </div>        
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>```

Reto 3

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Main stylesheet -->
    <style>
            .container
      {
          margin-top: 50px;
      }
      .col
      {
          background-color: #D62F32;
          border: 1px solid white;
          height: 112px;
          color: white;
      }

      .col:hover
      {
          background-image: url("../img/doge.jpg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
      }
    </style>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <title>Hello, world!</title>
  </head>
  <body>
      <div class="container">
        <div class="row">
            <div class="col offset-md-6 col-12 col-md-6">
              <p>Fila 1/Col 1</p>
            </div>
        </div>        
        <div class="row">
            <div class="col col-6 col-md-8 offset-md-2">
              <p>Fila 2/col 1</p>
            </div>
        </div>        
        <div class="row">
            <div class="col col-3 offset-9 offset-md-0">
              <p>Fila 3/Col 1</p>
            </div>
        </div>        
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>```

Mi segundo desafió

<div class="container">
        <div class="row">
            <div class="col-sm-6 col-lg-3">col 1</div>
            <div class="col-sm-6 col-lg-3">col 2</div>
            <div class="col-sm-6 col-lg-3">col 3</div>
            <div class="col-sm-6 col-lg-3">col 4</div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 1</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 2</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 3</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 4</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 5</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 6</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 7</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 8</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 9</div>
            <div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 10</div>
        </div>
    </div>

reto completado!!!

<div class="container">
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row">
        <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 class="col"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
      </div>
      <div class="row">
        <div class="col"></div>
      </div>
    </div>
<div class="container">
      <div class="row">
        <div class="col-6 col-sm-6 col-md col-lg"></div>
        <div class="col-6 col-sm-6 col-md col-lg"></div>
        <div class="col-6 col-sm-6 col-md col-lg"></div>
        <div class="col-6 col-sm-6 col-md col-lg"></div>
      </div>
      <div class="row">
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
        <div class="col-sm col-md-6 col-lg"></div>
      </div>
    </div>
<div class="container">
      <div class="row">
        <div style="background-color: red" class="col-12 col-sm-12 col-md-12 offset-lg-6 col-lg-6"></div>
      </div>
      <div class="row">
        <div style="background-color: red" class="col-8 col-sm-8 col-md-8 offset-lg-2 col-lg-8"></div>
      </div>
      <div class="row">
        <div style="background-color: red" class="col-3 offset-9 col-lg-3 offset-lg-0"></div>
      </div>      
    </div>

-> Reto 1

<div class=“container” >
<div class=“row”>
<div class=“col” style=“height:70px;background:blueviolet; border: 1px solid white;” >

    </div>
    <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
   
  </div> 
  <div class="row">
    <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>

  </div>
  <div class="row">
    <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
  </div>
  <div class="row">
    <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>  <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
  </div>
  <div class="row">
      <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
  </div>
 </div>

-> reto 2
<div class=“container” style=“margin-top: 20px;;” >
<div class=“row”>
<div class="col-sm-6 col-lg-3 col-6 col-md-3 " style=“height:70px;background:blueviolet; border: 1px solid white;” >

    </div>
    <div class="col-sm-6  col-lg-3 col-6 col-md-3" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
    <div class="col-sm-6  col-lg-3 col-6 col-md-3" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
    <div class="col-sm-6  col-lg-3 col-6 col-md-3" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
   
  </div> 
  <div class="row">
      <div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
  </div>
 </div>

-> Reto 3
<div class=“container” >
<div class=“row”>
<div class=“col-md-10 offset-md-2 col-lg-6 offset-lg-6 col-sm-12 col-12” style=“height:70px;background:blueviolet; border: 1px solid white;” >

    </div>
    
   
  </div> 
  <div class="row">
    <div class="col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-8 offset-0 col-sm-8 offset-sm-0" style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 col-3 offset-9 col-lg-3 offset-lg-0 col-sm-3 offset-sm-9  " style="height:70px;background:blueviolet; border: 1px solid white;" >
     
    </div>
  </div>

 </div>

Reto 1

    <style>
        .container .row div {
            background-color: #00b894;
            border: 1px solid white;
            height: 90px;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col">&nbsp </div>
            <div class="col"> &nbsp</div>
            <div class="col">&nbsp </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
        </div>
        <div class="row">
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
        </div>
        <div class="row">
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
            <div class="col">&nbsp</div>
        </div>
        <div class="row">
            <div class="col">&nbsp</div>
        </div>
    </div>```

Reto 2

    <style>
        .container .row div {
            background-color: #fdca6d;
            border: 1px solid white;
            height: 90px;
        }
    </style>
  </head>
  <body>
      <!-- .row>.col{fila1/col$}*4 -->
    <div class="container">
            <div class="row">
                <div class="col-6 col-md">fila2/col1</div>
                <div class="col-6 col-md">fila2/col2</div>
                <div class="col-6 col-md">fila2/col3</div>
                <div class="col-6 col-md">fila2/col4</div>
            </div>
    </div>
    <div class="container">
        <!-- .row>.col-xs-2 .col-md{fila2/col$}*10 -->
        <div class="row">
            <div class="col-12 col-md-6 col-lg">fila2/col1</div>
            <div class="col-12 col-md-6 col-lg">fila2/col2</div>
            <div class="col-12 col-md-6 col-lg">fila2/col3</div>
            <div class="col-12 col-md-6 col-lg">fila2/col4</div>
            <div class="col-12 col-md-6 col-lg">fila2/col5</div>
            <div class="col-12 col-md-6 col-lg">fila2/col6</div>
            <div class="col-12 col-md-6 col-lg">fila2/col7</div>
            <div class="col-12 col-md-6 col-lg">fila2/col8</div>
            <div class="col-12 col-md-6 col-lg">fila2/col9</div>
            <div class="col-12 col-md-6 col-lg">fila2/col10</div>
        </div>
    </div>```

Me encanta estos tipos de retos…

Solución:
https://codepen.io/sdiazf99/pen/gObQpZO
Resultado:

Saludos Cordiales.

Desafíos resueltos:

Desafío 1

Desafío 2

Desafío 3

Reto

Parte I

<div class="container">
        <div class="row">
            <div class="col "></div>
            <div class="col "></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>

parte II

<div class="container">
        <div class="row">
            <div class="col-6 col-lg-3 bg-warning">2</div>
            <div class="col-6 col-lg-3 bg-warning">3</div>
            <div class="col-6 col-lg-3 bg-warning">4</div>
            <div class="col-6 col-lg-3 bg-warning">1</div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
            <div class="col-12 col-md-6 col-lg bg-warning">a</div>
        </div>
    </div>

Parte III

<div class="container">
        <div class="row">
            <div class="col-12 col-lg-6 offset-lg-6 bg-warning">1</div>
        </div>
        <div class="row">
            <div class="col-8 col-lg-8 offset-lg-2 bg-warning">2</div>
        </div>
        <div class="row">
            <div class="offset-9 col-3  col-lg-3 offset-lg-0 bg-success">3</div>
        </div>
    </div>```


Reto #3

<div class="container">
        <div class="row">
            <div class="col-12 col-md-6 offset-md-6">Fila 1</div>
        </div>
        <div class="row">
            <div class="col-8 offset-md-2">Fila 2</div>
        </div>
        <div class="row">
            <div class="col-3 offset-9 offset-md-0">Fila 2</div>
        </div>
    </div>```

Segundo listo!

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
      .col-6  {
        border: blue 1px solid;
        height: 100px;
      }
      .col-12 {
        border: 1px solid blue;
        height: 100px;
      }
    </style>
    <title>Hello, world!</title>
  </head>


  <body>

    <div class="container" style="background: gold;" >
      <div class="row">
        <div class="col-6 col-lg-3">
          1
        </div>
        <div class="col-6 col-lg-3">
          2
        </div>
        <div class="col-6 col-lg-3">
          3
        </div>
        <div class="col-6 col-lg-3">
          4
        </div>
    </div>

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

      </div>

     

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>

<style>
    .row>div {
        border: solid 1px white;
        height: 40px;
    }
</style>

<p>Reto # 1</p>
<div class="container" style="background: green;">
    <div class="row">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
        <div class="col">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col">&nbsp;</div>
    </div>
</div>

<p>Reto # 2</p>
<div class="container" style="background: yellow;">
    <div class="row">
        <div class="col-6 col-md-3">F1/C1</div>
        <div class="col-6 col-md-3">F1/C2</div>
        <div class="col-6 col-md-3">F1/C3</div>
        <div class="col-6 col-md-3">F1/C4</div>
    </div>
    <div class="row">
        <div class="col-12 col-md-6 col-lg">F2/C1</div>
        <div class="col-12 col-md-6 col-lg">F2/C2</div>
        <div class="col-12 col-md-6 col-lg">F2/C3</div>
        <div class="col-12 col-md-6 col-lg">F2/C4</div>
        <div class="col-12 col-md-6 col-lg">F2/C5</div>
        <div class="col-12 col-md-6 col-lg">F2/C6</div>
        <div class="col-12 col-md-6 col-lg">F2/C7</div>
        <div class="col-12 col-md-6 col-lg">F2/C8</div>
        <div class="col-12 col-md-6 col-lg">F2/C9</div>
        <div class="col-12 col-md-6 col-lg">F2/C10</div>
    </div>
</div>

<p>Reto # 3</p>
<div class="container" style="background: red;">
    <div class="row">
        <div class="col-12 col-lg-6 offset-lg-6">F1/C1</div>
    </div>
    <div class="row">
        <div class="col-8 offset-lg-2">F2/C1</div>
    </div>
    <div class="row">
        <div class="col-3 offset-9 offset-lg-0">F3/C1</div>
    </div>
</div>

<!doctype html>
<html lang=“en”>
<head>
<!-- Required meta tags -->
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
    .col{
        border: 1px solid black;
        padding: 23px;
    }
</style>
<title>Hello, world!</title>

</head>
<body>
<div class=“container” style=“background: red;”>
<div class=“row”>
<div class=“col”>
1
</div>
<div class=“col”>
2
</div>
<div class=“col”>
3
</div>
</div>
<div class=“row”>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
</div>
<div class=“row”>
<div class=“col”>
5
</div>
<div class=“col”>
5
</div>
</div>
<div class=“row”>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
</div>
<div class=“row”>
<div class=“col”>
7
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=“https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=“sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=“anonymous”></script>
<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js” integrity=“sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=“anonymous”></script>
<script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js” integrity=“sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI” crossorigin=“anonymous”></script>
</body>
</html>

Desafio 1

<div class="container desafioUno">
        <div class="row">
          <div class="col-4"></div>
          <div class="col-4"></div>
          <div class="col-4"></div>
        </div>
        <div class="row">
          <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 class="col"></div>
        </div>
        <div class="row">
          <div class="col-4"></div>
          <div class="col-4"></div>
          <div class="col-4"></div>
        </div>
        <div class="row">
          <div class="col-6"></div>
          <div class="col-6"></div>
        </div>
        <div class="row">
          <div class="col"></div>
          <div class="col"></div>
          <div class="col"></div>
          <div class="col"></div>
          <div class="col"></div>
        </div>
        <div class="row">
          <div class="col"></div>
        </div>
    </div>

Desafio2

<div class="container desafio2">
        <div class="row">
          <div class="col-md col-6">Fila 1/Col 1</div>
          <div class="col-md col-6">Fila 1/Col 2</div>
          <div class="col-md col-6">Fila 1/Col 3</div>
          <div class="col-md col-6">Fila 1/Col 4</div>
        </div>
        <div class="row">
          <div class="col-lg col-md-6 col-12">Fila 2/Col 1</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 2</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 3</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 4</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 5</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 6</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 7</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 8</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 9</div>
          <div class="col-lg col-md-6 col-12">Fila 2/Col 10</div>
        </div>
    </div>

Desafio 3

<div class="container desafio3">
        <div class="row">
          <div class="col-sm-5 offset-sm-6 col">Fila 1/Col 1</div>
        </div>
        <div class="row">
          <div class="col-sm-7 offset-sm-2 col-8">Fila 2/Col 1</div>
        </div>
        <div class="row">
          <div class="col-sm-3 col-2 offset-sm-0 offset-10">Fila 3/Col 1</div>
        </div>
    </div>```

PRACTICA 2 😛

<div class="container"></div>

    <div class="row" id="b">
        <div class="col-6 col-lg-3"></div>
        <div class="col-6 col-lg-3"></div>
        <div class="col-6 col-lg-3"></div>
        <div class="col-6 col-lg-3"></div>
    </div> 

    <div class="row" id="b">
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
        <div class="col-12 col-lg col-md-6"></div>
    </div> 
</div>```

Solución al Reto 3

_




















Solución al Reto 2

_




















<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <style>
      .col{
        border: 1px solid white;
        height: 50px;
        background-color: violet;
      }
      .col-3{
        border: 1px solid white;
        height: 50px;
        background-color: violet;
      }
      .col-8{
        border: 1px solid white;
        height: 50px;
        background-color: violet;
      }
      .col-12{
        border: 1px solid white;
        height: 50px;
        background-color: violet;
      }
      .space{
        height: 100px;
      }
    </style>
  </head>
  <body>

    <div class="container text-center">
      <h2>Desafío 1</h2>
      <div class="row">
        <div class="col">
          &nbsp;
        </div>
        <div class="col">
          &nbsp;
        </div>
        <div class="col">
          &nbsp;
        </div>
      </div>

      <div class="row">

        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>

      </div>

      <div class="row">

        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>

      </div>

      <div class="row">

        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>
        <div class="col"> &nbsp;
        </div>

      </div>

      <div class="row">

        <div class="col"> &nbsp;
        </div>

      </div>
    </div>	

    <div class="space"></div>

    <div class="container text-center">
      <h2>Desafío 2</h2>
      <div class="row row-cols-2 row-cols-md-4">
        <div class="col">
          fila 1/ col 1
        </div>
        <div class="col">
          fila 1/ col 2
        </div>
        <div class="col">
          fila 1/ col 3
        </div>
        <div class="col">
          fila 1/ col 4
        </div>
      </div>

      <div class="row row-cols-1 row-cols-md-2">

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

      </div> 

    </div>

    <div class="space"></div>

    <div class="container text-center">
      <h2>Desafío 3</h2>
      <div class="row">
        <div class="col-12 col-md-6 offset-md-6">fila 1 col 1</div>
      </div>
      <div class="row">
        <div class="col-8 offset-md-2">fila 2 col 1</div>
      </div>
      <div class="row">
        <div class="col-3 offset-9 col-md-3 offset-md-0">fila 3 col 1</div>
      </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

RETO 1

_

  • HTML
  • CSS
  • RESULTADO

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<title>Instituto Superior de Idiomas</title>
</head>
<body>
<div class=“container” style=“background: #2a0088;”>
<!-- Content here -->
Hola Mundo!
</div>
</body>
</html>

Reto 1:

<div class="container" style="background-color: green;">
        <div class="row">
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
        </div>
        <div class="row">
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
        </div>
        <div class="row">
          <div class="col">col-6</div>
          <div class="col">col-6</div>
        </div>
        <div class="row">
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
          <div class="col">col</div>
        </div>
        <div class="row">
          <div class="col">col</div>
        </div>

Mi solucion del reto, no tiene fallas almenos eso creo.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <style>
        .col{
            border: 1px solid white;
            background-color: darkseagreen;
            height: 70px;
        }
        #col2{
            border: 1px solid white;
            background-color: rgb(233, 218, 87);
            height: 70px;
        }
        #col3{
            border: 1px solid white;
            background-color: rgb(231, 86, 60);
            height: 70px;
        }
        
    </style>
  </head>
  <body>
    <div class="container-xxl text-center">
        Reto 1:
        <div class="row">
            <div class="col"> </div>
            <div class="col"> </div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>
        Reto 2:
        <div class="row">
            <div class="col-6 col-sm-6 col-md-3 col-lg-3" id ="col2">Fila 1/Col 1 </div>
            <div class="col-6 col-sm-6 col-md-3 col-lg-3" id ="col2">Fila 1/Col 2 </div>
            <div class="col-6 col-sm-6 col-md-3 col-lg-3" id ="col2">Fila 1/Col 3 </div>
            <div class="col-6 col-sm-6 col-md-3 col-lg-3" id ="col2">Fila 1/Col 4 </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 1 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 2 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 3 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 4 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 5 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 6 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 7 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 8 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 9 </div>
            <div class="col-sm-12 col-md-6 col-lg" id ="col2">Fila 2/Col 10 </div>
        </div>
        Reto 3:
        <div class="row">
            <div class="col-12 col-lg-6 offset-0 offset-lg-6" id ="col3">Fila 1/Col1</div>
            
        </div>
        <div class="row">
            <div class="col-7 col-lg-8 offset-0 offset-lg-2" id ="col3">Fila 2/Col1</div>
        </div>
        <div class="row">
            <div class="col-2 offset-10 col-lg-3 offset-lg-0" id ="col3">Fila 3/Col1</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

<!doctype html>
<html lang=“en”>
<head>
<!-- Required meta tags -->
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<title>Hello, world!</title>
<style>
  .col{
    border: 1px solid white;
    height: 50px;
  }
  .columnas{
    border: 1px solid white;
    height: 50px;
  }
</style>

</head>
<body>
<h1>Reto 1</h1>
<div class=“container” style=“background-color: aquamarine;”>

  <div class="row">
    <div class="col">          
    </div>
    <div class="col">
    </div>
    <div class="col">
    </div>
  </div>

  <div class="row">
    <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 class="col">
    </div>
  </div>

  <div class="row">
    <div class="col">          
    </div>
    <div class="col">
    </div>
  </div>

  <div class="row">
    <div class="col">          
    </div>
    <div class="col">
    </div>
    <div class="col">          
    </div>
    <div class="col">
    </div>
  </div>
  <div class="row">
  </div>

</div>

<h1>Reto 2</h1>

<div class="container" style="background-color: bisque;">
  <div class="row">
    <div class="columnas col-6 col-sm-6 col-md-3">
    </div>
    <div class="columnas col-6 col-sm-6 col-md-3">
    </div>
    <div class="columnas col-6 col-sm-6 col-md-3">
    </div>
    <div class="columnas col-6 col-sm-6 col-md-3">
    </div>
  </div>

  <div class="row">
    <div class="columnas col-12 col-md-6 col-lg">          
    </div>
    <div class="columnas col-12 col-md-6 col-lg">
    </div>
    <div class="columnas col-12 col-md-6 col-lg">
    </div>
    <div class="columnas col-12 col-md-6 col-lg">          
    </div>
    <div class="columnas col-12 col-md-6 col-lg">
    </div>
    <div class="columnas col-12 col-md-6 col-lg">
    </div>
    <div class="columnas col-12 col-md-6 col-lg">          
    </div>
    <div class="columnas col-12 col-md-6 col-lg">
    </div>
    <div class="columnas col-12 col-md-6 col-lg">
    </div>
    <div class="columnas col-12 col-md-6 col-lg">
    </div>
  </div>
</div>

<h1>Reto 3</h1>

<div class="container" >
  <div class="row">
    <div class="columnas col-12 col-lg-6 offset-lg-6" style="background-color: red;">
    </div>
  </div>
  <div class="row">
    <div class="columnas col-8 col-lg-8 offset-lg-2" style="background-color: red;">
    </div>
  </div>
  <div class="row">
    <div class="columnas col-3 offset-9 col-lg-3 offset-lg-0" style="background-color: red;">
    </div>
  </div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>
</html>

Asi me quedo, acepto sugerencias.

<
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> 
  
  <style>
        .col{
        border: 1px solid black;
       }

       h2 {
        text-align: center;
        line-height: 75px;
        color: rgb(193, 136, 247);
       }

       .container {
        margin-top: 30px;
       }

       .reto1 .col {
        height: 100px;
        background-color: aquamarine;
        border-color: aliceblue;
        border-width:2px;
       }

       .reto2 .col {
        height: 100px;
        background-color: rgb(255, 245, 107);
        border-color: rgb(190, 189, 189);
        border-width: 2px;
       }

       .reto3 .col {
        height: 100px;
        background-color: pink;
        border-color: whitesmoke;
        border-width: 2px;
       }
    </style>

</head>
<body>

    <div class="container reto1">
        <h2> RETO 1 </h2>
    
        <div class="row">
             <div class="col"></div>
             <div class="col"></div>
              <div class="col"></div>
        </div>

        <div class="row">
             <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 class="col"></div>
        </div>

          <div class="row">
          <div class="col"></div>
        <div class="col"></div>
        </div>

        <div class="row">
              <div class="col"></div>
             <div class="col"></div>
             <div class="col"></div>
              <div class="col"></div>
        </div>

        <div class="row">
             <div class="col"></div>
        </div>

    </div>

    <div class="container reto2">
        <h2> RETO 2 </h2>

        <div class="row">
            <div class="col col-md-3 col-sm-6 col-6">Fila 1/Col 1</div>
            <div class="col col-md-3 col-sm-6 col-6">Fila 1/Col 2</div>
            <div class="col col-md-3 col-sm-6 col-6">Fila 1/Col 3</div>
            <div class="col col-md-3 col-sm-6 col-6">Fila 1/Col 4</div>
         </div>

        <div class="row">
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 1</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 2</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 3</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 4</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 5</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 6</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 7</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 8</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 9</div>
            <div class="col col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 10</div>
         </div>
    </div>

    <div class="container reto3">
         <h2>RETO 3</h2>

         <div class="row">
             <div class="col col-sm-12  col-md-6  offset-md-6"> 1</div>
         </div>

         <div class="row">
             <div class="col col-sm-8 col-md-8  offset-md-2"> 2</div>
         </div>

         <div class="row">
             <div class="col col-sm-3"> 3</div>
        </div>
    </div>
    
</body>
</html>
> 

reto 3

reto 2

reto 1

//Desafio 1
<!doctype html>
<html lang=“en”>
<head>
<!-- Required meta tags -->
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
    .container{
        margin-top: 25px;
    }
    .col, .col-4, .col-6 {
        background-color: #00B894;
        border: 1px solid white;
        padding: 40px;
    }
</style>
<title>Hello, world!</title>

</head>
<body>
<div class=“container”>
<div class=“row”>
<div class=“col-4”>
One of three columns
</div>
<div class=“col-4”>
One of three columns
</div>
<div class=“col-4”>
One of three columns
</div>
</div>
<div class=“row”>
<div class=“col”>
One
</div>
<div class=“col”>
Two
</div>
<div class=“col”>
Three
</div>
<div class=“col”>
Four
</div>
<div class=“col”>
Five
</div>
<div class=“col”>
Six
</div>
<div class=“col”>
Seven
</div>
<div class=“col”>
Eight
</div>
<div class=“col”>
Nine
</div>
<div class=“col”>
Ten
</div>
</div>
<div class=“row”>
<div class=“col-6”>
One of two columns
</div>
<div class=“col-6”>
One of two columns
</div>
</div>
<div class=“row”>
<div class=“col”>
One
</div>
<div class=“col”>
Two
</div>
<div class=“col”>
Three
</div>
<div class=“col”>
Four
</div>
<div class=“col”>
Five
</div>
</div>
<div class=“row”>
<div class=“col”>
One of one column
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
-->

</body>
</html>

ojala pudiera explicar mas despacio y con un poco mas de claridad, se me dificulta a veces seguirle el ritmo

Estoy trabajando con Bootstrap 5.3.0, en el segundo reto no hubo poder humano de trabajarlo con dos filas (rows), me tocó plantearlo todo en una sola row

hola buen día.
yo hice;
Reto 1:
Valores de las clases de todos los elementos de la…
primera fila: col-4
segunda fila: col
tercera fila: col-6
cuarta fila: col-2-fluid (para que se “estire” y ocupe el 100% del ancho del container)
quinta fila: col-12

Primer ejercicio: fila 1=3 columnas, fila 2=10 columnas, fila 3=dos columnas, fila 4=5 columnas, fila 5=1 columna.

Reto Finalizado! Me gustó mucho ésta practica.
https://github.com/MajoJuanta/GrillaBoostrap

Ya entiendo por que piden tanto BootStrap, saber esto te ayuda a maquetar mas rápido y no perder tanto tiempo en @media
.
Me gusta! 👍

1er reto:

<div class="container" style="background-color: rgb(53, 133, 160)">
      <div class="row">
        <div class="col a">1</div>
        <div class="col a">2</div>
        <div class="col a">3</div>
      </div>
      <div class="row">
        <div class="col a">1</div>
        <div class="col a">2</div>
        <div class="col a">3</div>
        <div class="col a">4</div>
        <div class="col a">5</div>
        <div class="col a">6</div>
        <div class="col a">7</div>
        <div class="col a">8</div>
        <div class="col a">9</div>
        <div class="col a">10</div>
      </div>
      <div class="row">
        <div class="col a">1</div>
        <div class="col a">2</div>
      </div>
      <div class="row">
        <div class="col a">1</div>
        <div class="col a">2</div>
        <div class="col a">3</div>
        <div class="col a">4</div>
        <div class="col a">5</div>
      </div>
      <div class="row">
        <div class="col a">1</div>
      </div>
    </div>

2do reto:

<div class="container" style="background-color: rgb(53, 133, 160)">
      <div class="row">
        <div class="col-sm-6 col-md-6 col-lg a">1</div>
        <div class="col-sm-6 col-md-6 col-lg a">2</div>
        <div class="col-sm-6 col-md-6 col-lg a">3</div>
        <div class="col-sm-6 col-md-6 col-lg a">4</div>
      </div>
      <div class="row">
        <div class="col-lg col-md-6 a">2.1</div>
        <div class="col-lg col-md-6 a">2.2</div>
        <div class="col-lg col-md-6 a">2.3</div>
        <div class="col-lg col-md-6 a">2.4</div>
        <div class="col-lg col-md-6 a">2.5</div>
        <div class="col-lg col-md-6 a">2.6</div>
        <div class="col-lg col-md-6 a">2.7</div>
        <div class="col-lg col-md-6 a">2.8</div>
        <div class="col-lg col-md-6 a">2.9</div>
        <div class="col-lg col-md-6 a">2.10</div>
      </div>
    </div>

3er reto:

<div class="container" >
      <div class="row">
        <div class="col-12 col-md-6 offset-md-5 a">1</div>
      </div>
      <div class="row">
        <div class="col-8 col-md-6 col-lg-8 offset-md-2 a">2</div>
      </div>
    <div class="row">
        <div class="col-3 offset-9 offset-md-0 a">3</div>
    </div>

Aquí les dejo el como resolví los retos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <title>Document</title>
    <style>
        .col {
            border: 1px solid white;
            height: 70px;
        }
    </style>
</head>
<body>
    <h1>Reto 1</h1>
    <div class="container text-center" style="background-color: rgb(31, 211, 154);"> 
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col col-12"></div>
        </div>
    </div>
    <h1>Reto 2</h1>
    <div class="container text-center" style="background-color: rgb(28, 235, 49);">
        <div class="row">
            <div class="col col-6 col-sm"></div>
            <div class="col col-6 col-sm"></div>
            <div class="col col-6 col-sm"></div>
            <div class="col col-6 col-sm"></div>
        </div>
        <div class="row">
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
            <div class="col col-12 col-sm-6 col-md"></div>
        </div>
    </div>
    <h1>Reto 3</h1>
    <div class="container text-center">
        <div class="row">
            <div class="col col-12 col-md-6 offset-md-6" style="background-color: rgb(235, 45, 28);"></div>
        </div>
        <div class="row">
            <div class="col col-8 col-md-8 offset-md-2" style="background-color: rgb(235, 45, 28);"></div>
        </div>
        <div class="row">
            <div class="col col-3 offset-9 offset-md-0" style="background-color: rgb(235, 45, 28);"></div>
        </div>
    </div>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html> 

Excelente el aprendizaje con retos

Hola. Estamos en la 5.1 pero igual aprendiendo con el buen Sasha. Dejo mi aporte al reto.

<div class="container text-center caja">
      <div class="row reto1">
        <div class="col-4">
          col
        </div>
        <div class="col-4">
          col
        </div>
        <div class="col-4">
          col
        </div>
      </div>
      <div class="row reto1">
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
      </div>
      <div class="row reto1">
        <div class="col-6">
            col  
        </div>
        <div class="col-6">
            col
        </div>
      </div>
      <div class="row reto1">
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
        <div class="col">
          col
        </div>
      </div>
      <div class="row reto1">
        <div class="col">
          col
        </div>
      </div>
    </div>    


    <div class="container text-center caja2">
      <div class="row reto2">
        <div class="col-6 col-md-3">
            Col 1 fila1
        </div>
        <div class="col-6 col-md-3">
            Col 2 fila1
        </div>
        <div class="col-6 col-md-3">
            Col 3 fila1
        </div>
        <div class="col-6 col-md-3">
          Col 4 fila1
        </div>
      </div>
      <div class="row reto2">
        <div class="col-12 col-md-6 col-lg">
            Col 1 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
            Col 2 fila2 
        </div>
        <div class="col-12 col-md-6 col-lg">
            Col 3 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
            Col 4 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
          Col 5 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
          Col 6 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
          Col 7 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
          Col 8 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
          Col 9 fila2
        </div>
        <div class="col-12 col-md-6 col-lg">
          Col 10 fila2
        </div>
      </div>
    </div>


    <div class="container text-center caja3">
      <div class="row justify-content-md-end reto3">
        <div class="col col-md-6">
            Col 1 fila1
        </div>
      </div>
      <div class="row reto3 justify-content-md-center">
        <div class="col-8">
            Col 1 fila2
        </div>
      </div>
      <div class="row justify-content-end justify-content-md-start reto3">
        <div class="col-3">
            Col 1 fila3
        </div>
      </div>
    </div> 

Reto 3

<div class="container">
        <div class="row">
            <div class="col col-sm offset-md-6">Fila 1/Col 1</div>
        </div>
        <div class="row">
            <div class="col col-8 offset-md-2">Fila 2/Col 1</div>
        </div>
        <div class="row">
            <div class="col col-3 offset-9 offset-md-0">Fila 3/Col 1</div>
        </div>
    </div>

Ojala dentro del curso mas adelante enseñen como usar el offset la verdad es que se complico mucho al trabajar con el y tuve que hacer trampa con código de compañeros

<style>
        .col {
            border: 1px solid white;
            height: 5rem;
        }
        .R {
            text-align: center;
        }
    </style>
  </head>
  <body>
    <h1 class="R">Reto 1</h1>
    <div class="container " style="background:green ;">
        <div class="row row-col-4">
          <div class="col"></div>
          <div class="col"></div>
          <div class="col"></div>
         </div>
         
         <div class="row row-cols-10">
            <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 class="col"></div>
           </div>
           
           <div class="row row-cols-2">
            <div class="col"></div>
            <div class="col"></div>
          </div>
          
           <div class="row row-cols-4">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
          </div>
          
           <div class="row row-col">
            <div class="col"></div>
          </div>
      </div>

Retos completados

Reto 1

    <div class="container retoOne">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>    
    </div>

Reto 2

    <div class="container retoTwo">
        <div class="row">
            <div class="col-6 col-md-3">row1/col1</div>
            <div class="col-6 col-md-3">row1/col2</div>
            <div class="col-6 col-md-3">row1/col3</div>
            <div class="col-6 col-md-3">row1/col4</div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg">row2/col1</div>
            <div class="col-12 col-md-6 col-lg">row2/col2</div>
            <div class="col-12 col-md-6 col-lg">row2/col3</div>
            <div class="col-12 col-md-6 col-lg">row2/col4</div>
            <div class="col-12 col-md-6 col-lg">row2/col5</div>
            <div class="col-12 col-md-6 col-lg">row2/col6</div>
            <div class="col-12 col-md-6 col-lg">row2/col7</div>
            <div class="col-12 col-md-6 col-lg">row2/col8</div>
            <div class="col-12 col-md-6 col-lg">row2/col9</div>
            <div class="col-12 col-md-6 col-lg">row2/col10</div>
        </div>
    </div>

Reto 3

    <div class="container retoThree">
        <div class="row">
            <div class=" col--brown col col-md-6 offset-md-6">row1/col1</div>
        </div>
        <div class="row">
            <div class="col--brown col-8 col-md-8 offset-md-2">row2/col1</div>
        </div>
        <div class="row --brown">
            <div class="col--brown col-3 offset-9 col-md-3 offset-md-0">row3/col1</div>
        </div>
    </div>

Challenge 2

<main class="container">
        <section class="row main-section">
            <div class="col-6 col-md-3 main-article">1</div>
            <div class="col-6 col-md-3 main-article">2</div>
            <div class="col-6 col-md-3 main-article">3</div>
            <div class="col-6 col-md-3 main-article">4</div>
        </section>
        <section class="row main-section">
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">1</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">2</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">3</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">4</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">5</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">6</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">8</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">7</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">9</div>
            <div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1  main-article">10</div>
        </section>
    </main>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <style>
        .col {
            border: 1px solid white;
            height: 70px;
        }
        .reto3 {
            height: 70px;
        }
    </style>
</head>
  <body>
      <h2>Reto 1</h2>
    <div class="container" style="background-color: green;">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>
    </div>

    <h2>Reto 2</h2>
    <div class="container reto2" style="background-color: antiquewhite;">
        <div class="row">
            <div class="col col-6 col-md">Fila 1 / Col 1</div>
            <div class="col col-6 col-md">Fila 1 / Col 2</div>
            <div class="col col-6 col-md">Fila 1 / Col 3</div>
            <div class="col col-6 col-md">Fila 1 / Col 4</div>
        </div>
        <div class="row">
            <div class="col col-12 col-md">Fila 2 / Col 1</div>
            <div class="col col-12 col-md">Fila 2 / Col 2</div>
            <div class="col col-12 col-md">Fila 2 / Col 3</div>
            <div class="col col-12 col-md">Fila 2 / Col 4</div>
            <div class="col col-12 col-md">Fila 2 / Col 5</div>
            <div class="col col-12 col-md">Fila 2 / Col 6</div>
            <div class="col col-12 col-md">Fila 2 / Col 7</div>
            <div class="col col-12 col-md">Fila 2 / Col 8</div>
            <div class="col col-12 col-md">Fila 2 / Col 9</div>
            <div class="col col-12 col-md">Fila 2 / Col 10</div>
        </div>
    </div>

    <h2>Reto 3</h2>
    <div class="container reto3" >
        <div class="row">
            <div class="col col-12 col-md-6 offset-md-6" style="background-color: antiquewhite;">Fila 1 / Col 2</div>
        </div>
        <div class="row">
            <div class="col col-8 col-md-6 offset-md-2" style="background-color: antiquewhite;">Fila 1 / Col 2</div>
        </div>
        <div class="row">
            <div class="col col-3 offset-9 offset-md-0" style="background-color: antiquewhite;">Fila 1 / Col 2</div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  </body>
</html>

Reto 1
<STyle>
.col{
background-color: seagreen;
border: 1px solid white;
height: 100px;
color: white;
}
</STyle>
</head>
<body>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<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>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
<div class=“col”>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
</div>
</div>

![Se me ocurrio esto vean](

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style>
        .col{
            border: 1px solid white;
            height: 100px;
            background: black;
            color: white;
        }
        h1{
            text-align: center;
        }
    </style>
    <title>Piramide</title>
  </head>
  <body>
    <h1>Estoy Intentando hacer una piramide vamos a darle</h1>
    <!-- Como se observa el Background fue quitado del conainer y agregado directo a la clase col-->
    <div class="container">
        <div class="row">
            <div class="col col-md-2 offset-md-5">Fila1/col1</div>
         </div>
     <div class="row">
        <div class="col col-md-6 offset-md-3">Fila2/col1</div>
     </div>
     <div class="row">
        <div class="col col-8 offset-md-2">Fila3/col1</div>
     </div>
     <div class="row">
        <div class="col col-md-12 offset-md-0">Fila4/col1</div>
     </div>

    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

![](

Reto 1:

 <div class="container">
      <div class="row">
        <div class="col-4 colum"></div>
        <div class="col-4 colum"></div>
        <div class="col-4 colum"></div>
      </div>
      <div class="row">
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
      </div>
      <div class="row">
        <div class="col-6 colum"></div>
        <div class="col-6 colum"></div>
      </div>
      <div class="row">
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
        <div class="col colum"></div>
      </div>
      <div class="row">
        <div class="col"></div>
      </div>
    </div>

Reto 2:

<div class="container">
      <div class="row">
        <div class="col-6 col-md-3 colum"></div>
        <div class="col-6 col-md-3 colum"></div>
        <div class="col-6 col-md-3 colum"></div>
        <div class="col-6 col-md-3 colum"></div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
        <div class="col-sm-12 col-md-6 col-lg colum"></div>
      </div>
    </div>

Reto 3:

 <div class="container">
      <div class="row">
        <div class="col-12 col-md-6 offset-md-6 colum"></div>
      </div>
      <div class="row">
        <div class="col-8 offset-md-2 colum"></div>
      </div>
      <div class="row">
        <div class="col-3 offset-9 offset-md-0 colum"></div>
      </div>
    </div>

Reto

<h1>RETO 1</h1>
    <div class="container">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>        
    </div>
    
    <h1>RETO 2</h1>
    <div class="container">
        <div class="row">
            <div class="col-6 col-sm">Fila 1/Col 1</div>
            <div class="col-6 col-sm">Fila 1/Col 2</div>
            <div class="col-6 col-sm">Fila 1/Col 3</div>
            <div class="col-6 col-sm">Fila 1/Col 4</div>
        </div>
        <div class="row">
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 1</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 2</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 3</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 4</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 5</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 6</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 7</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 8</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 9</div>
            <div class="col-12 col-sm-6 col-lg">Fila 2/Col 10</div>
        </div>
        
    </div>

    <h1>RETO 3</h1>
    <div class="container">
        <div class="row">
            <div class="offset-md-6 col-md-6">Fila 1/Col 1</div>
        </div>
        <div class="row">
            <div class="col-8 offset-md-2 ">Fila 2/Col 1</div>
        </div>
        <div class="row">
            <div class="col-3 offset-9 offset-md-0">Fila 3/Col 1</div>
        </div>
    </div>

Dure casi 2 horas fue interesante el reto. pero en los breakpoints de <576px se me rompen los estilos en el reto #2 ya que las dimensiones no se porque no me ajustan

 <h2>Reto 1</h2>

    <div class="container text-center">
        <div class="row">
            <div class="col">Fila 1</div>
            <div class="col">Fila 1</div>
            <div class="col">Fila 1 </div>
        </div>
        <div class="row">
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
            <div class="col">Fila 2</div>
        </div>
        <div class="row">
            <div class="col">Fila 3</div>
            <div class="col">Fila 3</div>
        </div>
        <div class="row">
            <div class="col">Fila 4</div>
            <div class="col">Fila 4</div>
            <div class="col">Fila 4</div>
            <div class="col">Fila 4</div>
            <div class="col">Fila 4</div>
        </div>
        <div class="row">
            <div class="col">Fila 5</div>
        </div>
    </div>

        <h2>Reto 2</h2>
  <div class="container">
    <div class="row">
        <div class="col">Fila 1</div>
        <div class="col">Fila 1</div>
        <div class="col">Fila 1</div>
        <div class="col">Fila 1</div>
    </div>
    <div class="row">
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div> 
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div>
        <div class="col col-sm-12 col-md-6 col-lg"></div>
    </div>
  </div>

  <h2>Reto 3.</h2>
  <div class="container">
      <div class="row">
          <div class="col col-md-6 offset-md-6 col-sm-12"></div>
          <div class="col col-md-8 offset-md-2 col-sm-9"></div>
          <div class="col col-md-3 offset-md-0 col-sm-3 offset-sm-9"></div>
      </div>
  </div>

Al que no le responda colocar un espacio dentro del DIV, pueden usar la codificacion nbsp

<div class="col">&nbsp;</div>

Me encantó

Respuesta:

HTML

<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link href=“https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3” crossorigin=“anonymous”>
<link rel=“stylesheet” href=“style.css”>
<title>retos</title>
</head>
<body>
<h1>Retos</h1>
<h2>Reto 1</h2>
<div class=“container”>
<div class=“row align-items-start”>
<div class=“col-4”>
columan 1
</div>
<div class=“col-4”>
columna 2
</div>
<div class=“col-4”>
columna 3
</div>
</div>
<div class=“row”>
<div class=“col”>
columna 1
</div>
<div class=“col”>
columna 2
</div>
<div class=“col”>
columna 3
</div>
<div class=“col”>
columna 4
</div>
<div class=“col”>
columna 5
</div>
<div class=“col”>
columna 6
</div>
<div class=“col”>
columna 7
</div>
<div class=“col”>
columna 8
</div>
<div class=“col”>
columna 9
</div>
<div class=“col”>
columna 10
</div>
</div>
<div class=“row align-items-end”>
<div class=“col-6”>
columna 1
</div>
<div class=“col-6”>
columna 2
</div>
</div>
<div class=“row align-items-end”>
<div class=“col”>
columna 3
</div>
<div class=“col”>
columna 4
</div>
<div class=“col”>
columna 5
</div>
<div class=“row align-items-end”>
<div class=“col-14”>
Columna 16
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------>
<h2>Reto 2</h2>
<div class=“container”>
<div class=“row align-items-start”>
<div class="col col-6 col-md ">
Fila 1/Col 1
</div>
<div class="col col-6 col-md "
>Fila 1/Col 2
</div>
<div class="col col-6 col-md ">
Fila 1/Col 3
</div>
<div class="col col-6 col-md ">
Fila 1/Col 4
</div>
</div>

  <div class="row align-items-end">
    <div class="col">
      Fila 2/Col 1
    </div>
    <div class="col">
      Fila 2/Col 2
    </div>
    <div class="col">
      Fila 2/Col 3
    </div>
    <div class="col">
      Fila 2/Col 4
    </div>
    <div class="col">
      Fila 2/Col 5
    </div>
    <div class="col">
      Fila 2/Col 6
    </div>
    <div class="col">
      Fila 2/Col 7
    </div>
    <div class="col">
      Fila 2/Col 8
    </div>
    <div class="col">
      Fila 2/Col 9
    </div>
    <div class="col">
      Fila 2/Col 10
    </div>
  </div>
  </div>

<!----------------------------------------------------------------------------------->
<h2>Reto 3</h2>
<div class=“container”>
<div class=“row”>
<div class=“row align-items-start”>
<div class=“col-12 col-md-6 offset-md-6”>
Fila 1/Col 1
</div>

      <div class="row align-items-start">
        <div class="col-8 offset-md-2">
          Fila 2/Col 1
        </div>
      </div>

      <div class="row align-items-start">
        <div class="col-3 offset-9 offset-md-0">
          Fila 3/Col 1
        </div>
      </div>
    </div>
  </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>
</html>

CSS

*{
margin: 0;
}

body{
background-color: rgb(44, 41, 41);
color: whitesmoke;
}
.col-4{
background-color: blue;
color: rgb(44, 41, 41);
border-style: solid;
}

.col{
background-color: aqua;
color: rgb(44, 41, 41);
border-style: solid;
}

.col-6{
background-color: blueviolet;
color: rgb(44, 41, 41);
border-style: solid;
}

.col-12{
background-color: brown;
color: rgb(44, 41, 41);
border-style: solid;
}
.col-8{
background-color: brown;
color: rgb(44, 41, 41);
border-style: solid;
}

.col-3{
background-color: brown;
color: rgb(44, 41, 41);
border-style: solid;
}

En el segundo desafío no me funcionaba poner solamente “col-lg”. Tuve que agregar otras dos columnas para que funcionara y ponerle a las 12 columnas "col-lg-1"
Aquí está mi aporte:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Bootstrap</title>
</head>
    <body>
        <div class="container bg-success mt-4">
            <div class="row">
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">2</div>
                <div class="col p-3 border">3</div>
            </div>
            <div class="row">
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
            </div>
            <div class="row">
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
            </div>
            <div class="row">
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
                <div class="col p-3 border">1</div>
            </div>
            <div class="row">
                <div class="col p-3 border">1</div>
            </div>
        </div>
        <div class="container bg-warning mt-4">
            <div class="row">
                <div class="col col-6 col-md-3 p-3 border">1</div>
                <div class="col col-6 col-md-3 p-3 border">1</div>
                <div class="col col-6 col-md-3 p-3 border">1</div>
                <div class="col col-6 col-md-3 p-3 border">1</div>
            </div>
            <div class="row">
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
                <div class="col-12 col-md-6 col-lg-1 p-3 border">1</div>
            </div>
        </div>
        <div class="container mt-4">
            <div class="row">
                <div class="col col-md-6 offset-md-6 d-flex p-3 border bg-primary text-white">1</div>
            </div>
            <div class="row">
                <div class="col-8 col-md-8 offset-md-2 p-3 border bg-primary text-white">1</div>
            </div>
            <div class="row">
                <div class="col-3 offset-9 col-md-3 offset-md-0 p-3 border bg-primary text-white">1</div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

Buenas tardes, yo uso Bootstrap 4 para aplicaciones webs en varios lenguajes como .Net C#, algunas en JSF (Java), para optimizar layouts y espacios.

A continuación dejo mi aporte con los retos:

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Bootstrap 4 - Andrés Perdomo</title>
    <style>
        .coles{
            background: #ff0000;
            color: aliceblue;
            padding: 10px 20px;
            border: 2px solid #fff;
        }
        .coles-1{
            background: green;
            color: aliceblue;
            padding: 10px 20px;
            border: 2px solid #fff;
        }
        .coles-12{
            background: rgb(7, 185, 255);
            color: aliceblue;
            padding: 10px 20px;
            border: 2px solid #fff;
        }
        @media all and (min-width: 767px) and (max-width: 567px) {

        }
            
        
    </style>
  </head>
  <body>
    <section class="container">
        <h1>RETO 1</h1>
        <div class="row">
            <div class="coles-1 col ">FILA 1 COL 1</div>
            <div class="coles-1 col">FILA 1 COL 2</div>
            <div class="coles-1 col">FILA 1 COL 3</div>
          </div>
        <div class="row">
            <div class="coles-1 col">FILA 2 COL 1</div>
            <div class="coles-1 col">FILA 2 COL 2</div>
            <div class="coles-1 col">FILA 2 COL 3</div>
            <div class="coles-1 col">FILA 2 COL 4</div>
            <div class="coles-1 col">FILA 2 COL 5</div>
            <div class="coles-1 col">FILA 2 COL 6</div>
            <div class="coles-1 col">FILA 2 COL 7</div>
            <div class="coles-1 col">FILA 2 COL 8</div>
            <div class="coles-1 col">FILA 2 COL 9</div>
            <div class="coles-1 col">FILA 2 COL 10</div>
        </div>
           <div class="row">
            <div class="coles-1 col">FILA 3 COL 1</div>
            <div class="coles-1  col">FILA 3 COL 2</div>
          </div>
          <div class="row">
            <div class="coles-1 col">FILA 4 COL 1</div>
            <div class="coles-1 col">FILA 4 COL 2</div>
            <div class="coles-1 col">FILA 4 COL 3</div>
            <div class="coles-1 col">FILA 4 COL 4</div>
            <div class="coles-1 col">FILA 4 COL 5</div>
        </div>
        <div class="row">
            <div class="coles-1 col-12 ">FILA 5 COL 1</div>
        </div>
        </section>
    <section class="container">
        <h2>RETO 2</h2>
        <p>FILA 1</p>
        <div class="row">
            
            <div class="coles-12 col-6 col-sm-3">FILA 1 COL 1</div>
            <div class="coles-12 col-6 col-sm-3">FILA 1 COL 2</div>
            <div class="coles-12 col-6 col-sm-3">FILA 1 COL 3</div>
            <div class="coles-12 col-6 col-sm-3">FILA 1 COL 4</div>
        </div>
        <p>FILA 2</p>
        <div class="row">
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 1</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 2</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 3</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 4</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 5</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 6</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 7</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 8</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 9</div>
            <div class="coles-12 col-lg col-sm-12">FILA 2 COL 10</div>
          </div>
        </section>
    <section class="container">
        <h3>RETO 3</h3>
    <div class="row">
        <div class="coles col-md-6 offset-md-6 ">FILA 1 COL 1</div>
      </div>
      <div class="row">
        <div class=" coles col-8 offset-md-2">FILA 2 COL 1</div>
      </div>
      <div class="row">
        <div class=" coles  col-1 offset-10 col-sm-3 offset-sm-1">FILA 3 COL 1</div>
      </div>
    </section>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Buenas, les paso cómo anoté en mis apuntes como para entender el tercer ejercicio, me costó bastante, espero que les sirva.

<div class="col col-12 col-md-6 offset-md-6>

  • col col-12: indica que cuando el tamaño de la pantalla sea menor a mediano la columna va a ocupar el ancho completo de la pantalla.

  • col-md-6 : indica que cuando el tamaño de la pantalla sea mayor a mediano la columna cambia su tamaño a 6 columnas.

  • offset-md-6 : cuando el tamaño de la pantalla sea mayor a mediano la columna se va a colocar a la derecha de la pantalla, el margen izquierdo va a ser de 6 columnas de tamaño, por eso el número 6.

<div class=“col col-8 offset-md-2”>

  • col col-8 : el tamaño de la columna va ser de 8 columnas, y pode feceto va a estar posicionado del lado izquierdo.

  • offset-md-2 : cuando el tamaño de pantalla sea mayor a mediano, la columna se corre 2 columnas a la derecha.

<div class=“col col-3 offset-9 offset-md-0”>

  • col col-3 offset-9 : el tamaño de la columna será de 3 columnas, y va a estar 9 columnas a la derecha.

  • offset-md-0 : cuando el tamaño de la pantalla sea mayor a mediano, la columna se coloca a la izquierda, por eso el 0, el margen izquierdo será cero.

En bootstrap 4.6.x puedes definir el número de columntas para cada renglon de la siguiente manera:

<div class="row row-cols-2 row-cols-md-4">

Estos retos han estado increíbles! Al principio me volvió a costar ya que no funcionaba como queria.
El “truco” que encontré es que primero hay que definir el numero de columnas como queremos que se vea en una pantalla pequeña y después ir “escalando” o definiendo el numero de columnas para pantallas cada vez más grandes.
.
🌐 Repositorio GitHub con los códigos: https://github.com/iJCode1/bootstrap4_platzi/tree/main/retos_grilla

Reto 1:

.
Reto 2:

.
Reto 3:

Ejercicio 1.
<!-- -->
<div class=“container-fluid”>
<div class=“row”>
<div class=“col-4 col-md-4” style=“background: gray;height: 50px; border: 1px solid white;”></div>
<div class=“col-4 col-md-4” style=“background: gray;height: 50px; border: 1px solid white;”></div>
<div class=“col-4 col-md-4” style=“background: gray; height: 50px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col col-md-6” style=“background: gray; height: 50px; border: 1px solid white;”></div>
<div class=“col col-md-6” style=“background: gray; height: 50px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col sm-12 md-12 lg-12” style=“background: #c9c9c9; height: 50px; border: 1px solid white;” >
</div>
</div>

<!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/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

</head>
<style>
.col-4 {
border: 1px solid white;
height: 90px;
}
.col-1 {
border: 1px solid white;
height: 90px;
}
.col-6 {
border: 1px solid white;
height: 90px;
}
.col {
border: 1px solid white;
height: 90px;
}

.col-lg {
  border: 1px solid white;
  height: 100px;
}
.col-lg-1 {
  border: 1px solid white;
  height: 100px;
}
.col-md-3 {
  border: 1px solid white;
  height: 100px;

}
.col-md-5 {
  border: 1px solid white;
  height: 100px;

}

</style>
<body>
<div class=“container”>
<div class=“row”>
<div class=“col-4” style=“background-color: turquoise”></div>
<div class=“col-4” style=“background-color: turquoise”></div>
<div class=“col-4” style=“background-color: turquoise”></div>
</div>

  <div class="row">
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
    <div class="col-1" style="background-color: turquoise"></div>
  </div>

  <div class="row">
    <div class="col-6" style="background-color: turquoise"></div>
    <div class="col-6" style="background-color: turquoise"></div>
  </div>

  <div class="row">
    <div class="col" style="background-color: turquoise"></div>
    <div class="col" style="background-color: turquoise"></div>
    <div class="col" style="background-color: turquoise"></div>
    <div class="col" style="background-color: turquoise"></div>
    <div class="col" style="background-color: turquoise"></div>
  </div>
  <div class="row">
    <div class="col" style="background-color: turquoise"></div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col" style="background-color: white"></div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg col-sm-6" style="background-color: wheat">
      fila1/Col1
    </div>
    <div class="col-lg col-sm-6" style="background-color: wheat">
      fila1/Col2
    </div>
    <div class="col-lg col-sm-6" style="background-color: wheat">
      fila1/Col3
    </div>
    <div class="col-lg col-sm-6" style="background-color: wheat">
      fila1/Col4
    </div>
  </div>

  <div class="row">
    <div class="col-lg-1" style="background-color: wheat">fila1/Col1</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col2</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col3</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col4</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col5</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col6</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col7</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col8</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col9</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col10</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col11</div>
    <div class="col-lg-1" style="background-color: wheat">fila1/Col12</div>
  </div>
  <div class="container">
  <div class="row">
    <div class="col" style="background-color: white"></div>
  </div>
</div>

 <div class="container">

<div class=“row”>

<div class="col-md-3 offset-md-9" style="background-color:red" >.col-md-4 .offset-md-4</div>

</div>
<div class=“row”>
<div class=“col-md-5 offset-md-6” style=“background-color:red” >.col-md-3 .offset-md-3</div>

</div>
<div class=“row”>
<div class=“col-md-5 offset-md-2” style=“background-color:red” >.col-md-6 .offset-md-3</div>
</div>
</div>

  </div>
</div>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->

</body>
</html>

Mi solución al primer reto:

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Reto 1</title>
    <style>
        .col {
            height: 80px;
            width: 80px;
            background: #3ACDB9;
            border: 1px solid white;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <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 class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
						<div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Dejo por aquí mi código en Git Hub los invito a revisar, cualquier pregunta o sugerencia escriban aquí…

https://github.com/JoseRamirezOz/LaboratorioBootstrap/tree/experimentos/LaboratorioBootstrap/Grilla