Tarjetas

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

En esta página

Acerca de

Una tarjeta (card) es un contenedor de contenido flexible y extensible. Incluye opciones para cabeceras y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Si estás familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros antiguos paneles (panels), pozos (wells) y miniaturas (thumbnails). Una funcionalidad similar a esos componentes está disponible como clases modificadoras para las tarjetas.

Ejemplo

Las tarjetas se construyen con el menor marcado y estilos posibles, pero aun así logran ofrecer una gran cantidad de control y personalización. Construidas con flexbox, ofrecen una alineación fácil y se mezclan bien con otros componentes de Bootstrap. No tienen margin por defecto, así que usa 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 al inicio, por lo que naturalmente llenarán todo el ancho de su elemento padre. Esto se personaliza fácilmente con nuestras diversas opciones de dimensionamiento.

Título de la tarjeta

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Ir a algún lugar

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Tipos de contenido

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

Cuerpo

El bloque de construcción de una tarjeta es el .card-body. Úsalo siempre que necesites una sección con relleno (padding) dentro de una tarjeta.

Este es un texto dentro del cuerpo de una tarjeta.

html

<div class="card">
  <div class="card-body">
    Este es un texto dentro del cuerpo de una tarjeta.
  </div>
</div>

Títulos, texto y enlaces

Los títulos de las tarjetas se utilizan añadiendo .card-title a una etiqueta <h*>. Del mismo modo, los enlaces se añaden y se colocan uno al lado del otro añadiendo .card-link a una etiqueta <a>.

Los subtítulos se utilizan añadiendo .card-subtitle a una etiqueta <h*>. Si los elementos .card-title y .card-subtitle se colocan en un elemento .card-body, el título y el subtítulo de la tarjeta se alinean correctamente.

Título de la tarjeta

Subtítulo de la tarjeta

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Enlace de tarjeta Otro enlace

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Subtítulo de la tarjeta</h6>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
    <a href="#" class="card-link">Enlace de tarjeta</a>
    <a href="#" class="card-link">Otro enlace</a>
  </div>
</div>

Imágenes

.card-img-top y .card-img-bottom respectivamente establecen las esquinas superiores e inferiores redondeadas para que coincidan con los bordes de la tarjeta. Con .card-text, se puede añadir texto a la tarjeta. El texto dentro de .card-text también se puede estilizar con las etiquetas HTML estándar.

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>

Grupos de listas

Crea listas de contenido en una tarjeta con un grupo de listas al ras (flush).

Un elemento
Un segundo elemento
Un tercer elemento

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Un elemento</li>
    <li class="list-group-item">Un segundo elemento</li>
    <li class="list-group-item">Un tercer elemento</li>
  </ul>
</div>

Destacado

Un elemento
Un segundo elemento
Un tercer elemento

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Destacado
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Un elemento</li>
    <li class="list-group-item">Un segundo elemento</li>
    <li class="list-group-item">Un tercer elemento</li>
  </ul>
</div>

Un elemento
Un segundo elemento
Un tercer elemento

Pie de tarjeta

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Un elemento</li>
    <li class="list-group-item">Un segundo elemento</li>
    <li class="list-group-item">Un tercer elemento</li>
  </ul>
  <div class="card-footer">
    Pie de tarjeta
  </div>
</div>

De todo un poco

Mezcla y combina múltiples tipos de contenido para crear la tarjeta que necesitas, o ponlo todo ahí. A continuación se muestran estilos de imagen, bloques, estilos de texto y un grupo de listas, todo envuelto en una tarjeta de ancho fijo.

Título de la tarjeta

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Un elemento
Un segundo elemento
Un tercer elemento

Enlace de tarjeta Otro enlace

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Un elemento</li>
    <li class="list-group-item">Un segundo elemento</li>
    <li class="list-group-item">Un tercer elemento</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Enlace de tarjeta</a>
    <a href="#" class="card-link">Otro enlace</a>
  </div>
</div>

Cabecera y pie de página

Añade una cabecera y/o pie de página opcional dentro de una tarjeta.

Destacado

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

html

<div class="card">
  <div class="card-header">
    Destacado
  </div>
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Las cabeceras de las tarjetas se pueden estilizar añadiendo .card-header a los elementos <h*>.

Destacado

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

html

<div class="card">
  <h5 class="card-header">Destacado</h5>
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Cita

Una cita bien conocida, contenida en un elemento blockquote.

html

<div class="card">
  <div class="card-header">
    Cita
  </div>
  <div class="card-body">
    <figure>
      <blockquote class="blockquote">
        <p>Una cita bien conocida, contenida en un elemento blockquote.</p>
      </blockquote>
      <figcaption class="blockquote-footer">
        Alguien famoso en <cite title="Título de la fuente">Título de la fuente</cite>
      </figcaption>
    </figure>
  </div>
</div>

Destacado

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

Hace 2 días

html

<div class="card text-center">
  <div class="card-header">
    Destacado
  </div>
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
  <div class="card-footer text-body-secondary">
    Hace 2 días
  </div>
</div>

Dimensionamiento

