Cards

Una tarjeta (card) es un contenedor de información flexible. Incluye opciones para encabezados y pie de página, una amplia variedad de contenidos, colores de fondo contextuales etc.

Construidos con flexbox, ofrecen una fácil alineación y se combinan bien con otros componentes de Bootstrap. No tienen margen por defecto. Las tarjetas no tienen un ancho fijo para comenzar, por lo que naturalmente llenarán todo el ancho de su elemento principal.

Titulo de la tarjeta 1

Subtítulo de la tarjeta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Card link Another link

Boton

Se dispone de un div con la clase "card".
Dentro del div anterior se dispone otro div fijando la clase "card-body".
Para el título de la tarjeta se dispone un <h4> fijando la clase "card-title".
Se pueden agregar tambien subtítulos agregando la clase "card-subtitle".
Los párrafos de la tarjeta tienen la clase "card-text".
Los links tienen la clase "card-link".
Se pueden disponer botones dentro de la tarjeta y otros contenidos HTML.

Imagénes en las Cards:

Se puede disponer de imágenes en la tarjeta, pero para que respeten lo vértices redondeados de la tarjeta se deben especificar algunas clases.

Titulo de la tarjeta 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

card-img-top:: La imagen se coloca en la parte superior de la tarjeta.
card-img-bottom:: La imagen se coloca en la parte inferior de la tarjeta.

Las imagenes deben estar afuera del card-body.

Imagen superpuesta:

Mediante la clase "card-img-overlay" se puede hacer que el cuerpo de la tarjeta aparezca superpuesta sobre la imagen.

Titulo de la tarjeta 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada.

Entrar

Grupo lista:

Se pueden crear listas de contenido en una tarjeta mediante las clases "list-group" y "list-group-flush". Cada item de la lista tiene la clase "list-group-item".

Titulo de la tarjeta 5

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Header y Footer:

Tambien se pueden agregar un encabezado o pie página a la tarjeta mediante las clases "card-header" y "card-footer".

Titulo de la tarjeta 6

With supporting text below as a natural lead-in to additional content.

Entrar

Titulo de la tarjeta 7

With supporting text below as a natural lead-in to additional content.

Entrar

Pie de página tarjeta 7

Navegación con pestañas:

Otra variante que se puede implementar con las tarjetas de Bootstrap 4 es el añadir pestañas de opciones en la parte superior.

Las pestañas se agregan en la zona del la cabecera y se requieren las siguientes clases:

nav / nav-tabs / card-header-tabs:: Estas tres clases se agregan a un elemento HTML de tipo "ul".
nav-item:: Esta clase se agrega a cada elemento HTML de tipo "li"
nav-link:: Esta clase se agrega a cada ancla que se dispone dentro de cada "li".

Titulo de la tarjeta 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Pestañas de botones:

En lugar de pestañas se puede mostrar una serie de enlaces y el seleccionado en forma de botón. Para lograr esto hay que sustituir las clases (nav-tabs card-header-tabs) por las clases (nav-pills card-header-pills):

Titulo de la tarjeta 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Estilos:

Para el color de fondo disponemos de las clases:

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

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.

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Light card title

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

Header

Dark card title

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

Estilos bordes y textos:

Se puede fijar un color de borde para las tarjetas mediante las clases:

border-primary
border-success
border-info
border-warning
border-danger
border-secondary
border-dark
border-light

text-primary
text-success
text-info
text-warning
text-danger
text-secondary
text-dark
text-light

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.

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Light card title

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

Header

Dark card title

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

Grupo de tarjetas:

Bootstrap 4 permite agrupar un conjunto de tarjetas las cuales se verán con anchos y alturas iguales, esto mediante un div con la clase "card-group" el cual contiene las tarjetas que se desea agrupar.

Titulo de la tarjeta 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Tarjetas separadas:

Si se necesita que las tarjetas se encuentren separadas en lugar de utilizar la clase "card-group" se utiliza la clase "card-deck"

Titulo de la tarjeta 13

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 15

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Tarjetas por columnas:

Se puede hacer que las tarjetas se apilen por columna cambiando la clase "card-group" por la clase "card-columns".

Titulo de la tarjeta 16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 17

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar

Titulo de la tarjeta 19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue nec tortor sit amet, maximus mattis dui.

Entrar