Ver en GitHub

Tarjetas

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

😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

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ás familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros paneles, wells y thumbnails. Una 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 aun así logran ofrecer un montón de control y personalización. Construidos con flexbox, ofrecen una fácil alineación y se combinan bien con otros componentes de Bootstrap. No tienen margin de forma predeterminada, así que utiliza 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 todo el ancho de su elemento principal. Esto se personaliza fácilmente con nuestras diversas opciones de tamaño.

Título de la tarjeta

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Ve a algún lado

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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. Úsalo siempre que necesites una sección espaciada dentro de una tarjeta.

Este es un texto dentro del cuerpo de una tarjeta.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Títulos, texto y enlaces

Los títulos de las tarjetas se usan agregando .card-title a una etiqueta <h*>. De la misma manera, los enlaces se agregan y se colocan uno al lado del otro agregando .card-link a una etiqueta <a>.

Los subtítulos se usan agregando un .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 muy bien alineado.

Título de la tarjeta

Subtítulo de la tarjeta

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir 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">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Imágenes

.card-img-top coloca una imagen en la parte superior de la tarjeta. Con .card-text, se puede agregar texto a la tarjeta. El texto dentro de .card-text también se puede diseñar con las etiquetas HTML estándar.

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir 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">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Listar grupos

Crea listas de contenido en una tarjeta con un grupo de listas de descarga.

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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Destacados

Un elemento
Un segundo elemento
Un tercer elemento

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Un elemento
Un segundo elemento
Un tercer elemento

Pie de página de la tarjeta

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Fregadero de cocina

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

Título de la tarjeta

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir 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">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Encabezado y pie de página

Agrega un encabezado y/o pie de página opcional dentro de una tarjeta.

Destacados

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Se puede diseñar un encabezado de tarjeta agregando .card-header a los elementos <h*>.

Destacados

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

html

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Cita

Una cita muy conocida, contenida en un elemento blockquote.

Alguien famoso en Source Title

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Destacados

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

Hace 2 días

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-body-secondary">
    2 days ago
  </div>
</div>

Tamaños

Las tarjetas no asumen ningún width específico para comenzar, por lo que tendrán un ancho 100% a menos que se indique lo contrario. Puede cambiar esto según sea necesario con CSS personalizado, clases de cuadrícula, mixins Sass de cuadrícula o utilidades.

Usar el marcado de cuadrícula

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

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

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">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Usar utilidades

Utiliza nuestras utilidades de tamaño disponibles para configurar rápidamente el ancho de una tarjeta.

Título de la tarjeta

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Botón

Título de la tarjeta

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Botón

html

<div class="card w-75 mb-3">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Usar 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 el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</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 el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

html

<div class="card mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Agrega algo de navegación al encabezado (o bloque) de una tarjeta con los componentes de navegación de Bootstrap.

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Tratamiento especial del título

Con el texto de respaldo a continuación como introducción natural al contenido adicional.

Ve a algún lado

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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Imágenes

Las tarjetas incluyen algunas opciones para trabajar con imágenes. Elige entre agregar "caps de imagen" en cualquiera de los extremos de una tarjeta, superponer imágenes con el contenido de la tarjeta o simplemente incrustar la imagen en una tarjeta.

Image caps

Al igual que los encabezados y pies de página, las tarjetas pueden incluir “caps de imagen” superiores e inferiores: 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 respaldo a continuación como introducción natural al contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Título de la tarjeta

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

Última actualización hace 3 minutos

html

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</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 superpón el texto de tu tarjeta. Dependiendo de la imagen, es posible que necesites o no estilos o utilidades adicionales.

Título de la tarjeta

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

Última actualización 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">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</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

Utilizando una combinación de clases de cuadrícula y utilidades, las tarjetas se pueden hacer horizontales de una manera responsive y compatible con dispositivos móviles. En el siguiente ejemplo, eliminamos los márgenes de la cuadrícula con .g-0 y usamos las clases .col-md-* para hacer que la tarjeta sea horizontal en el punto de interrupción md. Es posible que se necesiten más ajustes dependiendo del contenido de tu tarjeta.

Título de la tarjeta

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

Última actualización 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">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Estilos de tarjetas

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

Fondo y color

Agregado en v5.2.0

Establece un background-color con un color de primer plano contrastante con nuestros .text-bg-{color} ayudantes. Anteriormente era necesario emparejar manualmente tu elección de utilidades para diseñar .text-{color} y .bg-{color}, que aún puedes usar si lo prefieres.

Encabezado

Título de la tarjeta principal

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta secundaria

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de éxito

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de peligro

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de advertencia

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de información

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta clara

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta oscura

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir 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">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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

Borde

Usa utilidades de borde para cambiar solo el border-color de una tarjeta. Ten en cuenta que puedes colocar clases .text-{color} en la .card principal o en un subconjunto del contenido de la tarjeta como se muestra a continuación.