Las tarjetas no asumen un width específico al inicio, por lo que tendrán un ancho del 100% a menos que se indique lo contrario. Puedes cambiar esto según sea necesario con CSS personalizado, clases de rejilla, mixins de Sass de rejilla o utilidades.

Uso del marcado de rejilla

Usando la rejilla, envuelve las tarjetas en columnas y filas según sea necesario.

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

html

<div class="row">
  <div class="col-sm-6 mb-3 mb-sm-0">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Tratamiento especial del título</h5>
        <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
        <a href="#" class="btn btn-primary">Ir a algún lugar</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Tratamiento especial del título</h5>
        <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
        <a href="#" class="btn btn-primary">Ir a algún lugar</a>
      </div>
    </div>
  </div>
</div>

Uso de utilidades

Usa nuestro puñado de utilidades de dimensionamiento disponibles para establecer rápidamente el ancho de una tarjeta.

Título de la tarjeta

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Botón

Título de la tarjeta

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Botón

html

<div class="card w-75 mb-3">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Botón</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Botón</a>
  </div>
</div>

Uso de CSS personalizado

Usa CSS personalizado en tus hojas de estilo o como estilos en línea para establecer un ancho.

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Alineación de texto

Puedes cambiar rápidamente la alineación del texto de cualquier tarjeta, en su totalidad o en partes específicas, con nuestras clases de alineación de texto.

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

html

<div class="card mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

<div class="card text-center mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Navegación

Añade algo de navegación a la cabecera (o bloque) de una tarjeta con los componentes de navegación de Bootstrap.

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Activo</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Desactivado</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Tratamiento especial del título

Con texto de apoyo a continuación como una introducción natural al contenido adicional.

Ir a algún lugar

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Activo</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Desactivado</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Tratamiento especial del título</h5>
    <p class="card-text">Con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Imágenes

Las tarjetas incluyen algunas opciones para trabajar con imágenes. Elige entre añadir "imágenes de cabecera o pie" en cualquier extremo de una tarjeta, superponer imágenes con el contenido de la tarjeta o simplemente incrustar la imagen en una tarjeta.

Imágenes de cabecera y pie

Similar a las cabeceras y pies de página, las tarjetas pueden incluir "imágenes de cabecera o pie": imágenes en la parte superior o inferior de una tarjeta.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Actualizado hace 3 minutos

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Actualizado hace 3 minutos

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
    <p class="card-text"><small class="text-body-secondary">Actualizado hace 3 minutos</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
    <p class="card-text"><small class="text-body-secondary">Actualizado hace 3 minutos</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Superposiciones de imágenes

Convierte una imagen en el fondo de una tarjeta y superpone el texto de tu tarjeta. Dependiendo de la imagen, puedes necesitar o no estilos o utilidades adicionales.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Actualizado hace 3 minutos

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
    <p class="card-text"><small>Actualizado hace 3 minutos</small></p>
  </div>
</div>

Ten en cuenta que el contenido no debe ser más grande que la altura de la imagen. Si el contenido es más grande que la imagen, el contenido se mostrará fuera de la imagen.

Horizontal

Usando una combinación de clases de rejilla y utilidades, las tarjetas se pueden hacer horizontales de una manera amigable para dispositivos móviles y receptiva. En el ejemplo a continuación, eliminamos los canalones (gutters) de la rejilla con .g-0 y usamos las clases .col-md-* para hacer la tarjeta horizontal en el punto de interrupción md. Pueden ser necesarios más ajustes dependiendo del contenido de tu tarjeta.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Actualizado hace 3 minutos

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
        <p class="card-text"><small class="text-body-secondary">Actualizado hace 3 minutos</small></p>
      </div>
    </div>
  </div>
</div>

Estilos de tarjeta

Las tarjetas incluyen varias opciones para personalizar sus fondos, bordes y color.

Fondo y color

Agregado en v5.2.0

Establece un background-color con un color de primer plano contrastante con nuestros ayudantes .text-bg-{color}. Anteriormente se requería emparejar manualmente tu elección de utilidades .text-{color} y .bg-{color} para el estilizado, las cuales aún puedes usar si prefieres.

Cabecera

Título de tarjeta Primary

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Secondary

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Success

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Danger

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Warning

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Info

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Light

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Dark

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Primary</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Secondary</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Success</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Danger</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Warning</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Info</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Light</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Dark</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>

Consejo de accesibilidad: El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como los lectores de pantalla. Asegúrate de que el significado sea obvio a partir del propio contenido (por ejemplo, el texto visible con un suficiente contraste de color) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Borde

Usa las utilidades de borde para cambiar solo el border-color de una tarjeta. Ten en cuenta que puedes poner clases .text-{color} en el .card padre o en un subconjunto de los contenidos de la tarjeta como se muestra a continuación.

Cabecera

Título de tarjeta Primary

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Secondary

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Success

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Danger

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Warning

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Info

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Light

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cabecera

Título de tarjeta Dark

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Título de tarjeta Primary</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Título de tarjeta Secondary</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body text-success">
    <h5 class="card-title">Título de tarjeta Success</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Título de tarjeta Danger</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Warning</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Info</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Light</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Cabecera</div>
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta Dark</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>

Utilidades de mixins

