No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

2D
5H
0M
43S

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 433

Preguntas 27

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渕ayor que鈥 ejemplo, la linea 鈥渃ol-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>

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>

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=鈥渃ontainer鈥 >
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥 style=鈥渉eight: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=鈥渃ontainer鈥 style=鈥渕argin-top: 20px;;鈥 >
<div class=鈥渞ow鈥>
<div class="col-sm-6 col-lg-3 col-6 col-md-3 " style=鈥渉eight: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=鈥渃ontainer鈥 >
<div class=鈥渞ow鈥>
<div class=鈥渃ol-md-10 offset-md-2 col-lg-6 offset-lg-6 col-sm-12 col-12鈥 style=鈥渉eight: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>

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?馃槂

<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=鈥渆n鈥>
<head>
<!-- Required meta tags -->
<meta charset=鈥渦tf-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=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=鈥渃ontainer鈥 style=鈥渂ackground: red;鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
1
</div>
<div class=鈥渃ol鈥>
2
</div>
<div class=鈥渃ol鈥>
3
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
<div class=鈥渃ol鈥>
4
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
5
</div>
<div class=鈥渃ol鈥>
5
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
6
</div>
<div class=鈥渃ol鈥>
6
</div>
<div class=鈥渃ol鈥>
6
</div>
<div class=鈥渃ol鈥>
6
</div>
<div class=鈥渃ol鈥>
6
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
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=鈥渟ha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj鈥 crossorigin=鈥渁nonymous鈥></script>
<script src=鈥https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js鈥 integrity=鈥渟ha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo鈥 crossorigin=鈥渁nonymous鈥></script>
<script src=鈥https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js鈥 integrity=鈥渟ha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI鈥 crossorigin=鈥渁nonymous鈥></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>```

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

Cumpliendo el reto

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 鈥渆stire鈥 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=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
</div>
</div>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
</div>
</div>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
</div>
</div>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
<div class=鈥渃ol鈥>
</div>
</div>
</div>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
</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>

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> 

primer desafio

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=鈥渆n鈥>
<head>
<meta charset=鈥渦tf-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1鈥>
<link href=鈥https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css鈥 rel=鈥渟tylesheet鈥 integrity=鈥渟ha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3鈥 crossorigin=鈥渁nonymous鈥>
<link rel=鈥渟tylesheet鈥 href=鈥渟tyle.css鈥>
<title>retos</title>
</head>
<body>
<h1>Retos</h1>
<h2>Reto 1</h2>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow align-items-start鈥>
<div class=鈥渃ol-4鈥>
columan 1
</div>
<div class=鈥渃ol-4鈥>
columna 2
</div>
<div class=鈥渃ol-4鈥>
columna 3
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
columna 1
</div>
<div class=鈥渃ol鈥>
columna 2
</div>
<div class=鈥渃ol鈥>
columna 3
</div>
<div class=鈥渃ol鈥>
columna 4
</div>
<div class=鈥渃ol鈥>
columna 5
</div>
<div class=鈥渃ol鈥>
columna 6
</div>
<div class=鈥渃ol鈥>
columna 7
</div>
<div class=鈥渃ol鈥>
columna 8
</div>
<div class=鈥渃ol鈥>
columna 9
</div>
<div class=鈥渃ol鈥>
columna 10
</div>
</div>
<div class=鈥渞ow align-items-end鈥>
<div class=鈥渃ol-6鈥>
columna 1
</div>
<div class=鈥渃ol-6鈥>
columna 2
</div>
</div>
<div class=鈥渞ow align-items-end鈥>
<div class=鈥渃ol鈥>
columna 3
</div>
<div class=鈥渃ol鈥>
columna 4
</div>
<div class=鈥渃ol鈥>
columna 5
</div>
<div class=鈥渞ow align-items-end鈥>
<div class=鈥渃ol-14鈥>
Columna 16
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------>
<h2>Reto 2</h2>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow 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=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渞ow align-items-start鈥>
<div class=鈥渃ol-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 鈥渃ol-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/boots[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=鈥渃ol 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=鈥渃ol 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 鈥渢ruco鈥 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 鈥渆scalando鈥 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=鈥渃ontainer-fluid鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-4 col-md-4鈥 style=鈥渂ackground: gray;height: 50px; border: 1px solid white;鈥></div>
<div class=鈥渃ol-4 col-md-4鈥 style=鈥渂ackground: gray;height: 50px; border: 1px solid white;鈥></div>
<div class=鈥渃ol-4 col-md-4鈥 style=鈥渂ackground: gray; height: 50px; border: 1px solid white;鈥></div>
</div>
<!-- -->
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #808080; height: 60px; border: 1px solid white;鈥></div>
</div>
<!-- -->
<div class=鈥渞ow鈥>
<div class=鈥渃ol col-md-6鈥 style=鈥渂ackground: gray; height: 50px; border: 1px solid white;鈥></div>
<div class=鈥渃ol col-md-6鈥 style=鈥渂ackground: gray; height: 50px; border: 1px solid white;鈥></div>
</div>
<!-- -->
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥 style=鈥渂ackground: #9d9d9d; height: 50px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #9d9d9d; height: 50px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #9d9d9d; height: 50px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #9d9d9d; height: 50px; border: 1px solid white;鈥></div>
<div class=鈥渃ol鈥 style=鈥渂ackground: #9d9d9d; height: 50px; border: 1px solid white;鈥></div>
</div>
<!-- -->
<div class=鈥渞ow鈥>
<div class=鈥渃ol sm-12 md-12 lg-12鈥 style=鈥渂ackground: #c9c9c9; height: 50px; border: 1px solid white;鈥 >
</div>
</div>

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<!-- Required meta tags -->
<meta charset=鈥渦tf-8鈥 />
<meta name=鈥渧iewport鈥 content=鈥渨idth=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=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-4鈥 style=鈥渂ackground-color: turquoise鈥></div>
<div class=鈥渃ol-4鈥 style=鈥渂ackground-color: turquoise鈥></div>
<div class=鈥渃ol-4鈥 style=鈥渂ackground-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=鈥渞ow鈥>

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

</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-md-5 offset-md-6鈥 style=鈥渂ackground-color:red鈥 >.col-md-3 .offset-md-3</div>

</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-md-5 offset-md-2鈥 style=鈥渂ackground-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

https://github.com/Mark4nov/Platzi_Bootstrap

Aqu铆 est谩 mi repositorio, tengo una carpeta para los retos :3

Hola a todos, les comparto mis 3 retos:
https://codepen.io/Tania-Gonzalez15/pen/PojgOwx

<!-- Ejercicio 2 -->

<!doctype html>
<html lang=鈥渆n鈥>

<head>
<!-- Required meta tags -->
<meta charset=鈥渦tf-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=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-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
    .col {
        border: 1px solid white;
        height: 90px;
    }
</style>

<title>Hello, world!</title>

</head>

<body>

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


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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <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/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>

</body>

</html>

Ac谩 les comparto mi resoluci贸n de los ejercicios Ejercicios Resueltos

Hola, solo a manera de aporte, esta lo siguiente:

Tercer reto

Este reto lo hice usando Margin utilities, pero ac谩 hice un tutorial sobre c贸mo manejar Offset y Margin Utilities.

    <div class="container">
        <div class="row">
            <div class="col col-md-6 ms-md-auto"></div>
        </div>
        <div class="row">
            <div class="col-8 m-md-auto "></div>
        </div>
        <div class="row">
            <div class="col-3 ms-auto ms-md-0"></div>
        </div>
    </div>

Hola, solo a manera de aporte esta lo siguiente:

Primer reto

Para este reto puedes hacerlo de la siguiente manera:

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

Utilizo solo la clase .col porque esta clase divide las 12 columnas en el n煤mero de columnas que hay dentro de una fila (.row).

Si quieres entender un poco m谩s, te dejo este tutorial que hice sobre c贸mo manejar las columnas de bootstrap.


Dejo la foto (solo de la vista escritorio), pero el c贸digo contiene los 3 retos por si gustan鈥 me voy a dormir es media noche x.x
<!doctype html>
<html lang=鈥渆n鈥>
<head>
<!-- Required meta tags -->
<meta charset=鈥渦tf-8鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1鈥>
<link rel=鈥渟tylesheet鈥 href=鈥渃ss/style.css鈥>

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

<title>Hello, world!</title>

</head>
<body>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
<p>1</p>
</div>
<div class=鈥渃ol鈥>
<p>2</p>
</div>
<div class=鈥渃ol鈥>
<p>3</p>
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
<p>1</p>
</div>
<div class=鈥渃ol鈥>
<p>2</p>
</div>
<div class=鈥渃ol鈥>
<p>3</p>
</div>
<div class=鈥渃ol鈥>
<p>4</p>
</div>
<div class=鈥渃ol鈥>
<p>5</p>
</div>
<div class=鈥渃ol鈥>
<p>6</p>
</div>
<div class=鈥渃ol鈥>
<p>7</p>
</div>
<div class=鈥渃ol鈥>
<p>8</p>
</div>
<div class=鈥渃ol鈥>
<p>9</p>
</div>
<div class=鈥渃ol鈥>
<p>10</p>
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
<p>1</p>
</div>
<div class=鈥渃ol鈥>
<p>2</p>
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
<p>1</p>
</div>
<div class=鈥渃ol鈥>
<p>2</p>
</div>
<div class=鈥渃ol鈥>
<p>3</p>
</div>
<div class=鈥渃ol鈥>
<p>4</p>
</div>
<div class=鈥渃ol鈥>
<p>5</p>
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
<p>1</p>
</div>
</div>
</div>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6鈥>
<p>4</p>
</div>
<div class=鈥渃ol-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6鈥>
<p>4</p>
</div>
<div class=鈥渃ol-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6鈥>
<p>4</p>
</div>
<div class=鈥渃ol-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6鈥>
<p>4</p>
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol-xxl col-md-6 col-12鈥>
<p>1</p>
</div>
<div class=鈥渃ol鈥>
<p></p>
</div>
</div>
</div>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol col-md-6 offset-md-6鈥>
<p>Raro1</p>
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-8 col-md-8 offset-md-2鈥>
<p>Raro2</p>
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol-2 offset-10 col-md-3鈥>
<p>Raro3</p>
</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-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" 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-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->

</body>
</html>

Est茅ticamente no es muy agradable pero quer铆a probar intentando cambiar los colores de cada bloque

Google tiene una paleta de colores muy agradable para el que le interese utilizarla en futuros proyectos

https://material.io/resources/color/#!/?view.left=0&view.right=0

Les comparto la soluci贸n que le di a los 3 restos ya usando Bootstrap 5 馃槃 https://github.com/iJCode1/bootstrap-platzi/tree/main/retos-grilla

Codigo del primer Desafio tiene que arreglarle los espacios:

<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
1
</div>
<div class=鈥渃ol鈥>
1
</div>
<div class=鈥渃ol鈥>
1
</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
<div class=鈥渃ol鈥>col</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>3</div>
<div class=鈥渃ol鈥>3</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>4</div>
<div class=鈥渃ol鈥>4</div>
<div class=鈥渃ol鈥>4</div>
<div class=鈥渃ol鈥>4</div>
<div class=鈥渃ol鈥>4</div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol鈥>
5
</div>
</div>
</div>
</div>

Yo combine con Stylus para practicar un poco, copio mis resultados por si alguien quiera jugar con ello:

Reto 1

  • 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-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>Reto 1</title>
    <link rel="stylesheet" href="./css/reto1.css">
  </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>
  </body>
</html>
  • Stylus
.container {
  height: 500px;
  margin-top: 30px;
  .row {
    height: 100px;
    .col {
      background-color: rgb(0, 189, 189);
      border: 1px solid white;
    }
  }
}

Reto2

  • 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-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/reto2.css">
    <title>Reto 2</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-6 col-sm-6 col-md-3 col-xxl-3">Fila 1/Col 1</div>
        <div class="col-6 col-sm-6 col-md-3 col-xxl-3">Fila 1/Col 2</div>
        <div class="col-6 col-sm-6 col-md-3 col-xxl-3">Fila 1/Col 3</div>
        <div class="col-6 col-sm-6 col-md-3 col-xxl-3">Fila 1/Col 4</div>
      </div>
      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 1</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 2</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 3</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 4</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 5</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 6</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 7</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 8</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 9</div>
        <div class="col-12 col-sm-12 col-md-6 col-lg">Fila 2/Col 10</div>
      </div>
    </div>
  </body>
</html>
  • Stylus
.container {
  height: 200px;
  margin-top: 30px;
  .row {
    height: 100px;
    div {
      background-color: #feca6e;
      border: 1px solid white;
    }
  }
}

Reto 3

  • HTML
<!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>Reto 3</title>
    <link rel="stylesheet" href="./css/reto3.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-6 offset-lg-6">
          Fila 1/Col 1
        </div>
      </div>
      <div class="row">
        <div class="col-8 col-lg-8 offset-lg-2">
          Fila 2/Col 1
        </div>
      </div>
      <div class="row">
        <div class="col-3 offset-9 col-lg-3 offset-lg-0">
          Fila 3/Col 1
        </div>
      </div>
    </div>
  </body>
</html>
  • Stylus
.container {
  height: 500px;
  margin-top: 30px;
  .row {
    height: 100px;
    div {
      background-color: #d62f32;
      border: 1px solid white;
      color: white;
    }
  }
}

En el reto 2 ahorr茅 cod cambiando la cantidad de columnas con row-cols-*

 <div class="container">
      <h2>Reto 2</h2>
      <div class="row yellow 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 yellow row-cols-1 row-cols-md-2">
        <div class="col-lg">Fila 2/col 2</div>
        <div class="col-lg">Fila 2/col 3</div>
        <div class="col-lg">Fila 2/col 4</div>
        <div class="col-lg">Fila 2/col 5</div>
        <div class="col-lg">Fila 2/col 6</div>
        <div class="col-lg">Fila 2/col 7</div>
        <div class="col-lg">Fila 2/col 8</div>
        <div class="col-lg">Fila 2/col 9</div>
        <div class="col-lg">Fila 2/col 10</div>
      </div>
    </div>

Codigo compreto

<!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-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
      crossorigin="anonymous"
    />
    <style>
        body{
            margin: 1rem;
        }
      h2 {
        margin-top: 0.5rem;
        margin-left: 0.5rem;
      }
      .container {
        margin-top: 3rem;
      }
      .col,
      .col-lg {
        border: 1px solid white;
        background: #01b795;
        height: 70px;
      }
      .yellow .col,
      .yellow .col-lg {
        background: #feca6e;
      }
      .red .col {
        background: #d62f32;
        color: white;
      }
    </style>
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
      <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 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">
      <h2>Reto 2</h2>
      <div class="row yellow 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 yellow row-cols-1 row-cols-md-2">
        <div class="col-lg">Fila 2/col 2</div>
        <div class="col-lg">Fila 2/col 3</div>
        <div class="col-lg">Fila 2/col 4</div>
        <div class="col-lg">Fila 2/col 5</div>
        <div class="col-lg">Fila 2/col 6</div>
        <div class="col-lg">Fila 2/col 7</div>
        <div class="col-lg">Fila 2/col 8</div>
        <div class="col-lg">Fila 2/col 9</div>
        <div class="col-lg">Fila 2/col 10</div>
      </div>
    </div>
    <div class="container">
      <h2>Reto 3</h2>
      <div class="row red justify-content-end">
        <div class="col col-md-6">Fila 1/ col 1</div>
      </div>
      <div class="row red justify-content-start">
        <div class="col col-8 offset-md-2">Fila 2/ col 1</div>
      </div>
      <div class="row red">
        <div class="col col-3 offset-9 offset-md-0">Fila 3/ col 1</div>
      </div>
    </div>
  </body>
</html>

si se les sobreponen los divs , puede ser que le pusieron los estilos a la propiedad div como tal espec铆ficamente el estilo de (height) , y esto esta mal , ya que al hacer eso , se le estar铆a aplicando los mismos estilos hasta a la clase .container , mi soluci贸n fue colocar un selector aparte de los de bootstrap y aplicarle los estilos a este selector es decir:
//---------------------------------------------------------------------
.space{
height:50px;
border:2px solid white;
background-color:000;
}
y este selector usarlo en los divs de columnas es decir:
//----------------------------------------------------------------
<div class=鈥渃ol-6 col-sm space鈥> </div>
//-----------------------------------------------------------------
espero que esto le sea de ayuda a alguien , ya que tarde un poco en descubrir el error 鉁岎煒

Reto #3
<style>
.col {
background:plum;
border:1px solid blueviolet;
height: 50px;
}

</style>

<title>Bootstrap Ejercicio tres</title>

</head>
<body>
<div class=鈥渃ontainer reto3鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol col-12 col-md-6 offset-md-6鈥>
</div>
</div>
<div class=鈥渞ow鈥>
<div class="col col-8 offset-md-2 "></div>
</div>
<div class=鈥渞ow鈥>
<div class=鈥渃ol col-3 offset-9 offset-md-0鈥></div>
</div>
</div>

Reto 1: