No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Las cards de Bootstrap 4

12/21
Recursos

Conoceremos el feature de Cards de Bootstrap. Para m谩s informaci贸n consulta: https://getbootstrap.com/docs/4.1/components/card/. Tenemos un reto para ti: ya que sabes como crear las cards por speaker, queremos que cambies el numero de tarjetas que se muestran por el tipo de dispositivo.

Aportes 156

Preguntas 15

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Un tip para aquellos que no lo sabian si es que todavia no lo han mencionado. Para poder ahorrar tiempo en poner text generico(lorem ipsum), solamente al momento de escribir pongan 鈥渓orem鈥 y la cantidad de palabras que quieran poner en display, seguido por la tecla TAB.

Ej.
<p>lorem20</p>

Agregue redes sociales y en large se muestran 4

Reto cumplido!
Agregar a cada columna la clase:

Tambi茅n le agregu茅 estilos a las im谩genes ya que la imagen de Leonidas se ve铆a mas chica que las dem谩s:

En <section id=鈥渟peakers鈥 class=鈥渕t-4 mb-4鈥>
en lugar de 鈥渕t-4 mb-4鈥 (margin top , margin bottom)
podemos utilizar 鈥渕y-4鈥 (ser铆a como decir margin en el eje y)

Del mismo modo podr铆amos sustituir 鈥渕l-4 mr-4鈥 (margin left y margin right) por 鈥渕x-4鈥 (ser铆a como decir margin en el eje x)

Reto cumplido, pude realizar el responsive de las card con las clases de bootstrap, este es mi dise帽o personalizado

deje el mouse hover activado para el screen 馃槢

Yo puse las 4 im谩genes en un solo row para lgarge, luego 2 en tama帽os medium y 1 en small.

<div class="col col-md-6 col-lg-4 mb-4"></div>

aguanta ver bootstrap con el preprocesador pug para hacer eso con mixins

Por si las im谩genes son demasiado altas o anchas y no son cuadradas como las que usa Sacha pueden usar
#speakers .container .row img{
max-height: 20vh;
object-fit: cover; scale-down; o contain;
}

el cover funciona pero en mi caso me recorta la imagen y solo se miraba la mitad de la cara de las im谩genes que utilice.

Buena clase

Falta ajustar el height de las caras, hay TAG para ello.

Bootstrap es un framework genial le facilita muchas cosas en el dise帽o web, y las cards son mis elementos favoritos

Reto:
col-12 col-md-6 col-lg-4

Para cumplir el reto cada columna quedaria asi

<div class=" col-12 col-md-6 col-lg-4 mb-4">```

Genial, gran clase este aqui esta el repositorio donde podran descargar las imagenes https://github.com/platzi/bootstrap

5:22 uh 馃槀

Saludos,

No logro hacer que se vean una al lado de la otra.

<speaker id=鈥渟peakers鈥>
<div class=鈥渃ontainer鈥>

                <div class="row">
                                <div class="col text-center text-uppercase">
                                            <small>Conoce a los</small>
                                            <h2>Oradores</h2>
                                </div>
                </div>

                <div class="row">

                                <div class="col-lg-4 mt-4 mb-4">

                                        <div class="card" style="width: 18rem;">
                                                <img src="C:\Users\Luis Rojas\Desktop\Postcard\bootstrap-gh-pages\assets\speakers\sacha.jpg" class="card-img-top" alt="sacha">
                                                <div class="card-body">
                                                          <h5 class="card-title">Sacha Lifszyc</h5>
                                                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                                          <a href="#" class="btn btn-primary">Go somewhere</a>
                                                </div>
                                        </div>

                                        <div class="card" style="width: 18rem;">
                                                <img src="C:\Users\Luis Rojas\Desktop\Postcard\bootstrap-gh-pages\assets\speakers\cvander.jpeg" class="card-img-top" alt="cvander">
                                                <div class="card-body">
                                                          <h5 class="card-title">Leonidas Esteban</h5>
                                                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                                          <a href="#" class="btn btn-primary">Go somewhere</a>
                                                </div>
                                        </div>

                                        <div class="card" style="width: 18rem;">
                                                <img src="C:\Users\Luis Rojas\Desktop\Postcard\bootstrap-gh-pages\assets\speakers\freddy.jpeg" class="card-img-top" alt="freddy">
                                                <div class="card-body">
                                                          <h5 class="card-title">Freddy Vega</h5>
                                                          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                                          <a href="#" class="btn btn-primary">Go somewhere</a>
                                                </div>
                                        </div>


                                </div>

                </div>

        </div>

</speaker>

En VSC escribe Lorem y te genera texto de relleno.

No explicas como podemos hacer que las im谩genes tengan el mismo tama帽o en las card, mis im谩genes quedaron as铆 como la de Leonidas esteban y otras menos anchas, como puedo hacer que las im谩genes se vean del mismo tama帽o? en 帽as card

Desktop:

Tablet:

Mobile

Reto

<div class="col-12 col-md-6 col-lg-4 mb-4">```

Para hacer la transici贸n entre tama帽os mas suave decidi realizar la siguiente distribuci贸n:

  • 1 Tarjeta para pantallas tipo movil.
  • 2 Tarjetas para pantallas peque帽as.
  • 3 Tarjetas para pantallas medianas.
  • 4 Tarjetas para pantallas grandes.
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 mb-4">

Para usar el texto lorem ipsum, en el editor visual estudio se escribe lorem y automaticamente aparece la opcion del texto por defecto.

Si desean que la tarjeta de leonidas quede al mismo nivel pueden usar el archivo Leonidas2.jpeg

<div class="col-sm-12 col-md-6 col-lg-4 mb-4">

Reto cumplido

Reto superado

<div class="col-12 col-md-6 col-lg-4 mb-4">```

Si quieres poner los margin o padings de top y bottom ambos se representan por 鈥測鈥, es decir:

class="speakers mt-4 mb-4" es lo mismo que escribir: class="speakers my-4"

Pasa lo mismo con left y rigth (son el eje 鈥渪鈥):

class="speakers ml-4 mr-4" es lo mismo que escribir: class="speakers mx-4"

M谩s detalle en: Spacing

Si quieren que la ultima imagen en tama帽os grandes les queda centrada, pueden a帽adirle las clases mr-auto y ml-auto:

<div class="col-12 col-md-6 col-lg-4 mb-4 mr-auto ml-auto">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/freddy.jpeg" alt="Foto de Freddy">
              <div class="card-body">
                <h5 class="card-title">Freddy Vega</h5>
                <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam aliquam asperiores veniam consequuntur voluptatum laudantium amet eius mollitia sint exercitationem.</p>
              </div>
            </div>
          </div>

As铆 va quedando:

Mi soluci贸n al reto:

<div class="col-xs-12 col-md-6 col-lg-3 mb-4">

Y tom茅 la sugerencia de Gonzalo Pimentel para acomodar las fotos:

#speakers img{
  height: 348px;
  object-fit: cover;
}

Para los que quieran que las fotos de distintos tama帽os lo que yo hice fue lo siguiente:

.speakers img{
   width: 18rem;
   height: 18rem;
   object-fit: cover;
}

La imagen se recortara pero tendran el mismo tama帽o

Reto: cada card deber谩 tener estas clases.

<div class="col-12 col-md-6 col-lg-4 mb-4"> .....

Dado que la foto de Leonidas tiene dimensiones diferentes, en mi caso las cards quedan todas del mismo tama帽o, menos la de Leonidas, esa card queda m谩s corta; mi pregunta es: 驴C贸mo hacen para que esa card quede al mismo alto que las otras cards? se trata de una clase en bootstrap, o lo hacen por medio de CSS?

Saludos!

Para cumplir el reto es tan simple con tan solo modificar el div class=鈥渞ow鈥 directamente.
ejemplo:

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4"> 

-(row-cols-1) cada imagen abarcara las 12 columnas completas convirtiendose en una sola, en dispositivo peque帽os.
鈥(row-cols-md-2) cada imagen abarcara 6 columnas, en dispositivo medianos.
鈥(row-cols-lg-3) cada imagen abarcara 4 columnas, en dispositivo grandes.

-el (g-4) es para que cada columna tenga un espacio entre ellas, es decir el grap de display-flex.

-(mb-4) un margin botton al final de la fila.

nota: en las cl (columnas) no agregue ninguna clase, solamente en la row (fila).

Leonidas square para el que guste

XD

Cada que empieza la clase, procuro primero ir a revisar la p谩gina finalizada y procuro realizarla.
Ya quedaron las cards de los speakers 馃槑
馃寪 **C贸digo en GitHub: **
https://github.com/iJCode1/bootstrap4_platzi
.
Vista Desktop:

.
Vista Tablet:

.
Vista en Celular:

asi va mi ejemplo馃榿

Reto cumplido

<div class=鈥渃ol-12 col-md-6 col-lg-4 mb-4鈥>

Asi resolvi el desafio.

Para generar la estructura de container > row > col con sus clases, usando emmet es escribiendo
.container>.row>.col.text-center.text-uppercase
y ya solo le dan enter

Reto superado agregando a cada clase de cada columna los siguientes valores:

class="col- col-md-6 col-lg-4 mb-4"

Para el reto solo cambie la clase de todas las cards a col-12 col-md-6 col-lg-4 col-xl-3

Hola, asi complete el reto yo, Saludos!

<div class="col d-flex justify-content-center col-sm-6 col-lg-4 mb-4">

HTML

  <!-- SPEAKERS -->

    <section id="speakers" class="mt-4 mb-4"><!-- mt=margin-top -->
        <div class="container row">
            <div class="col text-center text-uppercase">
                <small>Conoce a los </small>
                <h2>Oradores</h2>
            </div>
        </div>
        <!-- HERE COMES THE CARDS -->
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                <div class="card" style="width: 18rem;">
                    <img src="./assets/img/mig1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Air superiority</h5>
                      <p class="card-text">In the air superiority mission the Eurofighter Typhoon will typically be equipped with air-to-air missiles for the BVR and short range combat. It is the combination of thrust, maneuverability, modern sensors and data fusion that makes the Eurofighter Typhoon the superior air warfare platform.</p>
                      
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                <div class="card" style="width: 18rem;">
                    <img src="./assets/img/mig2.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Air interdiction</h5>
                      <p class="card-text">In this role the Eurofighter Typhoon is configured for ground attacks and even though it is equipped with a targeting pod and up to 7 ground attack weapons, it carries still 3 BVR and 2 SR missiles.</p>
                      
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4 mb-4">
                <div class="card" style="width: 18rem;">
                    <img src="./assets/img/mig3.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Close air support</h5>
                      <p class="card-text">The recent integration contract for the Brimstone has strengthened the CAS capabilities of the Eurofighter Typhoon since it can now engage in combat with a reduced risk of collateral damages of non-combatant or friendly forces.</p>
                      
                    </div>
                </div>
            </div>
            
        </div>
    </section>

CSS

/* cards */

#speakers img {
    height: 348px;
    object-fit: cover;
} 

El reto de las cartas se resuelve solo no? No tuve que ponerle nada, en autom谩tico por el espacio se pone 1, 2 y 3 correspondientemente al tama帽o de la pantalla

Reto:
<div class=鈥渃ol-12 col-md-6 col-lg-4 mb-4鈥>

Reto cumplido馃槑

Reto cumplido馃槑

Buena clase
Asi va quedando.

col-12 col -md-6 col-lg -4 mb-4 馃檪

Hola, c贸mo puedo hacer para que las fotos tengan el mismo tama帽o???

desafi贸 listo鈥!

Resoluci贸n del reto:

<div class="col-12 col-md-6 col-lg-4 mb-4">

Reto

<div class=鈥渃ol-md-4 mb-4 col-md-6 col-lg-4鈥>

Aqu铆 est谩 mi soluci贸n:

  • En las pantallas peque帽as hice que cada una ocupe un tama帽o de 10 columnas
  • En las pantallas medianas ocupan cada una 6 columnas
  • En las pantallas grandes cada una ocupa 4 columnas
  • Siempre estar谩n centradas gracias a la clase 鈥渏ustify-content-center鈥 aplicada en la fila.
    <!--Speakers-->
    <section id="speakers" class="mt-4">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col text-center text-uppercase">
            <small>conoce a los</small>
            <h2>oradores</h2>
          </div>
        </div>
        <div class="row text-center justify-content-center">
          <div class="mb-4 col-10 col-md-6 col-lg-4">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/sacha.jpg" alt="Sacha">
              <div class="card-body">
                <h5 class="card-title">Sacha Lifszyc</h5>
                <p class="card-text">
                  Maecenas sed vulputate nulla. Praesent tincidunt, ante ac semper feugiat, nibh sapien cursus massa, ac gravida felis nunc sed sapien. Quisque ullamcorper orci tincidunt nibh faucibus, non viverra massa efficitur.
                </p>
              </div>
            </div>
          </div>
          <div class="mb-4 col-10 col-md-6 col-lg-4">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/freddy.jpg" alt="Sacha">
              <div class="card-body">
                <h5 class="card-title">Freddy Vega</h5>
                <p class="card-text">
                  Maecenas sed vulputate nulla. Praesent tincidunt, ante ac semper feugiat, nibh sapien cursus massa, ac gravida felis nunc sed sapien. Quisque ullamcorper orci tincidunt nibh faucibus, non viverra massa efficitur.
                </p>
              </div>
            </div>
          </div>
          <div class="mb-4 col-10 col-md-6 col-lg-4">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/leonidas2.jpg" alt="Sacha">
              <div class="card-body">
                <h5 class="card-title">Leonidas</h5>
                <p class="card-text">
                  Maecenas sed vulputate nulla. Praesent tincidunt, ante ac semper feugiat, nibh sapien cursus massa, ac gravida felis nunc sed sapien. Quisque ullamcorper orci tincidunt nibh faucibus, non viverra massa efficitur.
                </p>
              </div>
            </div>
          </div>
          <div class="mb-4 col-10 col-md-6 col-lg-4">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/cvander.jpg" alt="Sacha">
              <div class="card-body">
                <h5 class="card-title">Christian cvander</h5>
                <p class="card-text">
                  Maecenas sed vulputate nulla. Praesent tincidunt, ante ac semper feugiat, nibh sapien cursus massa, ac gravida felis nunc sed sapien. Quisque ullamcorper orci tincidunt nibh faucibus, non viverra massa efficitur.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--Fin Speakers-->

驴Como se podr铆an poner de forma horizontal las cards?

Reto: Completado

como hago para que las imagenes principales se vena completas ya que salen recortadas

Reto:

<div class="col-12 col-md-6 col-lg-4 mb-4">```

