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
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aportes 55
Preguntas 4
Si al pasar el mouse sobre el botón Comprar tickets el texto se pone de color negro en vez de blanco solo tiene que agregar !important a la propiedad color definida en la clase btn-platzi:
.btn-platzi {
background-color: #97c93e;
color: white !important;
}
casi muere el segundo oso polar en este curso debido al !important
bootstrap es perfecto para los que somos mas de backend pero necesitamos hacer algo de frontend de vez en cuando.
Si les duelen los ojos con el !important, para corregirlo se puede usar la especificidad en CSS, siendo mas especifico al elemento. De esa manera no usan el !important ya que es considerado mala practica.
/* Button styles */
.row .btn-platzi {
background-color: #7953B2;
color: white ;
}
Uffff… Botonesss 👌🏻👌🏻
Si no quieren usar el important! (como yo), hay otras opciones de preprocesadores de CSS más amigables como Tailwind. Quizás no sea taaaaaan sencillo como Bootstrap, pero si es más personalizable para uno como desarrollador 😃
Me surge un ligero problema , al colocar mi estilo de la siguiente manera:
.btn-platzi{
background-color: #97c93e !important;
color: white !important;
}
No se ve reflejado el estilo en la página hasta que coloco el !important en cada linea. ¿Esto a qué se puede deber?
Excelente clase… mi pantalla es algo grande, pero creo que se ve bien ❤️
Por si quieren que el texto de la cabecera tenga el efecto del hover como la del boton.
.text-platzi:hover { color: #82ad36 !important; }
El secreto está en la práctica. Saber cuáles y en qué momentos usar ñas herramientas que nos brinda Bootstrap.
Gracias por bootstrap antepasados informaticos 😄
esta muy facil, excelente bootstrap
los outline buttuns
son muy cools
Todo un mundo analizar los colores que den armonía a nuestros proyectos 😄
Nunca esperé decir esto en programación pero qué fácil!
Solo por si acaso: Yo esta intentando cambiar los colores de mi botón, y no sucedía nada. No sabia que el orden en que se organizan los enlace a las hojas de estilos en el <head> podía influir… Tuve que poner en enlace de mi hoja de Estilos mas abajo que el enlace a Bootstrap… y luego todo funcionó muy bien!.
Excelente clase!
No sé porque pero el botón me queda en un tono opaco.
.btn-platzi{
background-color: #97c93e;
color: white;
}
No me queda el tono verde brillante que debería 😕
Si nos les resulta aplicar el estilo el botón de comprar tickets…
Yo cambié el <button> por otro directamente traído desde bootstrap (el btn-success) y en los estilos, le puse un ID en vez de clase y así se aplicó bien el estilo.
<button id=“btn-platzi” type=“button” class=“btn”>Comprar tickets</button>
#btn-platzi{
background-color:#97c93e;
color: white;
}
#btn-platzi:hover{
background-color: #82ad36;
}
si las letras cambian el color en el botón importante se solucionan con esto
.btn-platzi {
background-color: #97c93e ;
color: white;
}
.btn-platzi:hover{
background-color: #82ad36;
color: white;
}```
aparece y desaparece el overlay
Me pasaba que se ponia color negro el texto cuando pasaba el mouse, (deberia ser blanco)
Despues me pasaba que no cambiaba el color del boton al color mas oscuro cuando pasaba el mouse.
Asi lo solucione.
Nose si este bien poner !important a varais cosas, pero es la mas rapida que vi.
.btn-platzi{
background-color: #97c93e !important;
color: white !important;
}
.btn-platzi:hover{
background-color: #82ad36 !important;
}```
Consulta, se puede cambiar el tamaño del botón según el tamaño del dispositivo?
Excelente!
Excelente Clase !!!
Estos elementos que tiene bootstrap a disposición para trabajar le da mucha importancia a esta librería.
Bootstrap esta codeado en SASS, así que aprovecho un poco a practicar.
$verde-platzi: #97c93e;
$verde-platzi-oscuro: darken($verde-platzi, 20%);
body {
min-width: 320px;
}
.text-platzi {
color: $verde-platzi !important;
&:hover {
color: white !important;
}
}
.btn-platzi {
background-color: $verde-platzi;
color: white;
border: 1px solid $verde-platzi-oscuro !important;
&:hover {
background-color: $verde-platzi-oscuro;
}
}
#header {
img {
width: 80px;
}
}
#main {
.carousel-inner {
img {
max-height: 70vh;
object-fit: cover;
filter: grayscale(70%);
}
}
}
#carousel {
position: relative;
.overlay {
position: absolute;
z-index: 10;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
.container,
.row {
height: 100%;
}
}
}
#footer {
background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5472);
text-align: center;
a {
color: white;
text-decoration: none;
}
}
Si no quieren usar el importan, solo pongan en el botón la clase btn-success y btn-platzi y en la clase btn-platzi modificas el color. El color del texto se queda en blanco siempre.
<button type="button" class="btn btn-success btn-platzi">Comprar tickets</button>
.btn-platzi{
background-color: #97c93e;
}
.btn-platzi:hover{
background-color: #86bb2b;
}
Excelente clase, lo que sumé en mis códigos de html y css fueron comentarios explicando sobre que hace cada uno. Antes de anotar en un cuadernillo. Esto me ayudaría a encontrar lo que quiero a futuro más rápido.
Muy buena clase.
Anotaciones:
Hay 2 tipos de botones, botones con relleno y botones sin relleno (outline buttons).
Tambien podemos cambiarle el tamaño al botón y elegir si queremos que ocupe todo el ancho disponible (muy usado en dispositivos moviles).
muy buena clase
¡Vaya pero que fregón es Bootstrap! De verdad que si pensaban a futuro de como iba a ser el diseño web.
Que increible que es bootstrap!!
Los botones de Bootstrap son muy bonitos, comparados con el HTML normal. Ademas con un par de clases se les puede asignar colores y tamaños. Me encanta.
Excelente clase
excelente 😄
Para solucionar el texto negro en el hover seria mejor pasarle la propiedad dentro de la clase del hover y así podríamos usar cualquier color y sin usar el “!important”
.btn-platzi:hover {
background-color: #82ad36;
color: white;
}
.btn-platzi:hover{
background-color: #82ad36;
color: white;
}
Lo estoy colocando así para que no me pase el color de la letra a negro
Grosso profe!!!
Genial, todo va bien
Es entretenido y facil.
HTML
<button type="button" class="btn btn-brand" data-toggle="modal" data-target="#modalCompra">Comprar</button>
CSS
.btn-brand {
background-color: var(--main-color-brand);
color: var(--just-white);
}
.btn-brand:hover {
background-color: var(--second-color-brand);
}
Coloco el boton tal y cuál pero sale opaco y revise todo bien pero no se porque no cambia ni con !important
Seguimos avanzando!!
Sacha es muy claro al explicar directo sin vueltas! bravo!
Gran clase
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?