Guia de Componentes de Bootstrap

...

Card

Las tarjetas de Bootstrap proporcionan un contenedor de contenido flexible y extensible con múltiples variantes y opciones.


Acerca de
Una tarjeta es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Si está familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros viejos paneles, pozos y miniaturas. Funcionalidad similar a esos componentes está disponible como clases modificadoras para tarjetas.

Ejemplo
Las tarjetas se crean con la menor cantidad de marcas y estilos posibles, pero aún así logran ofrecer un montón de control y personalización. Construidos con flexbox, ofrecen una alineación fácil y se combinan bien con otros componentes de Bootstrap. No tienen marginpor defecto, así que use las utilidades de espaciado según sea necesario.
A continuación se muestra un ejemplo de una tarjeta básica con contenido mixto y un ancho fijo. Las tarjetas no tienen un ancho fijo para comenzar, por lo que naturalmente llenarán el ancho completo de su elemento principal. Esto se puede personalizar fácilmente con nuestras diversas opciones de tamaño
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere


Tipos de contenido
Las tarjetas admiten una amplia variedad de contenido, incluidas imágenes, texto, grupos de listas, enlaces y más. A continuación se muestran ejemplos de lo que se admite.

Cuerpo
El componente básico de una tarjeta es el .card-body. Úselo siempre que necesite una sección acolchada dentro de una tarjeta.
Este es un texto dentro del cuerpo de una tarjeta.
Títulos, texto y enlaces
Los títulos de las cartas se utilizan añadiendo .card-titlea una h* etiqueta. De la misma manera, los enlaces se agregan y se colocan uno al lado del otro agregando .card-linka una a etiqueta.
Los subtítulos se usan agregando un .card-subtitlea una h* etiqueta. Si los elementos .card-titley los .card-subtitleelementos se colocan en un .card-bodyelemento, el título y el subtítulo de la tarjeta están bien alineados.
titulo de la tarjeta
subtitulo de la tarjeta

Algún texto de ejemplo rápido para construir sobre el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

link< de la Tarjeta otro link
Fondo y color
Utilice las utilidades de texto y fondo para cambiar la apariencia de una tarjeta.
Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.