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 56
Preguntas 5
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;
}
Para los que quieren personalizar aun mas sus temas de bootstrap les recomiendo bootswatch
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 ;
}
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 😃
Uffff… Botonesss 👌🏻👌🏻
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?
Por si quieren que el texto de la cabecera tenga el efecto del hover como la del boton.
.text-platzi:hover { color: #82ad36 !important; }
Excelente clase… mi pantalla es algo grande, pero creo que se ve bien ❤️
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;
}
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!.
esta muy facil, excelente bootstrap
Excelente clase!
los outline buttuns
son muy cools
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 😕
Todo un mundo analizar los colores que den armonía a nuestros proyectos 😄
Gracias por bootstrap antepasados informaticos 😄
Nunca esperé decir esto en programación pero qué fácil!
El secreto está en la práctica. Saber cuáles y en qué momentos usar ñas herramientas que nos brinda Bootstrap.
.btn-platzi:hover{
background-color: #82ad36;
color: white;
}
Lo estoy colocando así para que no me pase el color de la letra a negro
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.
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;
}
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;
}
}
Grosso profe!!!
Genial, todo va bien
Estos elementos que tiene bootstrap a disposición para trabajar le da mucha importancia a esta librería.
Excelente Clase !!!
Muy buena clase.
Consulta, se puede cambiar el tamaño del botón según el tamaño del dispositivo?
Excelente!
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.
Es entretenido y facil.
Que increible que es bootstrap!!
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;
}```
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.
Para que el boton se mantenga en blanco y no vaya a negro
Excelente clase
excelente 😄
aparece y desaparece el overlay
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;
}
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;
}```
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);
}
Seguimos avanzando!!
Gran clase
Sacha es muy claro al explicar directo sin vueltas! bravo!
Coloco el boton tal y cuál pero sale opaco y revise todo bien pero no se porque no cambia ni con !important
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.