[ad_1]
https://i.ytimg.com/vi/5bX-GdwRxGY/hqdefault.jpg
Hoy conoceremos un componente de Bootstrap 4! y son las Cards (tarjetas), además modificaremos los css propios de Bootstrap para cambiar el sistema responsive que tiene por defecto.
Esta sección es muy importante, ya que podrás modificar los Css de Bootstrap según tus necesidades.
No olvides suscribirte a este hermoso canal y destruirme en los comentarios 🙂
También puedes seguirme en Facebook: https://www.facebook.com/bluuweb/
Finalmente visita mi sitio web: http://ignaciogutierrez.cl
Original source
25 responses to “#11 Cards – Curso completo de Bootstrap 4! 2017 desde cero”
El media query no sirve, lo tengo en un segundo CSS:
@media (min-width:768px){
.card-deck{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-flow:row wrap;
-ms-flex-flow:row wrap;
flex-flow:row wrap
}
}
Si agrego un 2do CSS modificado, como se le hace para que aplique el CSS modificado, y no el de Bootstrap…?
Según Yo el img-fluid tendría que seguir funcionando en BS 4.1:
http://getbootstrap.com/docs/4.1/content/images
Muy buenos vídeos, un aporte:
La solución para que todos los Card sean del mismo tamaño, independientemente de la longitud del texto, es metiendo el botón dentro de un <div> y utilizar las clases margen inferior con unos 3 o 4 (mb-3), y si se quiere centrar el botón utilizar ml-auto y mr-auto.
Ejemplo:
<div class="mb-3 ml-auto mr-auto">
<a class="btn btn-secondary btn-sm" style="font-size: .75em" href="#" role="button">Link</a>
</div>
Saludos…
Como buena practica no se debe modificar el bootstrap, en ese caso se tiene que crear otro css, con el mismo nombre de la clase, pero de todas formas buen video !!! 😀
los comentrio tambien funcionan con, ctrl + } y ya.
a mi el logo ya no me aparece, reinicie mi compu y al iniciar para seguir con el curso y ya no me aparece el logo.
Excelente curso, cada vez me gusta más y ver que con bootstrap y el profesor que tenemos es una maravilla. Muchísimas gracias.
como puedo hacer que sean responsive cards. Pd: En Angular 4 (5)
Sublime-HTMLPrettify es un plugin de Sublime Text para indentar HTML, CSS o JavaScript con SublimeText.
Asi es mas facil la tabulación!
img-fluid ya no funciona…. ahora ??
hola buenas noches tengo una duda, lo intente pero no lo logre… hay alguna manera de que el boton de "link" color azul bajo los comentarios de las cartas se posicionen automaticamente en la parte inferior con flexbox? sin importar el tamaño del texto?
gracias seria de mucha ayuda! saludos. excelentes tutoriales
¿entonces no hay una manera de hacer que las cards sean del mismo alto si no tienen el mismo contenido? a ellas no les afectan los flexbox?
Hola Ignacio, una consulta, por qué se ubicaron las tres cards una al lado de la otra sin usar los col? eso no entendí mucho. saludos amigo y muy muy buenos los tutoriales.
Puede ser lo que pueda para regalarte un cafe?
me son de mucha utilidad tus tutos…
y estoy agradecido…
Para empezar gracias nuevamente , ahora Una pregunta , preguntona si quisiera hacer mi propia clase card-deck solo copiandome esas propiedades y usando mi nueva clase card-deck2 funcionaria todo bien? asi no tocaria la clase del bootstrap que una vez alguien me dijo que es mejor no modificarlas tanto jejejej gracias!
Aveces he pensado que mejor que tocar el CSS de bootstrap es mejor copiar los parámetros que vamos a tocar y hacer un .CSS personal externo (si con los mismo nombre) y que reemplace a los de bootstrap en un principio, ya que cambiar esos parámetros puede llevar a fallos en otras secciones no pensadas.
PD: Tu curso esta la raja 🙂
Gracias por el curso muy bueno, una consulta que navegador usas para ver el resultado de esa forma gracias
hola, tienes algún curso donde se puede crear tantas card yo quiere dinamicamente desde una consulta a base de datos? por ejemplo consultar los productos existentes en base de datos y crear una card para cada porducto.
Alguna sugerencia por favor
Hola!
¿Cómo puedo aumentar o reducir el tamaño de la fuente en Sublime Text?
Muchísimas gracias por la ayuda.
Aca un garnito de arena, si no te sale el comentaro con ctrl+7 tienes que activarlo, primeor tienes que ir a Preferences->Key Bindings – User luego escribes el siguiente comando:
{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } }
Mejor que un profe de informática, saludos!!!!!
Excelente material, muchas gracias !!!
jajajaja (bandío!) ¿vacaciones? esperaba este capitulo hace días… 😉
Al fin un curso más yeeeee
Gracias Excelente