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>