También puedes cambiar los bordes en la cabecera y el pie de la tarjeta según sea necesario, e incluso eliminar su background-color con .bg-transparent.

Cabecera

Título de tarjeta success

Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Pie de página

html

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Cabecera</div>
  <div class="card-body text-success">
    <h5 class="card-title">Título de tarjeta success</h5>
    <p class="card-text">Un breve texto de ejemplo para mostrar en el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Pie de página</div>
</div>

Diseño de tarjetas

Además de estilizar el contenido dentro de las tarjetas, Bootstrap incluye algunas opciones para diseñar series de tarjetas. Por el momento, estas opciones de diseño aún no son receptivas.

Grupos de tarjetas

Usa grupos de tarjetas para renderizar tarjetas como un solo elemento adjunto con columnas de igual ancho y alto. Los grupos de tarjetas comienzan apilados y usan display: flex; para adjuntarse con dimensiones uniformes a partir del punto de interrupción sm.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Actualizado hace 3 minutos

Título de la tarjeta

Esta tarjeta tiene texto de apoyo a continuación como una introducción natural al contenido adicional.

Actualizado hace 3 minutos

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Esta tarjeta tiene un contenido aún más largo que la primera para mostrar esa acción de igual altura.

Actualizado hace 3 minutos

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la tarjeta</h5>
      <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      <p class="card-text"><small class="text-body-secondary">Actualizado hace 3 minutos</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la tarjeta</h5>
      <p class="card-text">Esta tarjeta tiene texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
      <p class="card-text"><small class="text-body-secondary">Actualizado hace 3 minutos</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la tarjeta</h5>
      <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Esta tarjeta tiene un contenido aún más largo que la primera para mostrar esa acción de igual altura.</p>
      <p class="card-text"><small class="text-body-secondary">Actualizado hace 3 minutos</small></p>
    </div>
  </div>
</div>

Cuando se usan grupos de tarjetas con pies de página, su contenido se alineará automáticamente.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Actualizado hace 3 minutos

Título de la tarjeta

Esta tarjeta tiene texto de apoyo a continuación como una introducción natural al contenido adicional.

Actualizado hace 3 minutos

Título de la tarjeta

Actualizado hace 3 minutos

html

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la tarjeta</h5>
      <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Actualizado hace 3 minutos</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la tarjeta</h5>
      <p class="card-text">Esta tarjeta tiene texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Actualizado hace 3 minutos</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Título de la tarjeta</h5>
      <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Esta tarjeta tiene un contenido aún más largo que la primera para mostrar esa acción de igual altura.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Actualizado hace 3 minutos</small>
    </div>
  </div>
</div>

Tarjetas de rejilla

Usa el sistema de rejilla de Bootstrap y sus clases .row-cols para controlar cuántas columnas de rejilla (envueltas alrededor de tus tarjetas) muestras por fila. Por ejemplo, aquí está .row-cols-1 diseñando las tarjetas en una columna, y .row-cols-md-2 dividiendo cuatro tarjetas en anchos iguales en varias filas, desde el punto de interrupción medio en adelante.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
</div>

Cámbialo a .row-cols-3 y verás cómo se envuelve la cuarta tarjeta.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
</div>

Cuando necesites la misma altura, añade .h-100 a las tarjetas. Si quieres alturas iguales por defecto, puedes establecer $card-height: 100% en Sass.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Título de la tarjeta

Esta es una tarjeta corta.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional.

Título de la tarjeta

Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta corta.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más larga con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
</div>

Al igual que con los grupos de tarjetas, los pies de página de las tarjetas se alinearán automáticamente.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.

Actualizado hace 3 minutos

Título de la tarjeta

Esta tarjeta tiene texto de apoyo a continuación como una introducción natural al contenido adicional.

Actualizado hace 3 minutos

Título de la tarjeta

Actualizado hace 3 minutos

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Este contenido es un poco más largo.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Actualizado hace 3 minutos</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta tarjeta tiene texto de apoyo a continuación como una introducción natural al contenido adicional.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Actualizado hace 3 minutos</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural al contenido adicional. Esta tarjeta tiene un contenido aún más largo que la primera para mostrar esa acción de igual altura.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Actualizado hace 3 minutos</small>
      </div>
    </div>
  </div>
</div>

Masonry

En v4 utilizamos una técnica solo de CSS para imitar el comportamiento de las columnas tipo Masonry, pero esta técnica vino con muchos efectos secundarios desagradables. Si quieres tener este tipo de diseño en v5, puedes simplemente hacer uso del plugin Masonry. Masonry no está incluido en Bootstrap, pero hemos hecho un ejemplo de demostración para ayudarte a comenzar.

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, las tarjetas ahora utilizan variables CSS locales en .card para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_card.scss

--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color};
--#{$prefix}card-height: #{$card-height};
--#{$prefix}card-color: #{$card-color};
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin};

Variables de Sass

scss/_variables.scss

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-title-color:                  null;
$card-subtitle-color:               null;
$card-border-width:                 var(--#{$prefix}border-width);
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                var(--#{$prefix}border-radius);
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           var(--#{$prefix}body-bg);
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;