Parece que ya no usan el gradient en el footer de Platzi, aquí se los comparto:
#footer{
background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5472);
}
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
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
15 Días
1 Hrs
59 Min
30 Seg
El footer
7/21Recursos
Vamos a crear el footer de nuestro website. Recuerdas que puedes consultar toda la documentaciónde Bootstrap en getbootstrap.com . Encuentra más información aquí: https://getbootstrap.com/docs/4.1/components/card/#header-and-footer
Aportes 82
Preguntas 22
Ordenar por:
Con el py-4 aplicarías el padding arriba y abajo a la vez 😄
background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5372);
Para que el contenido (texto) de las columnas se alineen al centro respecto a la vertical, incluir la siguiente clase en el row:
align-items-center
bootstrap es mobile-first
Asi mismo como usamos pb y pt para agregar padding, se pueden usar las clases mb y mt para agregar margen
Para los estudiantes que no puedan quitar los estilos de los enlaces en REACT, lo pueden hacer a travez de un className de ‘text-reset text-decoration-none’
Este es el código del background de Platzi:
linear-gradient(90deg,#1c3643,#273b47 50%,#1e5372)
Excelente clase. En lo personal yo pondría el Padding (pb-4 pt-4) en el CSS para dejar el código lo más limpio posible.
index.css
#footer {
padding-bottom: 2px;
padding-top: 2px;
}
Podemos centrar el texto de una fila con el comando:
<div class="row text-center"> </div>
Para añadir padding directamente a un elemento, podemos añadir dentro de las clases, la clase .pt-[numero] (para padding-top) y pb-[numero] (para padding-bottom).
Que loco, estoy asombrado por las herramientas que te ofrece Bootstrap
Hola, al crear el proyecto a mi me salían los enlaces subrayados, he tenido que agregar a los estilos de los enlaces text-decoration: none; para que saliese igual que en el proyecto explicado. No sé por que a el le salen sin la decoración. ¿Hubo algún momento en que lo hizo?
Para agregar el padding top y bottom también se puede usar py-4 😄
Bootstrap trae unos estilos predefinidos…parta personalizar algunos estilos creo mi hoja de estilos y le hago referencia en mi index.html debajo del link que me esta trayendo los estilos de bootstrap para que se de el efecto cascada y mis estilos pisen o sobre escriban sobre los de este framework
En vez de usar las clases pt-4 y pb-4 también podemos usar simplemente py-4 y nos sirve para ambos, top y bottom a la vez (py = padding eje Y, es decir vertical).
Lo mismo con pl y pr (padding left y padding right), podemos usar px y obtenemos el mismo resultado sin tener que escribir dos veces (px = padding eje X, es decir horizontal).
En lugar de pb pt se puede usar directamente py-4 que surte el mismo efecto, aplicando padding hacia arriba y hacia abajo al elemento.
Se puede usar Flex-Box en el DIV para la grilla “Row” de esta manera.
<div class="row text-center d-flex align-items-center"></div>
Así el texto se centrará verticalmente.
Como aporte en vez de usar pb-4 y pt-4, podemos escribir py-4
Y= es top+Bottom y X= Right+Left
div class="footer py-4" id="footer">
Les comparto el código de index.css
#footer {
background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5372);
}
#footer a {
color: white;
}
Bootstrap tiene mucho poder y es muy fácil de manejar
Puedes utilizar la clase bg-dark de Bootstrap para darle un color de fondo oscuro al footer.
Me estoy enamorando de Bootstrap xdd
Wow llevo mucho tiempo usando Bootstrap y nunca había escuchado hablar de pb y pt, Excelente Sacha!!!
Locoooooo! Esto está genial.
Increíble como funciona Bootstrap y todo la potencialidad que tiene!
No sabía toda la magia y el código que uno se puede ahorrar con bootstrap… 😄
Que genial!! No me lo esperaba lo del padding🤣
Buena Clase.!!!
<footer id="footer" class="bp-4 pt-4">
<div class="conteiner">
<div class="row text-center">
<div class="col-12 col-lg">
<a href="#">Preguntas frecuentes</a>
</div>
<div class="col-12 col-lg">
<a href="#">Contáctanos</a>
</div>
<div class="col-12 col-lg">
<a href="#">Prensa</a>
</div>
<div class="col-12 col-lg">
<a href="#">Terminos y condiciones</a>
</div>
<div class="col-12 col-lg">
<a href="#">Privacidad</a>
</div>
</div>
</div>
</footer>```
Excelente Clase, gracias Profesor Sacha.
Me pregunto si no sería bueno, aunque fuera en otro proyecto, meter el footer dentro de un container.
Alguien lo practica en sus proyectos?
También podemos utilizar la class=“py-4” para agregar padding al top y bottom
Definitivamente tener mucho en cuenta el diseño responsivo.
Excepcional la clase muchas gracias profesor Sacha
Excelente muy buena la clase para seguir profundizando los conocimientos del desarrollo web…
Para lo que tienen problemas con el -ml,-mr, -pl y -pr es por la actualización 5.0.0 de bootstrap,
En este caso el reemplazo de -ml es -ms y el de -mr es -me, lo mismo con el padding.
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">
<!-- 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">
<style type="text/css">
.col {
border:1px solid blue;
}
</style>
<title>Practica bootstrap</title>
</head>
<body>
<div class="container" style="background: red;">
<!--1era Fila-->
<div class="row">
<div class="col-6 col-md col-lg">
1
</div>
<div class="col-6 col-md col-lg">
2
</div>
<div class="col-6 col-md col-lg">
3
</div>
<div class="col-6 col-md col-lg">
4
</div>
</div>
<!--2nda Fila-->
<!--tamaños pequeños:
-1era Fila: 2 columnas por fila
-2nda fila: 1 columna por fila
-->
<!--tamaños medianos:
-1era Fila: 4 columnas por fila: equitativo
-2nda fila: 2 columna por fila
-->
<!--tamaños grandess:
-1era Fila: equitativo
-2nda fila: equitativo
-->
<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>
<!-- 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://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>```
muy buena clase y ejercicio
Despues del hacer el reto con esto me ha quedado aún más claro el uso de la clase container
Listo clase aprendida grabada y practicada
excelente explicacion sacha. 😃
ahora ya se que significaba pb y pt
Muy práctico utilizar “Bootstrap”.
Ahi en vez de utilizar el PB y el PT se puede poner PY que hace referencia al eje Y y si se quiere hacer con los laterales se pone PX
Siento que estoy aprendiendo un nuevo super poder. 🤯
Que divertido es jugar con Bootstrap lo único que se me ocurre que puede ser una desventaja o por lo menos para mi, es que en algún momento:
- En un diseño mas grande uno se “pisara” con los estilos y tendrá que usar !important lo cual no es una buena practica.
- Toca tener buena memoria, lo cual será visitando el sitio de Bootstrap para aplicar los estilos correctos o practicando para afianzarlo como con el css puro.
Vamos a seguir, se ve prometedor.
Muy bueno no me acordaba de utilizar el padding así…
Es necesario ponerle la id footer?
Para alinear el contenido de nuestro row en el centro, de forma vertical, puedes agregar la clase align-items-center.
Ahora veo de donde saco su grilla el framework de Materialize 😛
Muy buena…
Increíble curso :3
Realmente estoy aprendiendo mucho con usted profesor Sacha
aprendo cosas que tienen que ver con el curso y cosas que no
Muy buen profesor, inspira a seguir aprendiendo
Clase magistral !!!-
Genial !!!
para empezar el proyecto metan esta linea de código con git.
primero tienen que estar en la carpeta del proyecto, luego introduzcan esto:
git checkout 846ede9445b14e3f01bf252651666c1d415de400
ese codigo los llevara al principio del projecto
Pues yo me atasqué en el reto 3
Genial, gran clase, genial los aportes de los compañeros
Excelente ❤️
Hasta el momento Boostrap me ha parecido el framework más sencillito de CSS
Todo muy fácil hasta ahora
un consejo para utilizar los brack poind al momento de ajustar las medida de nuestras columnas con boostrap es pensar en un modelo Mobile First
es decir, configurar como se vería en dispositivos pequeños y luego pasar a pantallas mas grandes
<!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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
.reto1 .col {
background-color: blue;
border: 1px solid black;
height: 50px;
}
.reto2 .col {
background-color: yellow;
border: 1px solid black;
height: 50px;
}
.reto3 .col {
background-color: orangered;
border: 1px solid black;
height: 70px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container reto1" style="background-color: 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" >
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>
</div>
<br>
<div class="container reto2">
<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>
<div class="container reto3">
<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 col-md-8 offset-md-2">
Fila 2/Col 2
</div>
</div>
<div class="row justify-content-start">
<div class="col col-3 offset-9 offset-md-0">
Fila 3/Col 3
</div>
</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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and 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-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>
#footer{
background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5472);
}
por cuestiones de orden, lo ideal sería el css crearlo dentro de una carpeta y nombrarlo como style.css
molesta que saltes a otras pantallas tan rápido con tab y los accesos directos del teclado
#footer {
background: linear-gradient(90deg,#001c30,#001c50 25%,#001c80);
}
El color de fondo actual del footer es #03091E
WOOOO debo admitir que la calidad de platzi en sus cursos anteriores era infinitamente mejor, se extraña el platzi 2019, 2018, 2020
Gracias
Good!
estupendo, gracias sacha
Me encanta Bootstrap, de verdad que si, claro yo vengo de css puro y procesadores. Mucho mas fácil.
exelente
que bien!
si esta mas rapido crear todo con bootstrap, es cuestion de acostumbrarse.
<footer id="footer" class="pb-4 pt-4">
<div class="container">
<div class="row text-center">
<div class="col-12 col-lg">
<a href="#">Preguntas Frecuentes</a>
</div>
<div class="col-12 col-lg">
<a href="#">Contáctanos</a>
</div>
<div class="col-12 col-lg">
<a href="#">Prensa</a>
</div>
<div class="col-12 col-lg">
<a href="#">Conferencias</a>
</div>
<div class="col-12 col-lg">
<a href="#">Términos y Condiciones</a>
</div>
<div class="col-12 col-lg">
<a href="#">Privacidad</a>
</div>
<div class="col-12 col-lg">
<a href="#">Estudiantes</a>
</div>
</div>
</div>
</footer>```
HTML
<footer id="footer" class="pb-4 pt-4"> <!-- padding bottom padding top -->
<div class="container">
<div class="row text-center">
<div class="col-12 col-lg">
<a href="#">Preguntas Frecuentes</a>
</div>
<div class="col-12 col-lg">
<a href="#">Contactanos</a>
</div>
<div class="col-12 col-lg">
<a href="#">Prensa</a>
</div>
<div class="col-12 col-lg">
<a href="#">Terminos y condiciones</a>
</div>
</div>
</div>
</footer>
CSS
#footer{
background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5472);
}
#footer a {
color: white;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
link:css abreviatura emmet
Creo que acabo de encontrar el amor 😆
Bootstrap está muy genial 👏
Este es mi codigo para los desafios
<code>
<body>
<h2>Desafio 1</h2>
<div class="container-uno" >
<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>
</div>
<h2>Desafio 2</h2>
<div class="container-dos">
<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-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
<div class="col-12 col-sm-6 col-md"></div>
</div>
</div>
<h2>Desafio 3</h2>
<div class="container-tres">
<div class="row">
<div class="col1 offset-md-8">1</div>
</div>
<div class="row">
<div class="col1-4 col-md-8 offset-md-2">1</div>
</div>
<div class="row">
<div class="col1 col-md-4 offset-8 offset-md-0">1</div>
</div>
</div>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?