Bootstrap 4 Cards

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.

Tarjeta básica

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

Tarjeta básica

Ejm

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

Header y Footer

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

Ejm

Clases contextuales para tarjetas Bootstrap 4

Títulos, textos y links

Títulos, textos y links en Cards Bootstrap 4

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

Imágenes en Cards Bootstrap 4

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.

Enlace estirado en Cards Bootstrap 4

Ejm

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

Superposiciones de imagen de tarjeta

Superposiciones de imagen y Card Bootstrap 4

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 tarjetas

Columnas de Cards Bootstrap 4

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

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 cartas

Grupo de Cards Bootstrap 4

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>