Encabezado

Título de la tarjeta principal

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta secundaria

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de éxito

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de peligro

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de advertencia

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta de información

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta clara

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta oscura

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

html

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Utilidades de Mixins

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

Encabezado

Título de la tarjeta de éxito

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir 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">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Diseño de tarjeta

Además de diseñar el contenido 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 responsive.

Grupos de tarjetas

Utiliza grupos de tarjetas para representar las tarjetas como un único elemento adjunto con columnas de igual ancho y alto. Los grupos de tarjetas comienzan apilados y usan display: flex; para unirse con dimensiones uniformes comenzando en el punto de interrupción sm.

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

Esta es una tarjeta más amplia con texto de respaldo a continuación como 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.

Última actualización 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">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Cuando uses 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 respaldo a continuación como introducción natural al contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

Última actualización 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">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Tarjetas de cuadrícula

Usa el sistema de grid de Bootstrap y sus .row-cols (clases) para controlar cuántas columnas de la cuadrícula (envueltas alrededor de tus tarjetas) muestra por fila. Por ejemplo, aquí está .row-cols-1 colocando las tarjetas en una columna y .row-cols-md-2 dividiendo cuatro tarjetas para lograr el mismo ancho en varias filas, desde el punto de interrupción medio hacia arriba.

Título de la tarjeta

Esta es una tarjeta más larga con texto de respaldo a continuación como 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 respaldo a continuación como 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 respaldo a continuación como introducción natural al contenido adicional.

Título de la tarjeta

Esta es una tarjeta más larga con texto de respaldo a continuación como 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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Cámbialo a .row-cols-3 y verás la cuarta tarjeta con envoltura.

Título de la tarjeta

Esta es una tarjeta más larga con texto de respaldo a continuación como 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 respaldo a continuación como 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 respaldo a continuación como introducción natural al contenido adicional.

Título de la tarjeta

Esta es una tarjeta más larga con texto de respaldo a continuación como 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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Cuando necesites la misma altura, agrega .h-100 a las tarjetas. Si deseas alturas iguales de forma predeterminada, puedes configurar $card-height: 100% en Sass.

Título de la tarjeta

Esta es una tarjeta más larga con texto de respaldo a continuación como 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 respaldo a continuación como introducción natural al contenido adicional.

Título de la tarjeta

Esta es una tarjeta más larga con texto de respaldo a continuación como 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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">Card title</h5>
        <p class="card-text">This is a short card.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</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">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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 respaldo a continuación como introducción natural al contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

Última actualización 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">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</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">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</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">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

En v4 utilizamos una técnica exclusiva de CSS para imitar el comportamiento de Columnas tipo Masonry, pero esta técnica tenía muchos efectos secundarios desagradables. Si deseas tener este tipo de diseño en v5 puedes utilizar el complemento Masonry. Masonry no está incluido en Bootstrap, pero hemos creado un ejemplo de demostración para ayudarle a comenzar.

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, las tarjetas ahora usan 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 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;

Tarjetas

Acerca de

Ejemplo

Título de la tarjeta

Tipos de contenido

Cuerpo

Títulos, texto y enlaces

Título de la tarjeta

Subtítulo de la tarjeta

Imágenes

Listar grupos

Fregadero de cocina

Título de la tarjeta

Encabezado y pie de página

Tratamiento especial del título

Destacados

Tratamiento especial del título

Tratamiento especial del título

Tamaños

Usar el marcado de cuadrícula

Tratamiento especial del título

Tratamiento especial del título

Usar utilidades

Título de la tarjeta

Título de la tarjeta

Usar CSS personalizado

Tratamiento especial del título

Alineación de texto

Tratamiento especial del título

Tratamiento especial del título

Tratamiento especial del título

Navegación

Tratamiento especial del título

Tratamiento especial del título

Imágenes

Image caps

Título de la tarjeta

Título de la tarjeta

Superposiciones de imágenes

Título de la tarjeta

Horizontal

Título de la tarjeta

Estilos de tarjetas

Fondo y color

Título de la tarjeta principal

Título de la tarjeta secundaria

Título de la tarjeta de éxito

Título de la tarjeta de peligro

Título de la tarjeta de advertencia

Título de la tarjeta de información

Título de la tarjeta clara

Título de la tarjeta oscura

Borde

Título de la tarjeta principal

Título de la tarjeta secundaria

Título de la tarjeta de éxito

Título de la tarjeta de peligro

Título de la tarjeta de advertencia

Título de la tarjeta de información

Título de la tarjeta clara

Título de la tarjeta oscura

Utilidades de Mixins

Título de la tarjeta de éxito

Diseño de tarjeta

Grupos de tarjetas

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Tarjetas de cuadrícula

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta

Título de la tarjeta