Reto: La grilla de Bootstrap

Resumen

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.

Danelia Sanchez Sanchez

student•

Así realicé los desafíos:
https://github.com/DaneliaSanchz/bootstrap

Miguel Angel Fuentes Garcia

student•

wow aprendí mucho de tu código! Gracias!

Sergio Camilo vanegas

student•

¿Oye por qué en el segundo reto pones “col-12 col-md-6 col-lg” en la segunda fila, en vez de poner solamente “col-12 col-lg”?

Karenn Yeraldin Hernández Duarte

student•

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

Oscar Rios

student•

Excelente aporte! El mejor que encontré. Muchas gracias.

Para el reto 3, en la primera fila eliminé el "col-12" y también funciona. En mi caso quedó así:

Primera Fila: col-md-6 offset-md-6
Segunda Fila: col-8 offset-md-2
Tercera Fila: col-3 offset-9 offset-md-0

Keyla Conde Sánchez

student•

Thank you!!!

Alexander Moreno

student•

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;

    &lt;!-- Bootstrap CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh&quot; crossorigin=&quot;anonymous&quot;&gt;

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

    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.4.1.slim.min.js&quot; integrity=&quot;sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;```

Alessandro Staiano

student•

Buen aporte compa :)

Edwin Daniel Acero Rojas

student•

Yo lo hice igual!!

Raul Mercado

student•

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

Blanca Morillo Sierralta

student•

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/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

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

Valentin Francisco Blanco

student•

Gracias, gran aporte! ya me estaba preocupando jajs.

Miguel Angel Choque Pacompia

student•

uff me estaba desesperando

Enrique Yael C

student•

que es esto? me siento mas fuerte

Alejandro Sanchez

student•

Es el poder de un framework

Daniel Esteves

student•

¡Hola! Nos alerga saber que todo este conocimiento les está siendo útil. Cuéntenme, ¿ya realizaron proyectos con Bootstrap en su carrera profesional?

Deleted .

student•

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

José Rubial

student•

Reto cumplido! aquí esta https://codepen.io/franjorub/pen/ZMLqqo

Esteban Salazar

student•

gracias

Joel Alejandro Tovar Ramos

student•

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

David Alejandro Mosquera Moreno

student•

Algo como mobile first supongo

Julian Carelli

student•

Reto 1

Reto 2

Reto 3

Christian Brandon Macias Rodriguez

student•

entendí

ni pío

de offset...

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

he visto este vídeo como 20 veces...

David Gaviria

student•

Mira el video anterior, no deberías entrar con dificultades luego de eso.

Fernando Arroyo González

student•

Bro aun andas con problemas? Offset es como una compensación entre las columnas. en este caso lo que necesitas es estudiar alineación horizontal de Bootstrap. en la página viene lo esencial. https://getbootstrap.com/docs/4.0/utilities/flex/ En este link encontraras otras variaciones. Resumen tienes que decirle como alinear el contenido por fila y agregar igualmente las clases lg, md, sm, xl a esta alineación

Abraham Caso Torres

student•

reto 3

  &lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-12 col-sm-6 offset-sm-6&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-8 col-sm-8 offset-sm-2&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-3 offset-9 col-sm-3 offset-sm-0&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;/div&gt;```

Juan C Felizzola

student•

¡Reto cumplido!
Cualquier duda pueden preguntar por acá.

Jose Carlo Rojas Mora

student•

Isaí Ramírez

student•

en el reto tres… como seria la clase?
yo lo tengo así

<style>
        div[class] {
            height: 100px;
            background: #1bcbd8;
            border: 1px solid rgb(223, 9, 9);
            color: white;
        }
    </style>

Te dejo mi Github
https://github.com/SoterRamirez/BootstrapoRepaso

Daniel Valderrama Mendoza

student•

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/popper.js@1.16.0/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>

David Gonzaléz

student•

Gracias me fue muy útil para entender el concepto!

Mauricio Hernan Cabrera

student•

¡Reto cumplido!

<!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">
  <title>Reto. La grilla de bootstrap</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <style>
    .row > div {
      height: 100px;
      border: 1px solid white;
    }
    .color-primary {
      background: #01b795;
    }
    .color-secondary {
      background: #feca6e;
    }
    .color-tertiary {
      background: #d62f32;
    }
  </style>
</head>

<body>
  <!-- reto 1 -->
  <div class="container">
    <div class="row">
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
    </div>
    <div class="row">
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
    </div>
    
    <div class="row">
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
    </div>
    <div class="row">
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
      <div class="color-primary col"></div>
    </div>
    <div class="row">
      <div class="color-primary col"></div>
    </div>
  </div>

  <!-- reto 2 -->
  <div class="container">
    <div class="row">
      <div class="color-secondary col-md-6 col-lg">Fila 1/Col 1</div>
      <div class="color-secondary col-md-6 col-lg">Fila 1/Col 2</div>
      <div class="color-secondary col-md-6 col-lg">Fila 1/Col 3</div>
      <div class="color-secondary col-md-6 col-lg">Fila 1/Col 4</div>
    </div>
    <div class="row">
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 1</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 2</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 3</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 4</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 5</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 6</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 7</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 8</div>
      <div class="color-secondary col-12 col-md-6 col-lg">Fila 2/Col 9</div>
      <div class="color-secondary 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 color-tertiary">Fila 1/Col 1</div>
    </div>
    <div class="row">
      <div class="col-8 offset-md-2 color-tertiary">Fila 2/Col 1</div>
    </div>
    <div class="row">
      <div class="col col-md-6 offset-8 offset-md-0 color-tertiary">Fila 3/Col 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>

Félix Alejandro Zelaya Orellana

student•

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

Edward Steven Ramos Palacios

teacher•

Wow que bien te quedo! asi es. Siempre tendremos la documentación a la mano. Ahora podrias implementar algun pre procesador de css y extraer tus estilos en archivos propios.

Daiana Isabel Gamez Vivas

student•

Cumpliendo el reto

Leonel Moyano

student•

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>

Iván Toro

student•

La mejor forma de comprobar que estamos aprendiendo.

KEVIN BRAYAN LUNA FIGUEROA

student•

¡Reto cumplido! 😃

Reto: La grilla de Bootstrap

Introducción al curso

Repositorio del curso de bootstrap

Bootstrap 4 ¿Qué trae de nuevo esta versión?

¿Que es un framework de frontend?

Nuestro Proyecto: Hola Mundo de Bootstrap

Creando el sitio web

La grilla de Bootstrap

Reto: La grilla de Bootstrap

El footer

El header de nuestro sitio

Creando un carousel de imágenes

Agregando texto informativo del evento

Agregando botones

Las cards de Bootstrap 4

Pastillas de texto

Agregando un contenedor de ancho completo

Los formularios de Bootstrap 4

Agregando un tooltip

Scrollspy: Conociendo la ubicación del usuario en el header

Agregando un modal para comprar tickets

Un nuevo formulario para completar la compra

Deploy a producción

Poniendo nuestro sitio en producción

Conclusiones del curso