Bootstrap 4 cartas
Tarjetas
Una tarjeta en Bootstrap 4 es un cuadro bordeado con algo de relleno alrededor de su contenido. Incluye opciones para encabezados, pies de página, contenido, colores, etc.
Juan Pérez
Algún texto de ejemplo Algún texto de ejemplo. John Doe es arquitecto e ingeniero.
Ver el perfilTarjeta Básica
Se crea una tarjeta básica con la .cardclase y el contenido dentro de la tarjeta tiene una .card-bodyclase:
Ejemplo
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Si está familiarizado con Bootstrap 3, las tarjetas reemplazan los paneles, pozos y miniaturas antiguos.
Encabezado y pié de página
La .card-headerclase agrega un encabezado a la tarjeta y la .card-footerclase agrega un pie de página a la tarjeta:
Ejemplo
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Tarjetas contextuales
Para agregar un color de fondo a la tarjeta, use clases contextuales ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondaryy ..bg-dark.bg-light
Ejemplo
Títulos, texto y enlaces
Úselo .card-titlepara agregar títulos de tarjetas a cualquier elemento de encabezado. La .card-textclase 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 .card-linkclase agrega un color azul a cualquier enlace y un efecto de desplazamiento.
Ejemplo
<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 de tarjetas
Juan Pérez
Algún texto de ejemplo Algún texto de ejemplo. John Doe es arquitecto e ingeniero.
Ver el perfil
Agregue .card-img-topo .card-img-bottoma un
<img>para colocar la imagen en la parte superior o inferior dentro de la tarjeta. Tenga en cuenta que hemos agregado la imagen fuera de la .card-bodypara abarcar todo el ancho:
Ejemplo
<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 extendido
Agregue la .stretched-linkclase a un enlace dentro de la tarjeta, y hará que se pueda hacer clic y desplazar toda la tarjeta (la tarjeta actuará como un enlace):
Juan Pérez
Algún texto de ejemplo Algún texto de ejemplo. John Doe es arquitecto e ingeniero.
Ver el perfilEjemplo
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Superposiciones de imagen de tarjeta
Convierte una imagen en un fondo de tarjeta y utilízalo .card-img-overlay
para agregar texto encima de la imagen:
Ejemplo
<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 cartas
Algo de texto dentro de la primera tarjeta.
Algo de texto dentro de la segunda tarjeta.
Algo de texto dentro de la tercera tarjeta.
Algo de texto dentro de la cuarta tarjeta.
Algo de texto dentro de la quinta carta
Algo de texto dentro de la sexta tarjeta.
La .card-columnsclase crea una cuadrícula de tarjetas similar a la 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):
Ejemplo
<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 carta
Algo de texto dentro de la primera tarjeta.
Un poco más de texto para aumentar la altura.
Un poco más de texto para aumentar la altura.
Un poco más de texto para aumentar la altura.
Algo de texto dentro de la segunda tarjeta.
Algo de texto dentro de la tercera tarjeta.
Algo de texto dentro de la cuarta tarjeta.
La .card-deckclase crea una cuadrícula de tarjetas 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):
Ejemplo
<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 tarjetas
Algo de texto dentro de la primera tarjeta.
Un poco más de texto para aumentar la altura.
Un poco más de texto para aumentar la altura.
Un poco más de texto para aumentar la altura.
Algo de texto dentro de la segunda tarjeta.
Algo de texto dentro de la tercera tarjeta.
Algo de texto dentro de la cuarta tarjeta.
La .card-groupclase es similar a .card-deck. La única diferencia es que la .card-groupclase elimina los márgenes izquierdo y derecho entre cada carta.
Nota: Las tarjetas se muestran verticalmente en pantallas pequeñas (menos de 576 px), CON margen superior e inferior:
Ejemplo
<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>