Las cards de Bootstrap 4

Resumen

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.

Kevin Barreto

student•

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>

Juan David Rodriguez Erazo

student•

Regenial!

Harold David Avila Sabogal

student•

buen aporte muchas gracias por la información

Danelia Sanchez Sanchez

student•

Yo hice el ejercicio colocando las siguientes clases:

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

Juan Miguel Jimenez

student•

Yo lo hice igual 😃

Carlos Sanguino

student•

Yo igual

RODRIGO ALEJANDRO CASTILLO MONTERROSA

student•

Agregue redes sociales y en large se muestran 4

Edgardo Marcano

student•

Yo le dejé el col-lg-4 y col-xl-3 para que solo se muestren 4 elementos por fila en escritorio y dejas 3 elementos para las iPad

Jorge Laguna

student•

como agregas las redes sociales? se ve genial

Gonzalo Pimentel

student•

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:

Andrés David Solarte Vidal

student•

Si, es correcto.

Julia Gabriela Nieva Paredes

student•

¡Gracias! Tomé tu sugerencia and works like a charm!

ivan dario castro

student•

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 😛

Carlos Ferrer

student•

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)

Freddy Córdova Arana

student•

Fotos de los speakers en este link:

Fotos de speakers

Emmanuel Ferreyro

student•

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>

Harold David Avila Sabogal

student•

buen aporte

Teofilo Rosales Gama

student•

Reto cumplido :

<div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/sacha.jpg">
              <div class="card-body">
                <h5 class="card-title">Sacha Lifszyc</h5>
                <p class="card-text">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/leonidas.jpg">
              <div class="card-body">
                <h5 class="card-title">Leonidas Esteban</h5>
                <p class="card-text">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/freddy.jpg">
              <div class="card-body">
                <h5 class="card-title">Freddy Vega</h5>
                <p class="card-text">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">

Juan Miguel Jimenez

student•

Una observación le estas poniendo las clases col-md-4 y col-md-6 a cada columna, la segunda pisa la primera por lo que no es necesario poner col-md-4

Giannina Stefania Baccelliere Mancilla

student•

Desktop:

Tablet

Mobile:

José González

student•

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.

Karenn Yeraldin Hernández Duarte

student•

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

Natanael Procopio

student•

Para cumplir el reto cada columna quedaria asi

&lt;div class=&quot; col-12 col-md-6 col-lg-4 mb-4&quot;&gt;```

Kevin Naranjo

student•

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

Estiventh Leonardo Neira Aldana

student•

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

Gricel Labbe

student•

Y q pasa si una tarjeta tiene mas texto como se puede hacer para que queden iguales del mismo tamaño todas no en este caso pero si en uno que estoy trabajando

Yordanis Cobas Lobaina

student•

Buena clase

Juan Guillermo Perez Cardozo

student•

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

Hugo Rivera

student•

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

Christian Arturo Rios Mock

student•

Las cards son geniales yo desarrolle una landing page con 8 cards con diferentes servicios y desplegable. Lo difícil es hacer que se desplieguen de manera individual

Sergio Camilo vanegas

student•

Alguien por favor puede decirme ¿dónde encuentro las fotos de la documentación? Gracias.

botcito .com

student•

Si las imagenes tienen distinta altura, como puedo hacer que sean todas iguales?

Héctor Eduardo López Carballo

student•

Hola!

Se me ocurre que podrías centrarlas, pero me hace falta contexto para saber cómo lo puedes cambiar. Podrías compartir más información?

Yair Enrique Riascos Mestre

student•

Con el css utilizas el selector img y le aplicas los estilos que desees.

img{
	width: 30px;
	height:30px;
}

<div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/sacha.jpg">
              <div class="card-body">
                <h5 class="card-title">Sacha Lifszyc</h5>
                <p class="card-text">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/leonidas.jpg">
              <div class="card-body">
                <h5 class="card-title">Leonidas Esteban</h5>
                <p class="card-text">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">
            <div class="card">
              <img class="card-img-top" src="assets/speakers/freddy.jpg">
              <div class="card-body">
                <h5 class="card-title">Freddy Vega</h5>
                <p class="card-text">afsdasvasdvavsdcsdavdsavagasdfadcasfdvasd</p>
              </div>
            </div>
          </div>
          <div class="col-md-4 mb-4 col-sm-12 col-md-6 col-lg-3">

Las cards de Bootstrap 4

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