Cards

Una tarjeta (card) en Bootstrap 4 es una caja con bordes con algo de relleno alrededor de su contenido. Incluye opciones para encabezados, pies de página, contenido, colores, etc.

Card básica

Se crea una tarjeta básica con la clase .card, y el contenido dentro de la tarjeta tiene una clase .card-body.

Ejm

<div class="card">
  <div class="card-body">Basic card</div>
</div>

Header y Footer

La clase .card-header agrega un encabezado a la tarjeta y la clase .card-footer agrega un pie de página a la tarjeta.

Ejm

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

Cards contextuales

Para añadir color de fondo a nuestras tarjetas, podemos usar las clases contextuales.

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Títulos, textos y links

Usa .card-title para agregar títulos de tarjeta a cualquier elemento de encabezado. La clase .card-text se usa para eliminar los márgenes inferiores de un elemento <p> si es el último elemento secundario (o el único) dentro de .card-body. La clase .card-link agrega un color azul a cualquier enlace y un efecto de desplazamiento.

Ejm

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Imágenes en Cards

Agregue .card-img-top o .card-img-bottom a un <img> para colocar la imagen en la parte superior o inferior dentro de la tarjeta. Ten en cuenta que hemos agregado la imagen fuera del .card-body para abarcar todo el ancho.

Ejm

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Enlace estirado

Agregue la clase .stretched-link a un enlace dentro de la tarjeta, y hará que toda la tarjeta sea clicable y apilable (la tarjeta actuará como un enlace.

Ejm

<a href="#" class="btn btn-primary stretched-link">See Profile</a>

Superposiciones de imagen de Card

Convierta una imagen en un fondo de tarjeta y use .card-img-overlay para agregar texto en la parte superior de la imagen:

Ejm

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Columnas de Card

La clase .card-columns crea una cuadrícula de tarjetas de mampostería (como pinterest). El diseño se ajustará automáticamente a medida que inserte más tarjetas.

Nota: Las tarjetas se muestran verticalmente en pantallas pequeñas (menos de 576 px):

Ejm

<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>

Baraja de Cards

La clase .card-deck crea una cuadrícula de cartas que tienen la misma altura y anchura. El diseño se ajustará automáticamente a medida que inserte más tarjetas.

Nota: Las tarjetas se muestran verticalmente en pantallas pequeñas (menos de 576 px):

Ejm

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

Grupo de Cards

La clase .card-group es similar a .card-deck. La única diferencia es que la clase .card-group elimina los márgenes izquierdo y derecho entre cada tarjeta.

Nota: Las tarjetas se muestran verticalmente en pantallas pequeñas (menos de 576 px), CON margen superior e inferior:

Ejm

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>