Las cards de Bootstrap 4

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 “lorem” 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, 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 😛

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=“speakers” class=“mt-4 mb-4”>
en lugar de “mt-4 mb-4” (margin top , margin bottom)
podemos utilizar “my-4” (sería como decir margin en el eje y)

Del mismo modo podríamos sustituir “ml-4 mr-4” (margin left y margin right) por “mx-4” (sería como decir margin en el eje x)

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>

Desktop:

Tablet

Mobile:

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.

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">```

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

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

Buena clase

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

Mi solución:

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

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

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

Asi resolvi el desafio.

Para cumplir el reto es tan simple con tan solo modificar el div class=“row” 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).

<div class=“col-sm col-md-6 col-lg-3 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=“speakers”>
<div class=“container”>

                <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 usar el texto lorem ipsum, en el editor visual estudio se escribe lorem y automaticamente aparece la opcion del texto por defecto.

<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 “y”, 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 “x”):

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>

1 - 2 - 4

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

Muy bueno

Para los que somos full stack y nos gusta el diseño como el manejo de datos por igual, esto es maravilloso ya que nos ahorra trabajo

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

Gracias por el tip de ctrl + D 😄

Solución al Reto

Esta es mi solución al reto 😄.

<!--Card Section-->
        <section id="speakers" class="mt-4 mb-4">
            <div class="container">
                <div class="row">
                    <div class="col text-center text-uppercase mb-2">
                        <small>Conoce a los</small>
                        <h2>Oradores</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-6 col-lg-4 mb-4">
                        <div class="card">
                            <img src="assets/speakers/sacha.jpg" class="card-img-top" alt="Foto de Sasha">
                            <div class="card-body">
                              <h5 class="card-title">Sacha Lifsyc</h5>
                              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aut reprehenderit numquam magnam ad beatae dolorum suscipit cum! Veniam inventore, dolorem eaque non animi repudiandae porro assumenda eos incidunt labore.</p>
                            </div>
                          </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4 mb-4">
                        <div class="card">
                            <img src="assets/speakers/leonidas.jpeg" class="card-img-top" alt="Foto de Leonidas">
                            <div class="card-body">
                              <h5 class="card-title">Leonidas Esteban</h5>
                              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aut reprehenderit numquam magnam ad beatae dolorum suscipit cum! Veniam inventore, dolorem eaque non animi repudiandae porro assumenda eos incidunt labore.</p>
                            </div>
                          </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4 mb-4">
                        <div class="card">
                            <img src="assets/speakers/freddy.jpeg" class="card-img-top" 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. Dignissimos, aut reprehenderit numquam magnam ad beatae dolorum suscipit cum! Veniam inventore, dolorem eaque non animi repudiandae porro assumenda eos incidunt labore.</p>
                            </div>
                          </div>
                    </div>
                    <div class="col-12 col-md-6 col-lg-4 mb-4">
                        <div class="card">
                            <img src="assets/speakers/cvander.jpeg" class="card-img-top" alt="Foto de Christian">
                            <div class="card-body">
                              <h5 class="card-title">Christian Van Der H.</h5>
                              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aut reprehenderit numquam magnam ad beatae dolorum suscipit cum! Veniam inventore, dolorem eaque non animi repudiandae porro assumenda eos incidunt labore.</p>
                            </div>
                          </div>
                    </div>
                </div>
                
            </div>
        </section>

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!

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

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=“col-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=“col-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 “justify-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=“row”>
<div class=“col-md-6 col-lg-4 mb-4”>
<div class=“card” >
<img class=“card-img-top” src=“assets/images/honolulu.jpg” alt=“Card image cap”>
<div class=“card-body”>
<h5 class=“card-title”>Tarifa de viajes</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>

                </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​Ipsum, 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=“col-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">