Cards con Bootstrap

Clase 37 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Contenido del curso

¡Hemos renovado este curso!

1
¿Dónde aprender frontend actualizado?
00:17 min

Bienvenido al curso

Foundation

Bootstrap

Conclusiones

Contenido complementario

Tomar examen

Resumen

Veamos como construir cards con Bootstrap.

Comentarios

Enzo Aliatis

student•

Pagina
Repo bootstrap v4 octubre 2017

Álvaro Tejero Cordero

student•

Si no se centra el paginador con text-center probar con esto, a mi me funcionó

<div class="col-12 d-flex justify-content-center" id="paginator-container">```

Juan Barboza

student•

buen aporte, me sirvió, gracias.

Cesar David Ramírez Dimaté

student•

Exacto, es mejor así. Ya que no estamos centrando el texto como tal.

Alexander Valencia

student•

<div class="col-12 d-flex justify-content-center" id="paginator-container">

Juan David lemus Rubiano

student•

no entiendo para que hacer uan nueva fila ? si esta esta dividido en nueve columnas eso

Edgar Moises Valdez Faria

student•

Para volver a dividir en unas nuevas 12 columnas.
Entiendo tu pregunta pero la nueva fila se pone para poder tener las 12 columnas de nuevo, sin la nueva fila solo se tiene 9 columnas.

Espero haber respondido a tu pregunta.

Sebastian Vasquez Rodriguez

student•

productos-container tiene dos div .
uno para el filtro que usa 3
otro para los productos que usan 9
3+9=12 😕😕😕😕😕
luego ese que utiliza 9 se divide otra vez en 12.
Al menos así lo entiendo yo 😕😕😕

ivan Fernando Alfisz Rico

student•

Buenas tardes, si quisiera realizar el filtro de datos y la paginacion a que curso debería ir?

Diego Forero

Team Platzi•

El filtro hay dos formas de hacerlo que te envié el backend todos los datos y tu los filtras en el frontend o hacer la petición al backend con los parámetros del filtro, la paginación por lo general viene siempre del backend.

Entonces puedes tomar los cursos de backend que te guste dependiendo del lenguaje como python, php, ruby, etc, para el frontend te recomiendo el curso de fundamentos de JavaScript y el curso definitivo de Javascript.

ivan Fernando Alfisz Rico

student•

Muchas gracias por su respuesta @GOLLUM23 ya he tomado el curso de php, pero no explican la paginación ya que lo colocan como desafió.

pero según le entiendo llamo los datos de la bd y los capturo en variables, y con JavaScript los visualizo según el contenido en esas variables?

richard lopez

student•

Si quisiera hacer mas opciones del proyecto como proveedores , locales ,etc.
Como se hace para manejar una especie de plantilla que permita cambiar una sola vez por ejemplo el color del header o el tipo de letra y no tener que cambiarlo en todos los html ???

Diego Forero

Team Platzi•

Usas clases, como .CustomHeader y la pones en todas tus plantillas, luego simplemente modificas las propiedades de esa clase en el css.

Cesar David Ramírez Dimaté

student•

Para la paginación de los productos en la versión 4.1.1 me quedó de la siguiente forma:

catalogo.html

<!-- Paginación de Productos -->
<div class="row">
  <div class="col">
    <nav id="pagination-container" aria-label="Paginación de Productos">
      <ul class="pagination d-flex justify-content-center">
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Anterior">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Anteriores Productos</span>
          </a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Siguiente Productos</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- Paginación de Productos -->

app.css

#pagination-container .page-item.active .page-link {
  background-color: #99c84a;
  border-color: #99c84a;
}

#pagination-container .page-item:not(.active):not(.disabled) .page-link {
  color: #99c84a;
}

Cesar David Ramírez Dimaté

student•

Para la sección de cards en Bootstrap 4.1.1 me quedó de la siguiente forma (en el css no hay necesidad de agregar nada):

catalogo.html

<!-- Productos -->
<div class="col-12 col-md-8 col-lg-9 mb-3">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 1</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 2</h5>
          <p class="card-text">Debitis earum a commodi ex voluptas explicabo dicta facere rationet.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 3</h5>
          <p class="card-text">Vel nihil mollitia molestias tempore magnam sequi saepe perferendis adipisci.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 4</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 5</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 6</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 7</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 8</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 9</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 10</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Paginación de Productos -->
  ...
  <!-- Paginación de Productos -->
</div>
<!-- /Productos -->

<!-- Paginación de Productos -->
<div class="row">
  <div class="col">
    <nav id="pagination-container" aria-label="Paginación de Productos">
      <ul class="pagination d-flex justify-content-center">
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Anterior">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Anteriores Productos</span>
          </a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">4</a></li>
        <li class="page-item"><a class="page-link" href="#">5</a></li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Siguiente Productos</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- Paginación de Productos -->

#pagination-container .page-item.active .page-link {
  background-color: #99c84a;
  border-color: #99c84a;
}

#pagination-container .page-item:not(.active):not(.disabled) .page-link {
  color: #99c84a;
}

<!-- Productos -->
<div class="col-12 col-md-8 col-lg-9 mb-3">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 1</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 2</h5>
          <p class="card-text">Debitis earum a commodi ex voluptas explicabo dicta facere rationet.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 3</h5>
          <p class="card-text">Vel nihil mollitia molestias tempore magnam sequi saepe perferendis adipisci.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 4</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 5</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 6</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 7</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 8</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 9</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-lg-4 mb-3">
      <div class="card h-100">
        <img class="card-img-top" src="images/producto-card.svg" alt="Leyenda Imagen de Captura">
        <div class="card-body">
          <h5 class="card-title">Producto 10</h5>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Paginación de Productos -->
  ...
  <!-- Paginación de Productos -->
</div>
<!-- /Productos -->

Cards con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap