Cards

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

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

¿Qué es una tarjeta?

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 viejos panels, wells y thumbnails. Una funcionalidad similar a esos componentes está disponible como clases modificadoras para tarjetas.

Ejemplo

Las tarjetas se construyen con la menor cantidad de marcado y estilos posible, pero aun así logran ofrecer una tonelada 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 por defecto, así que usa 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 padre. Esto se puede personalizar fácilmente con nuestras diversas opciones de tamaño.

Título de la tarjeta

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Ir a algún lugar

<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 texto de ejemplo rápido para colocal cerca del 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, 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 .card-body. Úsalo siempre que necesites una sección con padding dentro de una tarjeta.

Este es un texto dentro del cuerpo de una tarjeta.

<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 cartas se usan agregando .card-title a una etiqueta <h*>. De la misma manera, los enlaces se agregan y 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 alinearán muy bien.

Título de la tarjeta

Subtítulo de la tarjeta

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Enlace de tarjeta Otro enlace

<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-muted">Subtítulo de la tarjeta</h6>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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 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 colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

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

List groups

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

Un elemento
Un segundo elemento
Un tercer elemento

<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

<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

<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>

Kitchen sink

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

Título de la tarjeta

Un texto de ejemplo rápido para colocal cerca del 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

<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 texto de ejemplo rápido para colocal cerca del 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>

Encabezado y pié de página

Agrega un encabezado 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 introducción natural a contenido adicional.

Ir a algún lugar

<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 introducción natural a contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Los encabezados de las tarjetas se pueden diseñar agregando .card-header a los elementos <h*>.

Destacado

Tratamiento especial del título

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

Ir a algún lugar

<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 introducción natural a contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Cita

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Título de la fuente

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

Destacado

Tratamiento especial del título

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

Ir a algún lugar

Hace 2 días

<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 introducción natural a contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
  <div class="card-footer text-muted">
    Hace 2 días
  </div>
</div>

Dimensionamiento

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

Uso de 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 texto de apoyo a continuación como introducción natural a contenido adicional.

Ir a algún lugar

Tratamiento especial del título

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

Ir a algún lugar

<div class="row">
  <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 introducción natural a 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 introducción natural a 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 tamaño disponibles para configurar rápidamente el ancho de una tarjeta.

Título de la tarjeta

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

Botón

Título de la tarjeta

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

Botón

<div class="card w-75">
  <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 introducción natural a 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 introducción natural a 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 introducción natural a contenido adicional.

Ir a algún lugar

<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 introducción natural a contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Alineación del 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 introducción natural a contenido adicional.

Ir a algún lugar

Tratamiento especial del título

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

Ir a algún lugar

Tratamiento especial del título

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

Ir a algún lugar

<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 introducción natural a contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

<div class="card text-center" 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 introducción natural a 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 introducción natural a contenido adicional.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

Navegación

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

Ir a algún lugar

<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">Deshabilitado</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 introducción natural a 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 introducción natural a contenido adicional.

Ir a algún lugar

<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">Deshabilitado</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 introducción natural a 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. Elije entre agregar “capas 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.

Capas de imágenes

De forma similar a los encabezados y pies de página, las tarjetas pueden incluir “capas de imágenes” en la parte superior e inferior: 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 introducción natural a 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 apoyo a continuación como introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

<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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
    <p class="card-text"><small class="text-muted">Última actualización 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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
    <p class="card-text"><small class="text-muted">Última actualización hace 3 minutos</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Superposición de imágenes

Convierte una imagen en un fondo de tarjeta y superpon 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 apoyo a continuación como introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

<div class="card bg-dark text-white">
  <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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
    <p class="card-text">Última actualización hace 3 minutos</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 cuadrícula y clases de utilidad, las tarjetas se pueden hacer horizontales de una manera responsive y compatible con dispositivos móviles. En el siguiente ejemplo, eliminamos los gutters de la cuadrícula con .g-0 y usamos las clases .col-md-* para hacer que la tarjeta sea horizontal en el breakpoint md. Es posible que se necesiten más ajustes según el contenido de tu tarjeta.

Título de la tarjeta

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

Última actualización hace 3 minutos

<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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
        <p class="card-text"><small class="text-muted">Última actualización hace 3 minutos</small></p>
      </div>
    </div>
  </div>
</div>

Estilos de tarjeta

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

Fondo y color

Utiliza color de texto y utilidades de fondo para cambiar la apariencia de una tarjeta.

Encabezado

Título de tarjeta Primary

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de tarjeta Secondary

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de tarjeta Success

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de tarjeta Danger

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de tarjeta Warning

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de tarjeta Info

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de tarjeta Light

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de tarjeta Dark

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

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

Transmitir significado a las tecnologías de asistencia

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 la información denotada por el color sea obvia a partir del contenido mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Borde

Usa las utilidades de border para cambiar solo el borde-color de una tarjeta. Ten en cuenta que puedes colocar las 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 Primary

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta Secondary

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta Success

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta Danger

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta Warning

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta Info

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta Light

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Encabezado

Título de la tarjeta Dark

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Encabezado</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Título de la tarjeta Primary</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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">Encabezado</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Título de la tarjeta Secondary</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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">Encabezado</div>
  <div class="card-body text-success">
    <h5 class="card-title">Título de la tarjeta Success</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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">Encabezado</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Título de la tarjeta Danger</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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">Encabezado</div>
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta Warning</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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">Encabezado</div>
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta Info</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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">Encabezado</div>
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta Light</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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">Encabezado</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Título de la tarjeta Dark</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.</p>
  </div>
</div>

Utilidades 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 tarjeta Success

Un texto de ejemplo rápido para colocal cerca del título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Pie de tarjeta

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Encabezado</div>
  <div class="card-body text-success">
    <h5 class="card-title">Título de tarjeta Success</h5>
    <p class="card-text">Un texto de ejemplo rápido para colocal cerca del 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 tarjeta</div>
</div>

Layout de tarjeta

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

Grupos de tarjetas

Usa grupos de tarjetas para representar tarjetas como un único elemento adjunto con columnas de igual ancho y alto. Los grupos de cartas comienzan apilados y usan display: flex; para unirse con dimensiones uniformes comenzando en el breakpoint sm.

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

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

<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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
      <p class="card-text"><small class="text-muted">Última actualización 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 a contenido adicional.</p>
      <p class="card-text"><small class="text-muted">Última actualización 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 introducción natural a 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-muted">Última actualización hace 3 minutos</small></p>
    </div>
  </div>
</div>

Al usar 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 introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

Última actualización hace 3 minutos

<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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Última actualización 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 a contenido adicional.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Última actualización 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 introducción natural a 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-muted">Última actualización hace 3 minutos</small>
    </div>
  </div>
</div>

Tarjetas de cuadrícula

Utiliza el sistema de cuadrícula Bootstrap y sus clases .row-cols para controlar cuántas columnas de cuadrícula (envueltas alrededor de tus tarjetas) muestra por hilera. Por ejemplo, aquí está .row-cols-1 colocando las tarjetas en una columna, y .row-cols-md-2 dividiendo cuatro tarjetas al mismo ancho en varias filas, desde el breakpoint medium hacia arriba.

Título de la tarjeta

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

Título de la tarjeta

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

<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 introducción natural a 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 introducción natural a 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 introducción natural a 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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
      </div>
    </div>
  </div>
</div>

Cámbialo a .row-cols-3 y verás el ajuste de la cuarta tarjeta.

Título de la tarjeta

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

Título de la tarjeta

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

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

Título de la tarjeta

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

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

Última actualización hace 3 minutos

Título de la tarjeta

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

Última actualización hace 3 minutos

Título de la tarjeta

Última actualización hace 3 minutos

<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 introducción natural a contenido adicional. Este contenido es un poco más largo.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Última actualización 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 a contenido adicional.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Última actualización 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 introducción natural a 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-muted">Última actualización hace 3 minutos</small>
      </div>
    </div>
  </div>
</div>

Masonry

En v4 usamos una técnica solo de CSS para imitar el comportamiento de las columnas similares a Masonry, pero esta técnica vino con muchos efectos secundarios desagradables. Si deseas tener este tipo de diseño en v5, puedes usar el complemento Masonry. Masonry no está incluida en Bootstrap, pero creamos un ejemplo de demostración para ayudarte a comenzar.

Sass

Variables

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $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($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.