Comparto mi soluci贸n al desafi贸:

<div class="col-12 col-md-6 col-lg-4 mb-4">

<div class=鈥渞ow鈥>
<div class=鈥渃ol-md-6 col-lg-4 mb-4鈥>
<div class=鈥渃ard鈥 >
<img class=鈥渃ard-img-top鈥 src=鈥渁ssets/images/honolulu.jpg鈥 alt=鈥淐ard image cap鈥>
<div class=鈥渃ard-body鈥>
<h5 class=鈥渃ard-title鈥>Tarifa de viajes</h5>
<p class=鈥渃ard-text鈥>Some quick example text to build on the card title and make up the bulk of the card鈥檚 content.</p>

                </div>
              </div>

Muy buena reto cumplido鈥

Reto terminado

Tengo una duda, ya le intent茅 y no puedo xD

Quiero quitarle el espacio entre las columnas鈥 pongo la imagen del espacio que quiero quitar鈥!

espacio.PNG

para rellenar contenido tipo lorem utilizo un plugin llamado Lorem鈥婭psum, compatible con Atom, Sublime y VSC. simplemente escribo lipsum+tab.

https://packagecontrol.io/packages/LoremIpsum

Reto

<div class="col-sm-6 col-md-4 mb-4">

Para los que no encuentren las imagenes en los recursos de la clase, recuerden que la segunda clase de este curso, es el repositorio del proyecto que estamos desarrollando, ahi encontraran todo 馃槑

