Saltar al contenido principal Saltar a la navegación de la documentación
¡Hay una versión más nueva de Bootstrap!
Ver en GitHub

Cards

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

On this page

Acerca de

Una card es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies, una gran variedad de contenido, colores de fondo contextuales y potentes opciones de display. Si estás familiarizado con Bootstrap 3, las cards reemplazan nuestros antiguos panels, wells y thumbnails. Funcionalidad similar a esos componentes está disponible como clases modificadoras para cards.

Ejemplo

Las cards se construyen con el mínimo de markup y estilos posible, pero aun así logran ofrecer un montón de control y personalización. Construidas con flexbox, ofrecen fácil alineación y se mezclan bien con otros componentes de Bootstrap. No tienen margin por defecto, así que usa utilidades de espaciado según sea necesario.

Abajo hay un ejemplo de una card básica con contenido mixto y ancho fijo. Las cards no tienen ancho fijo inicial, así que naturalmente llenarán el ancho completo de su elemento padre. Esto se personaliza fácilmente con nuestras diversas opciones de tamaño.

Placeholder Image cap
Título de card

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

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">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 cards soportan una gran variedad de contenido, incluyendo imágenes, texto, list groups, enlaces y más. Abajo hay ejemplos de lo que se soporta.

Cuerpo

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

Este es algo de texto dentro del cuerpo de una card.
<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 card se usan añadiendo .card-title a una etiqueta <h*>. De la misma manera, 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 usan añadiendo 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 subtítulo de la card se alinean correctamente.

Título de card
Subtítulo de card

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

Enlace de card Otro enlace 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">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 card. Con .card-text, se puede añadir texto a la card. El texto dentro de .card-text también puede estilizarse con las etiquetas HTML estándar.

Placeholder Image cap

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

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

List groups

Crea listas de contenido en una card con un flush list group.

  • 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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Destacado
  • Un elemento
  • Un segundo elemento
  • Un tercer elemento
<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 card
<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>

Kitchen sink

Mezcla y combina múltiples tipos de contenido para crear la card que necesitas, o ponlo todo ahí dentro. Abajo se muestran estilos de imagen, bloques, estilos de texto y un list group—todo envuelto en una card de ancho fijo.

Placeholder Image cap
Título de card

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

  • Un elemento
  • Un segundo elemento
  • Un tercer elemento
Enlace de card Otro enlace 
<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>

Añade un encabezado y/o pie opcional dentro de una card.

Destacado
Tratamiento especial del título

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

Ir a algún lugar 
<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>

Los encabezados de card pueden estilizarse añadiendo .card-header a elementos <h*>.

Destacado
Tratamiento especial del título

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

Ir a algún lugar 
<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 conocida, contenida en un elemento blockquote.

Alguien famoso en Título de la fuente
<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>
Destacado
Tratamiento especial del título

Con texto de apoyo abajo 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">
    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-muted">
    2 days ago
  </div>
</div>

Tamaños

Las cards no asumen un width específico inicial, así que serán 100% anchas a menos que se indique lo contrario. Puedes cambiar esto según sea necesario con CSS personalizado, clases grid, mixins Sass de grid o utilidades.

Usando markup del grid

Usando el grid, envuelve las cards en columnas y filas según sea necesario.

Tratamiento especial del título

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

Ir a algún lugar
Tratamiento especial del título

Con texto de apoyo abajo 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">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>

Usando utilidades

Usa nuestro puñado de utilidades de tamaño disponibles para establecer rápidamente el ancho de una card.

Título de card

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

Button
Título de card

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

Button 
<div class="card w-75">
  <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>

Usando CSS personalizado

Usa CSS personalizado en tus hojas de estilos o como estilos inline para establecer un ancho.

Tratamiento especial del título

Con texto de apoyo abajo 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">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 del texto

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

Tratamiento especial del título

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

Ir a algún lugar
Tratamiento especial del título

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

Ir a algún lugar
Tratamiento especial del título

Con texto de apoyo abajo 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">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" 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>

Añade algo de navegación al encabezado (o bloque) de una card con los componentes de navegación de Bootstrap.

Tratamiento especial del título

Con texto de apoyo abajo 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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" 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 texto de apoyo abajo 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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" 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 cards incluyen algunas opciones para trabajar con imágenes. Elige entre añadir "imágenes superior e inferior" en cualquier extremo de una card, superponer imágenes con contenido de la card, o simplemente embeber la imagen en una card.

Imágenes superior e inferior

De manera similar a los encabezados y pies, las cards pueden incluir imágenes superior e inferior—imágenes en la parte superior o inferior de una card.

Placeholder Image cap
Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Placeholder Image cap 
<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-muted">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-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Superposición de imágenes

Convierte una imagen en el fondo de una card y superpone el texto de tu card. Dependiendo de la imagen, puede que necesites o no estilos o utilidades adicionales.

Placeholder Card image
Título de card

