• Wednesday , 3 June 2020

#11 Cards – Curso completo de Bootstrap 4! 2017 desde cero

Code Canyon
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

3d Ocean

Related Posts

25 Comments

  1. Murcielago Lamborghini
    August 16, 2018 at 08:09

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

  2. Murcielago Lamborghini
    August 16, 2018 at 08:09

    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

  3. David Paez
    August 16, 2018 at 08:09

    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…

  4. Victor Flores
    August 16, 2018 at 08:09

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

  5. Juan Romero Cruz
    August 16, 2018 at 08:09

    los comentrio tambien funcionan con, ctrl + } y ya.

  6. Programmer Auditore
    August 16, 2018 at 08:09

    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.

  7. Victorino Padron
    August 16, 2018 at 08:09

    Excelente curso, cada vez me gusta más y ver que con bootstrap y el profesor que tenemos es una maravilla. Muchísimas gracias.

  8. Valentin Alejandro
    August 16, 2018 at 08:09

    como puedo hacer que sean responsive cards. Pd: En Angular 4 (5)

  9. antonio Santos
    August 16, 2018 at 08:09

    Sublime-HTMLPrettify es un plugin de Sublime Text para indentar HTML, CSS o JavaScript con SublimeText.

    Asi es mas facil la tabulación!

  10. Leonel Benetello
    August 16, 2018 at 08:09

    img-fluid ya no funciona…. ahora ??

  11. luis castellanos
    August 16, 2018 at 08:09

    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

  12. APPS REVIEW
    August 16, 2018 at 08:09

    ¿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?

  13. Felipe Riquelme
    August 16, 2018 at 08:09

    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.

  14. David Zambrano
    August 16, 2018 at 08:09

    Puede ser lo que pueda para regalarte un cafe?

    me son de mucha utilidad tus tutos…

    y estoy agradecido…

  15. Naoto Amari
    August 16, 2018 at 08:09

    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!

  16. Michel Leiva
    August 16, 2018 at 08:09

    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 🙂

  17. Jorge Damian Paredes
    August 16, 2018 at 08:09

    Gracias por el curso muy bueno, una consulta que navegador usas para ver el resultado de esa forma gracias

  18. evar115
    August 16, 2018 at 08:09

    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

  19. Kevin Toro
    August 16, 2018 at 08:09

    Hola!
    ¿Cómo puedo aumentar o reducir el tamaño de la fuente en Sublime Text?
    Muchísimas gracias por la ayuda.

  20. F4m1r3
    August 16, 2018 at 08:09

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

  21. jhon macclein
    August 16, 2018 at 08:09

    Mejor que un profe de informática, saludos!!!!!

  22. Jose Reynel Chaux Perez
    August 16, 2018 at 08:09

    Excelente material, muchas gracias !!!

  23. Paco BerCa
    August 16, 2018 at 08:09

    jajajaja (bandío!) ¿vacaciones? esperaba este capitulo hace días… 😉

  24. F4m1r3
    August 16, 2018 at 08:09

    Al fin un curso más yeeeee

  25. TONY Cuanalo
    August 16, 2018 at 08:09

    Gracias Excelente

Leave A Comment

You must be logged in to post a comment.