ten铆a la duda si en otras propiedades se podr铆a usar el md y lo he comprobado

14rem ms-20rem;

as铆 cuando el dispositivo es muy peque帽o se ocupa todo el tama帽o de la ventana

Soluci贸n al reto

<<div class="col-md-6 col-lg-4 col-xl-3 mb-3">>

Hola buenas tardes a todos a continuaci贸n mi soluci贸n al reto.

<div class="col-md-6 col-lg-4 col-sm-12 mb-4">```

Saludos

<div class=鈥渃ol-12 col-md-6 col-lg-4 mb-4鈥>

Hola a todos, tengo una duda con el tema de las im谩genes de las cards, en el llegado caso de que las im谩genes no sean del mismo tama帽o, como puedo hacer para que se arreglen los tama帽os de im谩genes, les pongo foto de lo que me sucede ahora:

Quiero que la card de pasta de dientes este alineada como lo est谩n las barbies, las tazas y los cotonetes, en las cuales ninguna de las fotos tienen el mismo tama帽o.

Espero se haya entendido mi duda, agradezco su ayuda.

Saludos

Reto

<div class="col-12 col-md-6 col-lg-4 mb-4">

la solucion al reto seria:
en cada una de las targetas poner

<div class="col-12 col-md-6 col-lg-4 mb-4">

As铆 solucione el desaf铆o:
col-12 col-md-6 col-lg-4 mb-4

Apuntes:
text-uppercase: El texto dentro del elemento saldr谩 en may煤sculas.
mt-[numero]: Al elemento al que se le agrega esta clase, tendr谩 un margin-top dependiendo del numero que se le ponga.
mb-[numero]: Al elemento al que se le agrega esta clase, tendr谩 un margin-bottom dependiendo del n煤mero que se le ponga.

Esta quedando super el proyecto 馃槑

Me encanta !!!

Veo que existen varias class que ayudan a tratar los textos; deber铆a haber una clase dedicada para estos, y no revolverlos en varias partes.

reto completado

col-md-4 col-sm-12 mb-4

RETO:

<div class="col-md-6 col-lg-4 mb-4">
col-sm-12 col-md-6 col-lg-4

genial clase, la verdad cada vez me sorprende lo que se puede lograr

Asi quedaria el reto

class="col-lg-4 col-md-6 col-sm-12 mb-4"

De donde puedo obtener las imagenes del curso?

Reto resuelto 馃槃

<div class="col-xl-3 col-lg-6 col-md-6 mb-4">

Reto logrado, que bien se siente poder practicar todo lo que se va aprendiendo y jugando con el c贸digo

RETO:

<div class="col-sm-6 col-md-4 mb-4">

Reto

<div class="col-12 col-lg-3 col-md-6 col-sm-6 mb-1">
<div class="col-sm-12 col-md-6 col-lg-4 mb-4">

reto

col-12 col-md-6 col-lg-4 mb-4```

Reto logrado en 10 segundos 馃槉馃悾

para completar el reto, el tama帽o de las card se puede colocar con mediaquerys para que en dispositivos peque帽os, la card ocupe todo el ancho y se vea centrada.

驴Est谩 bien que uno se enamore de Bootstrap?
驴O tengo problemitas?
Debe ser porque es como la primera vecinita que conozco
Ya se me va a cruzar otra m谩s bonita

Listo!

C贸digo de las columnas:

<div class="col-sm-12  col-md-6 col-lg-4 mb-4"></div>

Reto cumplido!!

<div class="col-12 col-md-6 col-lg-4 mb-4">

Reto:

 <div class="col-12 col-md-6 col-lg-4 mb-4">

en mi caso con el reto

col-lg-4 col-md-6 mb-4

asi funiono perfectamente