Esta es una card más ancha con texto de apoyo abajo 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">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">Last updated 3 mins ago</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 grid y utilidades, las cards pueden hacerse horizontales de manera mobile-friendly y responsive. En el ejemplo de abajo, eliminamos los gutters del grid con .g-0 y usamos clases .col-md-* para hacer la card horizontal en el breakpoint md. Pueden necesitarse ajustes adicionales dependiendo del contenido de tu card.

Placeholder Image
Título de card

Esta es una card más ancha con texto de apoyo abajo 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">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-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Estilos de card

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

Fondo y color

Usa color de texto y utilidades de fondo para cambiar la apariencia de una card.

Encabezado
Título de card primary

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

Encabezado
Título de card secondary

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

Encabezado
Título de card success

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

Encabezado
Título de card danger

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

Encabezado
Título de card warning

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

Encabezado
Título de card info

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

Encabezado
Título de card light

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

Encabezado
Título de card dark

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

<div class="card text-white 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-white 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-white 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-white 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-dark 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-dark 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-dark 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-white 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>
Transmisión de significado a tecnologías asistivas

Usar color para añadir significado solo proporciona una indicación visual, que no será transmitida a los usuarios de tecnologías asistivas – como los lectores de pantalla. Asegúrate de que la información denotada por el color sea evidente desde el contenido mismo (ej. el texto visible), o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Borde

Usa utilidades de borde para cambiar solo el border-color de una card. Ten en cuenta que puedes poner clases .text-{color} en el .card padre o en un subconjunto del contenido de la card como se muestra abajo.

Encabezado
Título de card primary

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

Encabezado
Título de card secondary

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

Encabezado
Título de card success

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

Encabezado
Título de card danger

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

Encabezado
Título de card warning

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

Encabezado
Título de card info

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

Encabezado
Título de card light

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

Encabezado
Título de card dark

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

<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 text-dark">
    <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 mixins

También puedes cambiar los bordes del encabezado y pie de la card según sea necesario, e incluso eliminar su background-color con .bg-transparent.

Encabezado
Título de card success

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

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

Layout de cards

Además de estilizar el contenido dentro de las cards, Bootstrap incluye algunas opciones para organizar series de cards. Por ahora, estas opciones de layout aún no son responsive.

Grupos de cards

Usa grupos de cards para renderizar cards como un único elemento adjunto con columnas de igual ancho y altura. Los grupos de cards comienzan apilados y usan display: flex; para adjuntarse con dimensiones uniformes a partir del breakpoint sm.

Placeholder Image cap
Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Placeholder Image cap
Título de card

Esta card tiene texto de apoyo abajo como introducción natural a contenido adicional.

Última actualización hace 3 minutos

Placeholder Image cap
Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Esta card tiene contenido aún más largo que la primera para mostrar esa acción de altura igual.

Ú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">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-muted">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-muted">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-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Cuando se usan grupos de cards con pies, su contenido se alineará automáticamente.

Placeholder Image cap
Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos
Placeholder Image cap
Título de card

Esta card tiene texto de apoyo abajo como introducción natural a contenido adicional.

Última actualización hace 3 minutos
Placeholder Image cap
Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Esta card tiene contenido aún más largo que la primera para mostrar esa acción de altura igual.

Ú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">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-muted">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-muted">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-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Cards en grid

Usa el sistema grid de Bootstrap y sus .row-cols clases para controlar cuántas columnas grid (envueltas alrededor de tus cards) muestras por fila. Por ejemplo, aquí .row-cols-1 dispone las cards en una columna, y .row-cols-md-2 divide cuatro cards en igual ancho a través de múltiples filas, desde el breakpoint medium en adelante.

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

Esta es una card más larga con texto de apoyo abajo 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">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 card envolverse.

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

Esta es una card más larga con texto de apoyo abajo 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">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 altura igual, añade .h-100 a las cards. Si quieres alturas iguales por defecto, puedes configurar $card-height: 100% en Sass.

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

Esta es una card corta.

Placeholder Image cap
Título de card

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

Placeholder Image cap
Título de card

Esta es una card más larga con texto de apoyo abajo 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">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 cards, los pies de card se alinearán automáticamente.

Placeholder Image cap
Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos
Placeholder Image cap
Título de card

Esta card tiene texto de apoyo abajo como introducción natural a contenido adicional.

Última actualización hace 3 minutos
Placeholder Image cap
Título de card

Esta es una card más ancha con texto de apoyo abajo como introducción natural a contenido adicional. Esta card tiene contenido aún más largo que la primera para mostrar esa acción de altura igual.

Ú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">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-muted">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-muted">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-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

En v4 usamos una técnica solo con CSS para imitar el comportamiento de columnas tipo Masonry, pero esta técnica tenía muchos efectos secundarios desagradables. Si quieres tener este tipo de layout en v5, puedes simplemente usar el plugin Masonry. Masonry no está incluido en Bootstrap, pero hemos hecho un ejemplo demo para ayudarte a empezar.

Sass

Variables

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;
Traducción mantenida por Esdocu. Visita esdocu.com para ver más documentaciones traducidas.