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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 433
Preguntas 27
Reto 1:
Valores de las clases de todos los elementos de la…
primera fila: col-4
segunda fila: col
tercera fila: col-6
cuarta fila: col
quinta fila: col-12 o col
Reto 2:
Valores de las clases de todos los elementos de la…
primera fila: col-6 col-md
segunda fila: col-12 col-md-6 col-lg
Reto 3:
Valores de las clases de todos los elementos de la…
primera fila: col-12 col-md-6 offset-md-6
segunda fila: col-8 offset-md-2
tercera fila: col-3 offset-9 offset-md-0
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Retos Grilla Bootstrap</title>
<style>
.col{
border: 1px solid white;
height: 70px;
}
.reto1 .col{
background-color:darkseagreen;
}
.reto2 .col{
background-color:burlywood;
}
.reto3 .col{
background-color: firebrick;
color: white;
}
</style>
</head>
<body>
<br>
<br>
<div class="container reto1">
<h2>Reto 1</h2>
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
<br>
<br>
<br>
<div class="container reto2">
<h2>Reto 2</h2>
<div class="row">
<div class="col col-6 col-md ">Fila 1/Col 1</div>
<div class="col col-6 col-md ">Fila 1/Col 2</div>
<div class="col col-6 col-md ">Fila 1/Col 3</div>
<div class="col col-6 col-md ">Fila 1/Col 4</div>
</div>
<div class="row">
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 1</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 2</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 3</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 4</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 5</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 6</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 7</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 8</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 9</div>
<div class="col col-12 col-md-6 col-lg">Fila 2/ Col 10</div>
</div>
</div>
<br>
<br>
<br>
<div class="container reto3">
<h2>Reto 3</h2>
<div class="row">
<div class="col col-12 col-md-6 offset-md-6">Fila 1/Col 1</div>
</div>
<div class="row">
<div class="col col-8 offset-md-2">Fila 2/ Col 1</div>
</div>
<div class="row">
<div class="col col-3 offset-9 offset-md-0">Fila 3/ Col 1</div>
</div>
</div>
<br>
<br>
<br>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>```
El diseño de las columnas de bootstrap se basa en el principio de mobile first. Es decir que las configuraciones por defecto aplican a la interfaz mas pequeña. De allí que la clase col aplique para el tamaño extra-small y si no se especifica lo contrario para los tamaños mas grandes, esta estructura de diseño se respetará a medida que el ancho del viewport se incremente. Por lo tanto, al momento de diseñar la interfaz hay que partir del diseño con el viewport del browser lo mas angosto posible y a partir de allí incrementar el ancho para ajustar el diseño con las otras clases -sm, -md, -lg, -xl
Para quienes estén tomando este curso con la versión v.5.0.2 de Bootstrap, hay un bug que va a afectar la resolución del segundo reto.
Este problema se menciona aquí https://github.com/twbs/bootstrap/issues/34335
Lo mejor sería trabajar con la version 5.0.1, para ello hay que sustituir con:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
y
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
que es esto? me siento mas fuerte
En la versión 5.0, la sección de clases Offset se encuentra en la pestaña de Columnas: https://getbootstrap.com/docs/5.0/layout/columns/#offsetting-columns
una manera de realizar los desafios es empezando por las vistas mas pequeÑas y poco a poco agregar los breakpoints. ya que la manera en que estan configrados en bootstrap son de “mayor que” ejemplo, la linea “col-md-6” le asignara 6columnas a esa grilla cuando se encuentre en pantalla con un tamaÑo MAYOR a 768px
Reto 1
Reto 2
Reto 3
No
entendí
ni pío
de offset…
quedé como si me estuviesen hablando mandarín antíguo…
he visto este vídeo como 20 veces…
reto 3
<body>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 offset-sm-6"></div>
</div>
<div class="row">
<div class="col-8 col-sm-8 offset-sm-2"></div>
</div>
<div class="row">
<div class="col-3 offset-9 col-sm-3 offset-sm-0"></div>
</div>
</div>
</div>```
listos!!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.col {
border: solid .5px white;
background-color: #3ad09f ;
}
.tipo1{
height: 100px;
}
.tipo2 .col-lg,
.tipo2 .col-sm,
.tipo2 .col-md,
.fondo{
background-color:#3ad09f;
border: solid .5px white;
height: 100px;
}
</style>
</head>
<body>
<div class="row tipo1">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row tipo1">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row tipo1">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row tipo1">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row tipo1">
<div class="col"></div>
</div>
<div class="row tipo2">
<div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 1</div>
<div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 2</div>
<div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 3</div>
<div class="col-lg col-md-3 col-sm-6 col-6">Fila 1/Col 4</div>
</div>
<div class="row tipo2">
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 1</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 2</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 3</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 4</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 5</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 6</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 7</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 8</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 9</div>
<div class="col-sm-12 col-md-6 col-lg">Fila 2/Col 10</div>
</div>
<div class="row tipo3">
<div class="col-12 col-sm-12 col-md-6 offset-md-6 fondo">Fila 1 / col 1</div>
</div>
<div class="row tipo3">
<div class="col-9 col-sm-9 col-md-8 offset-md-2 fondo">Fila 2 / col 2</div>
</div>
<div class="row tipo3">
<div class="offset-10 col-2 offset-sm-10 col-sm-2 col-md-3 offset-md-0 fondo">Fila 3 /Col 1</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
</body>
</html>
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!
Me demore un poco pero esta resuelto.
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:
<div class="container">
<div class="row">
<div class="col-6 col-md"></div>
<div class="col-6 col-md"></div>
<div class="col-6 col-md"></div>
<div class="col-6 col-md"></div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
<div class="col-12 col-md-6 col-lg"></div>
</div>
</div>
Segundo desafío tenemos quer tener en cuenta que el segundo desafío lo que varia son las medidas de las filas, desde un col-sm hasta un col-md que son las filas de small y medium
<style>
.col-6{
background-color: orange;
border: 1px solid white;
height: 100px;
}
.col-12{
background-color: orange;
border: 1px solid white;
height: 100px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container" >
Hello, world!
<div class="row">
<div class="col-6 col-md">
1
</div>
<div class="col-6 col-md">
2
</div>
<div class="col-6 col-md" >
3
</div>
<div class="col-6 col-md" >
4
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg">
1
</div>
<div class="col-12 col-md-6 col-lg">
2
</div>
<div class="col-12 col-md-6 col-lg" >
3
</div>
<div class="col-12 col-md-6 col-lg">
4
</div>
<div class="col-12 col-md-6 col-lg">
5
</div>
<div class="col-12 col-md-6 col-lg" >
6
</div>
<div class="col-12 col-md-6 col-lg">
7
</div>
<div class="col-12 col-md-6 col-lg">
8
</div>
<div class="col-12 col-md-6 col-lg">
9
</div>
<div class="col-12 col-md-6 col-lg">
10
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
<div class="row">
<div class="col">1</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6 col-md-3">1</div>
<div class="col-6 col-md-3">2</div>
<div class="col-6 col-md-3">3</div>
<div class="col-6 col-md-3">4</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg">1</div>
<div class="col-12 col-md-6 col-lg">2</div>
<div class="col-12 col-md-6 col-lg">3</div>
<div class="col-12 col-md-6 col-lg">4</div>
<div class="col-12 col-md-6 col-lg">5</div>
<div class="col-12 col-md-6 col-lg">6</div>
<div class="col-12 col-md-6 col-lg">7</div>
<div class="col-12 col-md-6 col-lg">8</div>
<div class="col-12 col-md-6 col-lg">9</div>
<div class="col-12 col-md-6 col-lg">10</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 offset-md-6">1</div>
</div>
<div class="row">
<div class="col-8 col-md-8 offset-md-2">2</div>
</div>
<div class="row">
<div class="col-3 col-md-3 offset-md-0 offset-9">3</div>
</div>
</div>```
Reto 2
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main stylesheet -->
<style>
.container
{
margin-top: 50px;
}
.col
{
background-color: #FECA6E;
border: 1px solid white;
height: 112px;
}
.col:hover
{
background-image: url("../img/doge.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-6 col-lg-3">
<P>Fila 1/Col 1</P>
</div>
<div class="col col-6 col-lg-3">
<P>Fila 1/Col 2</P>
</div>
<div class="col col-6 col-lg-3">
<P>Fila 1/Col 3</P>
</div>
<div class="col col-6 col-lg-3">
<P>Fila 1/Col 4</P>
</div>
</div>
<div class="row">
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 1</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 2</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 3</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 4</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 5</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 6</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 7</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 8</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 9</P>
</div>
<div class="col col-12 col-lg-6 col-xl">
<P>Fila 2/Col 10</P>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>```
Reto 3
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main stylesheet -->
<style>
.container
{
margin-top: 50px;
}
.col
{
background-color: #D62F32;
border: 1px solid white;
height: 112px;
color: white;
}
.col:hover
{
background-image: url("../img/doge.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col offset-md-6 col-12 col-md-6">
<p>Fila 1/Col 1</p>
</div>
</div>
<div class="row">
<div class="col col-6 col-md-8 offset-md-2">
<p>Fila 2/col 1</p>
</div>
</div>
<div class="row">
<div class="col col-3 offset-9 offset-md-0">
<p>Fila 3/Col 1</p>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>```
Mi segundo desafió
<div class="container">
<div class="row">
<div class="col-sm-6 col-lg-3">col 1</div>
<div class="col-sm-6 col-lg-3">col 2</div>
<div class="col-sm-6 col-lg-3">col 3</div>
<div class="col-sm-6 col-lg-3">col 4</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 1</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 2</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 3</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 4</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 5</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 6</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 7</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 8</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 9</div>
<div class="col-sm-6 col-md-6 col-lg col-xl">row2|col 10</div>
</div>
</div>
reto completado!!!
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6 col-sm-6 col-md col-lg"></div>
<div class="col-6 col-sm-6 col-md col-lg"></div>
<div class="col-6 col-sm-6 col-md col-lg"></div>
<div class="col-6 col-sm-6 col-md col-lg"></div>
</div>
<div class="row">
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
<div class="col-sm col-md-6 col-lg"></div>
</div>
</div>
<div class="container">
<div class="row">
<div style="background-color: red" class="col-12 col-sm-12 col-md-12 offset-lg-6 col-lg-6"></div>
</div>
<div class="row">
<div style="background-color: red" class="col-8 col-sm-8 col-md-8 offset-lg-2 col-lg-8"></div>
</div>
<div class="row">
<div style="background-color: red" class="col-3 offset-9 col-lg-3 offset-lg-0"></div>
</div>
</div>
-> Reto 1
<div class=“container” >
<div class=“row”>
<div class=“col” style=“height:70px;background:blueviolet; border: 1px solid white;” >
</div>
<div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
<div class="row">
<div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
<div class="row">
<div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
<div class="row">
<div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div> <div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
<div class="row">
<div class="col" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
</div>
-> reto 2
<div class=“container” style=“margin-top: 20px;;” >
<div class=“row”>
<div class="col-sm-6 col-lg-3 col-6 col-md-3 " style=“height:70px;background:blueviolet; border: 1px solid white;” >
</div>
<div class="col-sm-6 col-lg-3 col-6 col-md-3" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
<div class="col-sm-6 col-lg-3 col-6 col-md-3" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
<div class="col-sm-6 col-lg-3 col-6 col-md-3" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div><div class="col-12 col-md-6 col-lg" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
</div>
-> Reto 3
<div class=“container” >
<div class=“row”>
<div class=“col-md-10 offset-md-2 col-lg-6 offset-lg-6 col-sm-12 col-12” style=“height:70px;background:blueviolet; border: 1px solid white;” >
</div>
</div>
<div class="row">
<div class="col-md-8 offset-md-2 col-lg-8 offset-lg-2 col-8 offset-0 col-sm-8 offset-sm-0" style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
<div class="row">
<div class="col-md-3 col-3 offset-9 col-lg-3 offset-lg-0 col-sm-3 offset-sm-9 " style="height:70px;background:blueviolet; border: 1px solid white;" >
</div>
</div>
</div>
Reto 1
<style>
.container .row div {
background-color: #00b894;
border: 1px solid white;
height: 90px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">  </div>
<div class="col">  </div>
<div class="col">  </div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>```
Reto 2
<style>
.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.
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"> </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>
<p>Reto # 2</p>
<div class="container" style="background: yellow;">
<div class="row">
<div class="col-6 col-md-3">F1/C1</div>
<div class="col-6 col-md-3">F1/C2</div>
<div class="col-6 col-md-3">F1/C3</div>
<div class="col-6 col-md-3">F1/C4</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg">F2/C1</div>
<div class="col-12 col-md-6 col-lg">F2/C2</div>
<div class="col-12 col-md-6 col-lg">F2/C3</div>
<div class="col-12 col-md-6 col-lg">F2/C4</div>
<div class="col-12 col-md-6 col-lg">F2/C5</div>
<div class="col-12 col-md-6 col-lg">F2/C6</div>
<div class="col-12 col-md-6 col-lg">F2/C7</div>
<div class="col-12 col-md-6 col-lg">F2/C8</div>
<div class="col-12 col-md-6 col-lg">F2/C9</div>
<div class="col-12 col-md-6 col-lg">F2/C10</div>
</div>
</div>
<p>Reto # 3</p>
<div class="container" style="background: red;">
<div class="row">
<div class="col-12 col-lg-6 offset-lg-6">F1/C1</div>
</div>
<div class="row">
<div class="col-8 offset-lg-2">F2/C1</div>
</div>
<div class="row">
<div class="col-3 offset-9 offset-lg-0">F3/C1</div>
</div>
</div>
<!doctype html>
<html lang=“en”>
<head>
<!-- Required meta tags -->
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.col{
border: 1px solid black;
padding: 23px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class=“container” style=“background: red;”>
<div class=“row”>
<div class=“col”>
1
</div>
<div class=“col”>
2
</div>
<div class=“col”>
3
</div>
</div>
<div class=“row”>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
<div class=“col”>
4
</div>
</div>
<div class=“row”>
<div class=“col”>
5
</div>
<div class=“col”>
5
</div>
</div>
<div class=“row”>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
<div class=“col”>
6
</div>
</div>
<div class=“row”>
<div class=“col”>
7
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=“https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=“sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=“anonymous”></script>
<script src=“https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js” integrity=“sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=“anonymous”></script>
<script src=“https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js” integrity=“sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI” crossorigin=“anonymous”></script>
</body>
</html>
Hola agradezco su feedback:
https://github.com/JulesCubs/Grid_examples_Bootstrap
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 “estire” y ocupe el 100% del ancho del container)
quinta fila: col-12
Primer ejercicio: fila 1=3 columnas, fila 2=10 columnas, fila 3=dos columnas, fila 4=5 columnas, fila 5=1 columna.
Reto Finalizado! Me gustó mucho ésta practica.
https://github.com/MajoJuanta/GrillaBoostrap
Ya entiendo por que piden tanto BootStrap, saber esto te ayuda a maquetar mas rápido y no perder tanto tiempo en @media
.
Me gusta! 👍
1er reto:
<div class="container" style="background-color: rgb(53, 133, 160)">
<div class="row">
<div class="col a">1</div>
<div class="col a">2</div>
<div class="col a">3</div>
</div>
<div class="row">
<div class="col a">1</div>
<div class="col a">2</div>
<div class="col a">3</div>
<div class="col a">4</div>
<div class="col a">5</div>
<div class="col a">6</div>
<div class="col a">7</div>
<div class="col a">8</div>
<div class="col a">9</div>
<div class="col a">10</div>
</div>
<div class="row">
<div class="col a">1</div>
<div class="col a">2</div>
</div>
<div class="row">
<div class="col a">1</div>
<div class="col a">2</div>
<div class="col a">3</div>
<div class="col a">4</div>
<div class="col a">5</div>
</div>
<div class="row">
<div class="col a">1</div>
</div>
</div>
2do reto:
<div class="container" style="background-color: rgb(53, 133, 160)">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg a">1</div>
<div class="col-sm-6 col-md-6 col-lg a">2</div>
<div class="col-sm-6 col-md-6 col-lg a">3</div>
<div class="col-sm-6 col-md-6 col-lg a">4</div>
</div>
<div class="row">
<div class="col-lg col-md-6 a">2.1</div>
<div class="col-lg col-md-6 a">2.2</div>
<div class="col-lg col-md-6 a">2.3</div>
<div class="col-lg col-md-6 a">2.4</div>
<div class="col-lg col-md-6 a">2.5</div>
<div class="col-lg col-md-6 a">2.6</div>
<div class="col-lg col-md-6 a">2.7</div>
<div class="col-lg col-md-6 a">2.8</div>
<div class="col-lg col-md-6 a">2.9</div>
<div class="col-lg col-md-6 a">2.10</div>
</div>
</div>
3er reto:
<div class="container" >
<div class="row">
<div class="col-12 col-md-6 offset-md-5 a">1</div>
</div>
<div class="row">
<div class="col-8 col-md-6 col-lg-8 offset-md-2 a">2</div>
</div>
<div class="row">
<div class="col-3 offset-9 offset-md-0 a">3</div>
</div>
Aquí les dejo el como resolví los retos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<title>Document</title>
<style>
.col {
border: 1px solid white;
height: 70px;
}
</style>
</head>
<body>
<h1>Reto 1</h1>
<div class="container text-center" style="background-color: rgb(31, 211, 154);">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col col-12"></div>
</div>
</div>
<h1>Reto 2</h1>
<div class="container text-center" style="background-color: rgb(28, 235, 49);">
<div class="row">
<div class="col col-6 col-sm"></div>
<div class="col col-6 col-sm"></div>
<div class="col col-6 col-sm"></div>
<div class="col col-6 col-sm"></div>
</div>
<div class="row">
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
<div class="col col-12 col-sm-6 col-md"></div>
</div>
</div>
<h1>Reto 3</h1>
<div class="container text-center">
<div class="row">
<div class="col col-12 col-md-6 offset-md-6" style="background-color: rgb(235, 45, 28);"></div>
</div>
<div class="row">
<div class="col col-8 col-md-8 offset-md-2" style="background-color: rgb(235, 45, 28);"></div>
</div>
<div class="row">
<div class="col col-3 offset-9 offset-md-0" style="background-color: rgb(235, 45, 28);"></div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
Excelente el aprendizaje con retos
Hola. Estamos en la 5.1 pero igual aprendiendo con el buen Sasha. Dejo mi aporte al reto.
<div class="container text-center caja">
<div class="row reto1">
<div class="col-4">
col
</div>
<div class="col-4">
col
</div>
<div class="col-4">
col
</div>
</div>
<div class="row reto1">
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
</div>
<div class="row reto1">
<div class="col-6">
col
</div>
<div class="col-6">
col
</div>
</div>
<div class="row reto1">
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
<div class="col">
col
</div>
</div>
<div class="row reto1">
<div class="col">
col
</div>
</div>
</div>
<div class="container text-center caja2">
<div class="row reto2">
<div class="col-6 col-md-3">
Col 1 fila1
</div>
<div class="col-6 col-md-3">
Col 2 fila1
</div>
<div class="col-6 col-md-3">
Col 3 fila1
</div>
<div class="col-6 col-md-3">
Col 4 fila1
</div>
</div>
<div class="row reto2">
<div class="col-12 col-md-6 col-lg">
Col 1 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 2 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 3 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 4 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 5 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 6 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 7 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 8 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 9 fila2
</div>
<div class="col-12 col-md-6 col-lg">
Col 10 fila2
</div>
</div>
</div>
<div class="container text-center caja3">
<div class="row justify-content-md-end reto3">
<div class="col col-md-6">
Col 1 fila1
</div>
</div>
<div class="row reto3 justify-content-md-center">
<div class="col-8">
Col 1 fila2
</div>
</div>
<div class="row justify-content-end justify-content-md-start reto3">
<div class="col-3">
Col 1 fila3
</div>
</div>
</div>
Reto 3
<div class="container">
<div class="row">
<div class="col col-sm offset-md-6">Fila 1/Col 1</div>
</div>
<div class="row">
<div class="col col-8 offset-md-2">Fila 2/Col 1</div>
</div>
<div class="row">
<div class="col col-3 offset-9 offset-md-0">Fila 3/Col 1</div>
</div>
</div>
Ojala dentro del curso mas adelante enseñen como usar el offset la verdad es que se complico mucho al trabajar con el y tuve que hacer trampa con código de compañeros
<style>
.col {
border: 1px solid white;
height: 5rem;
}
.R {
text-align: center;
}
</style>
</head>
<body>
<h1 class="R">Reto 1</h1>
<div class="container " style="background:green ;">
<div class="row row-col-4">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row row-cols-10">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row row-cols-2">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row row-cols-4">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row row-col">
<div class="col"></div>
</div>
</div>
Retos completados
Reto 1
<div class="container retoOne">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
</div>
Reto 2
<div class="container retoTwo">
<div class="row">
<div class="col-6 col-md-3">row1/col1</div>
<div class="col-6 col-md-3">row1/col2</div>
<div class="col-6 col-md-3">row1/col3</div>
<div class="col-6 col-md-3">row1/col4</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg">row2/col1</div>
<div class="col-12 col-md-6 col-lg">row2/col2</div>
<div class="col-12 col-md-6 col-lg">row2/col3</div>
<div class="col-12 col-md-6 col-lg">row2/col4</div>
<div class="col-12 col-md-6 col-lg">row2/col5</div>
<div class="col-12 col-md-6 col-lg">row2/col6</div>
<div class="col-12 col-md-6 col-lg">row2/col7</div>
<div class="col-12 col-md-6 col-lg">row2/col8</div>
<div class="col-12 col-md-6 col-lg">row2/col9</div>
<div class="col-12 col-md-6 col-lg">row2/col10</div>
</div>
</div>
Reto 3
<div class="container retoThree">
<div class="row">
<div class=" col--brown col col-md-6 offset-md-6">row1/col1</div>
</div>
<div class="row">
<div class="col--brown col-8 col-md-8 offset-md-2">row2/col1</div>
</div>
<div class="row --brown">
<div class="col--brown col-3 offset-9 col-md-3 offset-md-0">row3/col1</div>
</div>
</div>
comparto mi solución: https://github.com/hernandw/bootstrap
Challenge 2
<main class="container">
<section class="row main-section">
<div class="col-6 col-md-3 main-article">1</div>
<div class="col-6 col-md-3 main-article">2</div>
<div class="col-6 col-md-3 main-article">3</div>
<div class="col-6 col-md-3 main-article">4</div>
</section>
<section class="row main-section">
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">1</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">2</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">3</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">4</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">5</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">6</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">8</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">7</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">9</div>
<div class="col-sm-12 col-md-6 col-lg-1 flex-grow-1 main-article">10</div>
</section>
</main>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.col {
border: 1px solid white;
height: 70px;
}
.reto3 {
height: 70px;
}
</style>
</head>
<body>
<h2>Reto 1</h2>
<div class="container" style="background-color: green;">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
</div>
<h2>Reto 2</h2>
<div class="container reto2" style="background-color: antiquewhite;">
<div class="row">
<div class="col col-6 col-md">Fila 1 / Col 1</div>
<div class="col col-6 col-md">Fila 1 / Col 2</div>
<div class="col col-6 col-md">Fila 1 / Col 3</div>
<div class="col col-6 col-md">Fila 1 / Col 4</div>
</div>
<div class="row">
<div class="col col-12 col-md">Fila 2 / Col 1</div>
<div class="col col-12 col-md">Fila 2 / Col 2</div>
<div class="col col-12 col-md">Fila 2 / Col 3</div>
<div class="col col-12 col-md">Fila 2 / Col 4</div>
<div class="col col-12 col-md">Fila 2 / Col 5</div>
<div class="col col-12 col-md">Fila 2 / Col 6</div>
<div class="col col-12 col-md">Fila 2 / Col 7</div>
<div class="col col-12 col-md">Fila 2 / Col 8</div>
<div class="col col-12 col-md">Fila 2 / Col 9</div>
<div class="col col-12 col-md">Fila 2 / Col 10</div>
</div>
</div>
<h2>Reto 3</h2>
<div class="container reto3" >
<div class="row">
<div class="col col-12 col-md-6 offset-md-6" style="background-color: antiquewhite;">Fila 1 / Col 2</div>
</div>
<div class="row">
<div class="col col-8 col-md-6 offset-md-2" style="background-color: antiquewhite;">Fila 1 / Col 2</div>
</div>
<div class="row">
<div class="col col-3 offset-9 offset-md-0" style="background-color: antiquewhite;">Fila 1 / Col 2</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
Reto 1
<STyle>
.col{
background-color: seagreen;
border: 1px solid white;
height: 100px;
color: white;
}
</STyle>
</head>
<body>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
<div class=“col”>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
<div class=“col”>
</div>
<div class=“col”>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col”>
</div>
</div>
</div>
<!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>
<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"> </div>
Me encantó
Respuesta:
HTML
<!doctype html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link href=“https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3” crossorigin=“anonymous”>
<link rel=“stylesheet” href=“style.css”>
<title>retos</title>
</head>
<body>
<h1>Retos</h1>
<h2>Reto 1</h2>
<div class=“container”>
<div class=“row align-items-start”>
<div class=“col-4”>
columan 1
</div>
<div class=“col-4”>
columna 2
</div>
<div class=“col-4”>
columna 3
</div>
</div>
<div class=“row”>
<div class=“col”>
columna 1
</div>
<div class=“col”>
columna 2
</div>
<div class=“col”>
columna 3
</div>
<div class=“col”>
columna 4
</div>
<div class=“col”>
columna 5
</div>
<div class=“col”>
columna 6
</div>
<div class=“col”>
columna 7
</div>
<div class=“col”>
columna 8
</div>
<div class=“col”>
columna 9
</div>
<div class=“col”>
columna 10
</div>
</div>
<div class=“row align-items-end”>
<div class=“col-6”>
columna 1
</div>
<div class=“col-6”>
columna 2
</div>
</div>
<div class=“row align-items-end”>
<div class=“col”>
columna 3
</div>
<div class=“col”>
columna 4
</div>
<div class=“col”>
columna 5
</div>
<div class=“row align-items-end”>
<div class=“col-14”>
Columna 16
</div>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------>
<h2>Reto 2</h2>
<div class=“container”>
<div class=“row align-items-start”>
<div class="col col-6 col-md ">
Fila 1/Col 1
</div>
<div class="col col-6 col-md "
>Fila 1/Col 2
</div>
<div class="col col-6 col-md ">
Fila 1/Col 3
</div>
<div class="col col-6 col-md ">
Fila 1/Col 4
</div>
</div>
<div class="row align-items-end">
<div class="col">
Fila 2/Col 1
</div>
<div class="col">
Fila 2/Col 2
</div>
<div class="col">
Fila 2/Col 3
</div>
<div class="col">
Fila 2/Col 4
</div>
<div class="col">
Fila 2/Col 5
</div>
<div class="col">
Fila 2/Col 6
</div>
<div class="col">
Fila 2/Col 7
</div>
<div class="col">
Fila 2/Col 8
</div>
<div class="col">
Fila 2/Col 9
</div>
<div class="col">
Fila 2/Col 10
</div>
</div>
</div>
<!----------------------------------------------------------------------------------->
<h2>Reto 3</h2>
<div class=“container”>
<div class=“row”>
<div class=“row align-items-start”>
<div class=“col-12 col-md-6 offset-md-6”>
Fila 1/Col 1
</div>
<div class="row align-items-start">
<div class="col-8 offset-md-2">
Fila 2/Col 1
</div>
</div>
<div class="row align-items-start">
<div class="col-3 offset-9 offset-md-0">
Fila 3/Col 1
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
CSS
*{
margin: 0;
}
body{
background-color: rgb(44, 41, 41);
color: whitesmoke;
}
.col-4{
background-color: blue;
color: rgb(44, 41, 41);
border-style: solid;
}
.col{
background-color: aqua;
color: rgb(44, 41, 41);
border-style: solid;
}
.col-6{
background-color: blueviolet;
color: rgb(44, 41, 41);
border-style: solid;
}
.col-12{
background-color: brown;
color: rgb(44, 41, 41);
border-style: solid;
}
.col-8{
background-color: brown;
color: rgb(44, 41, 41);
border-style: solid;
}
.col-3{
background-color: brown;
color: rgb(44, 41, 41);
border-style: solid;
}
En el segundo desafío no me funcionaba poner solamente “col-lg”. Tuve que agregar otras dos columnas para que funcionara y ponerle a las 12 columnas "col-lg-1"
Aquí está mi aporte:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/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=“col col-8 offset-md-2”>
col col-8 : el tamaño de la columna va ser de 8 columnas, y pode feceto va a estar posicionado del lado izquierdo.
offset-md-2 : cuando el tamaño de pantalla sea mayor a mediano, la columna se corre 2 columnas a la derecha.
<div class=“col col-3 offset-9 offset-md-0”>
col col-3 offset-9 : el tamaño de la columna será de 3 columnas, y va a estar 9 columnas a la derecha.
offset-md-0 : cuando el tamaño de la pantalla sea mayor a mediano, la columna se coloca a la izquierda, por eso el 0, el margen izquierdo será cero.
En bootstrap 4.6.x puedes definir el número de columntas para cada renglon de la siguiente manera:
<div class="row row-cols-2 row-cols-md-4">
Reto 1:
.
Reto 2:
.
Reto 3:
Ejercicio 1.
<!-- -->
<div class=“container-fluid”>
<div class=“row”>
<div class=“col-4 col-md-4” style=“background: gray;height: 50px; border: 1px solid white;”></div>
<div class=“col-4 col-md-4” style=“background: gray;height: 50px; border: 1px solid white;”></div>
<div class=“col-4 col-md-4” style=“background: gray; height: 50px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
<div class=“col” style=“background: #808080; height: 60px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col col-md-6” style=“background: gray; height: 50px; border: 1px solid white;”></div>
<div class=“col col-md-6” style=“background: gray; height: 50px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
<div class=“col” style=“background: #9d9d9d; height: 50px; border: 1px solid white;”></div>
</div>
<!-- -->
<div class=“row”>
<div class=“col sm-12 md-12 lg-12” style=“background: #c9c9c9; height: 50px; border: 1px solid white;” >
</div>
</div>
<!DOCTYPE html>
<html lang=“en”>
<head>
<!-- Required meta tags -->
<meta charset=“utf-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style>
.col-4 {
border: 1px solid white;
height: 90px;
}
.col-1 {
border: 1px solid white;
height: 90px;
}
.col-6 {
border: 1px solid white;
height: 90px;
}
.col {
border: 1px solid white;
height: 90px;
}
.col-lg {
border: 1px solid white;
height: 100px;
}
.col-lg-1 {
border: 1px solid white;
height: 100px;
}
.col-md-3 {
border: 1px solid white;
height: 100px;
}
.col-md-5 {
border: 1px solid white;
height: 100px;
}
</style>
<body>
<div class=“container”>
<div class=“row”>
<div class=“col-4” style=“background-color: turquoise”></div>
<div class=“col-4” style=“background-color: turquoise”></div>
<div class=“col-4” style=“background-color: turquoise”></div>
</div>
<div class="row">
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
<div class="col-1" style="background-color: turquoise"></div>
</div>
<div class="row">
<div class="col-6" style="background-color: turquoise"></div>
<div class="col-6" style="background-color: turquoise"></div>
</div>
<div class="row">
<div class="col" style="background-color: turquoise"></div>
<div class="col" style="background-color: turquoise"></div>
<div class="col" style="background-color: turquoise"></div>
<div class="col" style="background-color: turquoise"></div>
<div class="col" style="background-color: turquoise"></div>
</div>
<div class="row">
<div class="col" style="background-color: turquoise"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col" style="background-color: white"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg col-sm-6" style="background-color: wheat">
fila1/Col1
</div>
<div class="col-lg col-sm-6" style="background-color: wheat">
fila1/Col2
</div>
<div class="col-lg col-sm-6" style="background-color: wheat">
fila1/Col3
</div>
<div class="col-lg col-sm-6" style="background-color: wheat">
fila1/Col4
</div>
</div>
<div class="row">
<div class="col-lg-1" style="background-color: wheat">fila1/Col1</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col2</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col3</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col4</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col5</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col6</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col7</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col8</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col9</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col10</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col11</div>
<div class="col-lg-1" style="background-color: wheat">fila1/Col12</div>
</div>
<div class="container">
<div class="row">
<div class="col" style="background-color: white"></div>
</div>
</div>
<div class="container">
<div class=“row”>
<div class="col-md-3 offset-md-9" style="background-color:red" >.col-md-4 .offset-md-4</div>
</div>
<div class=“row”>
<div class=“col-md-5 offset-md-6” style=“background-color:red” >.col-md-3 .offset-md-3</div>
</div>
<div class=“row”>
<div class=“col-md-5 offset-md-2” style=“background-color:red” >.col-md-6 .offset-md-3</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Mi solución al primer reto:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Reto 1</title>
<style>
.col {
height: 80px;
width: 80px;
background: #3ACDB9;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Dejo por aquí mi código en Git Hub los invito a revisar, cualquier pregunta o sugerencia escriban aquí…
https://github.com/JoseRamirezOz/LaboratorioBootstrap/tree/experimentos/LaboratorioBootstrap/Grilla
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=“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-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á esta el ejercicio, sorry about the typo.
https://grid-system-breakpoints-offset.netlify.app
https://github.com/Yeldary/grid-system-practica
Mi solución al reto
Github: https://github.com/JCervantesB/Boostrap_Platzi
Live: https://jcervantesb.github.io/Boostrap_Platzi/
Acá les comparto mi resolución de los ejercicios Ejercicios Resueltos
Hola, solo a manera de aporte, esta lo siguiente:
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:
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=“en”>
<head>
<!-- Required meta tags -->
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<link rel=“stylesheet” href=“css/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=“container”>
<div class=“row”>
<div class=“col”>
<p>1</p>
</div>
<div class=“col”>
<p>2</p>
</div>
<div class=“col”>
<p>3</p>
</div>
</div>
<div class=“row”>
<div class=“col”>
<p>1</p>
</div>
<div class=“col”>
<p>2</p>
</div>
<div class=“col”>
<p>3</p>
</div>
<div class=“col”>
<p>4</p>
</div>
<div class=“col”>
<p>5</p>
</div>
<div class=“col”>
<p>6</p>
</div>
<div class=“col”>
<p>7</p>
</div>
<div class=“col”>
<p>8</p>
</div>
<div class=“col”>
<p>9</p>
</div>
<div class=“col”>
<p>10</p>
</div>
</div>
<div class=“row”>
<div class=“col”>
<p>1</p>
</div>
<div class=“col”>
<p>2</p>
</div>
</div>
<div class=“row”>
<div class=“col”>
<p>1</p>
</div>
<div class=“col”>
<p>2</p>
</div>
<div class=“col”>
<p>3</p>
</div>
<div class=“col”>
<p>4</p>
</div>
<div class=“col”>
<p>5</p>
</div>
</div>
<div class=“row”>
<div class=“col”>
<p>1</p>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6”>
<p>4</p>
</div>
<div class=“col-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6”>
<p>4</p>
</div>
<div class=“col-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6”>
<p>4</p>
</div>
<div class=“col-xxl-3 col-xl-3 colo-md-3 col-sm-3 col-6”>
<p>4</p>
</div>
</div>
<div class=“row”>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col-xxl col-md-6 col-12”>
<p>1</p>
</div>
<div class=“col”>
<p></p>
</div>
</div>
</div>
<div class=“container”>
<div class=“row”>
<div class=“col col-md-6 offset-md-6”>
<p>Raro1</p>
</div>
</div>
<div class=“row”>
<div class=“col-8 col-md-8 offset-md-2”>
<p>Raro2</p>
</div>
</div>
<div class=“row”>
<div class=“col-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=“container”>
<div class=“row”>
<div class=“col”>
1
</div>
<div class=“col”>
1
</div>
<div class=“col”>
1
</div>
</div>
<div class=“row”>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
<div class=“col”>col</div>
</div>
<div class=“row”>
<div class=“col”>3</div>
<div class=“col”>3</div>
</div>
<div class=“row”>
<div class=“col”>4</div>
<div class=“col”>4</div>
<div class=“col”>4</div>
<div class=“col”>4</div>
<div class=“col”>4</div>
</div>
<div class=“row”>
<div class=“col”>
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
<!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>
.container {
height: 500px;
margin-top: 30px;
.row {
height: 100px;
.col {
background-color: rgb(0, 189, 189);
border: 1px solid white;
}
}
}
Reto2
<!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>
.container {
height: 200px;
margin-top: 30px;
.row {
height: 100px;
div {
background-color: #feca6e;
border: 1px solid white;
}
}
}
Reto 3
<!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>
.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=“col-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=“container reto3”>
<div class=“row”>
<div class=“col col-12 col-md-6 offset-md-6”>
</div>
</div>
<div class=“row”>
<div class="col col-8 offset-md-2 "></div>
</div>
<div class=“row”>
<div class=“col col-3 offset-9 offset-md-0”></div>
</div>
</div>
Reto 1:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.