Agregando botones

Francisco Peñalo Feliz

student•

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;
}

Arturo Antonio Flores Reyes

student•

muchas gracias, tenia esa duda...!

WILDER GUTIERREZ QUISPE

student•

eres un crack.!! ... aun estoy aprendiendo css y ya cada vez entiendo como funciona .. :)

gracias!!!```

Francisco Lopez Campos

student•

casi muere el segundo oso polar en este curso debido al !important

Daniel Esteban Santos Mendez

student•

Jajaja Preprocesadores!

Alessandro Staiano

student•

bootstrap es perfecto para los que somos mas de backend pero necesitamos hacer algo de frontend de vez en cuando.

Esteban Casallas

student•

si totalmente ayuda mucho.

Juan Sebastian Bueno

student•

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 ;
}

Julia Gabriela Nieva Paredes

student•

Excelente solución, ya sabía que important no era lo mejor, yo iba a poner el color blanco en el hover, pero me ayudó mucho tu solución. Tx.

Lázaro Bucio Marín

student•

Uffff… Botonesss 👌🏻👌🏻

Luis David López Berber

student•

Excelente Observación

Jefferson Andres Espejo Goez

student•

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 :)

David Alejandro García Graterón

student•

Y se puede utilizar BEM ? Actualmente lo utiliza en tu proyecto en el trabajo?

Wladimir Moya

student•

Aquí el enlace al curso de Tailwind https://platzi.com/clases/2702-tailwind/45489-bienvenida-al-desarrollo-con-tailwind/

Josseph Geraldy Reyes Díaz

student•

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?

Luis Rojas

student•

Me pasa lo mismo!

Diego Forero

Team Platzi•

Hola. Esto pasa por el orden que pueden tener los archivos css al ser importados, entonces tienes que poner el !important para decirle que esta es la regla que se debe tener en cuenta, sin importar nada más. Como se están usando estilos de boton que vienen de Bootstrap y al poner las clases no importa. Revisa que tu css este importado luego que el de bootstrap.

Juan Guillermo Perez Cardozo

student•

Muy importante que aún si no nos gusta el color o estilo del objeto, lo podemos personalizar

William Andres Aguilar Rodriguez

student•

En firefox no funciona el efecto hover del btn-outline-light ¿Qué se podría hacer en ese caso?

Marco David Romero

student•

A mi si me funciona. Revisá que no tengas errores. class="btn btn-outline-light"

Karen Michel Sixto Lázaro

student•

Excelente clase... mi pantalla es algo grande, pero creo que se ve bien <3

Diego Andres Cabrera Rojas

student•

bien hermano , podrías para tus estilos en pantalla grande como la tuya , mejor de pronto un poco mas las fuentes de un tamaño para su mejor visualización , se ve un poco pequeña suerte .

inventr Miguel Gomez

student•

Por si quieren que el texto de la cabecera tenga el efecto del hover como la del boton. .text-platzi:hover { color: #82ad36 !important; }

Sergio Díaz Fernández

student•

Juan Camilo Castillo Camacho

student•

El secreto está en la práctica. Saber cuáles y en qué momentos usar ñas herramientas que nos brinda Bootstrap.

Cristhian Franco

student•

Gracias por bootstrap antepasados informaticos :D

Héctor Aguilar Mogollan

student•

esta muy facil, excelente bootstrap

Alexander Valencia

student•

los outline buttuns son muy cools

Frank Sócrates Valencia Pinto

student•

Todo un mundo analizar los colores que den armonía a nuestros proyectos :D

Gonzalo Pimentel

student•

Nunca esperé decir esto en programación pero qué fácil!

Diego Granados

student•

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!.

Joel Dominguez Merino

student•

Muy buen aporte! Si, es importante mencionar eso ya que mantener los estilos de Bootstrap es un poco complicado por que usan muchos !important o hay clases que son más especificas y llegan a tener un mayor peso.

Pero si estamos tratando de modificar algún estilo, es sumamente importante que la hoja de estilos personalizada este situada al final (en cascada), después del llamado a Bootstrap 🚀

Roberto Del Valle

student•

Excelente clase!

Harold David Avila Sabogal

student•

Muy buena clase

Agregando botones

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