Tarjetas

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

Sobre

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á familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros viejos paneles, pozos y miniaturas. Una funcionalidad similar a esos componentes está disponible como clases de modificadores para tarjetas.

Ejemplo

Las tarjetas se construyen con la menor cantidad de marcas 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 marginpor defecto, así que use las utilidades de espaciado según sea necesario.

A continuación se muestra un ejemplo de una tarjeta básica con contenido mixto y un ancho fijo. Las tarjetas no tienen un ancho fijo para comenzar, por lo que naturalmente llenarán todo el ancho de su elemento principal. 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 construir sobre el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Ir a alguna parte

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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. Úselo siempre que necesite una sección acolchada dentro de una tarjeta.

Este es un texto dentro del cuerpo de una tarjeta.

<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 al agregarlos .card-titlea una <h*>etiqueta. De la misma manera, los enlaces se agregan y colocan uno al lado del otro al agregar .card-linkuna <a>etiqueta.

Los subtítulos se usan agregando un .card-subtitlea una <h*>etiqueta. Si el .card-titley los .card-subtitleelementos se colocan en un .card-bodyelemento, el título y el subtítulo de la tarjeta se alinean muy bien.

Título de la tarjeta

subtítulo de la tarjeta

Un texto de ejemplo rápido para construir sobre el 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">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-topcoloca una imagen en la parte superior de la tarjeta. Con .card-text, se puede agregar texto a la tarjeta. El texto dentro .card-texttambién se puede diseñar con las etiquetas HTML estándar.

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Grupos de listas

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

Cras justo odio
Dapibus ac instalaciones en
Vestíbulo en eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Presentado

Cras justo odio
Dapibus ac instalaciones en
Vestíbulo en eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Fregadero

Mezcle y combine múltiples tipos de contenido para crear la tarjeta que necesita, o coloque 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 construir sobre el título de la tarjeta y componer la mayor parte del contenido de la tarjeta.

Cras justo odio
Dapibus ac instalaciones en
Vestíbulo en eros

Enlace de tarjeta Otro enlace

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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 pié de página

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

Presentado

Tratamiento especial del título

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

Ir a alguna parte

<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 las tarjetas se pueden diseñar agregando .card-headerelementos <h*>.

Presentado

Tratamiento especial del título

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

Ir a alguna parte

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

Cotizar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.

Alguien famoso en Título fuente

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Presentado

Tratamiento especial del título

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

Ir a alguna parte

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>

Dimensionamiento

Las tarjetas no asumen un widthinicio específico, por lo que tendrán un 100 % de ancho 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.

Uso de marcado de cuadrícula

Usando la cuadrícula, envuelva 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 alguna parte

Tratamiento especial del título

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

Ir a alguna parte

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

Uso de utilidades

Use nuestro puñado de utilidades de tamaño disponibles para establecer 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">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

Use CSS personalizado en sus 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 alguna parte

<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

Puede 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 alguna parte

Tratamiento especial del título

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

Ir a alguna parte

Tratamiento especial del título

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

Ir a alguna parte

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

Agregue un poco 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 alguna parte

<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" 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="#">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 a continuación como introducción natural a contenido adicional.

Ir a alguna parte

<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="#">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. Elija entre agregar “tapas 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.

Tapas de imagen

De manera similar a los encabezados y pies de página, las tarjetas pueden incluir "imágenes mayúsculas" 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 una 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 una 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 class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

superposiciones de imágenes

Convierta una imagen en un fondo de tarjeta y superponga el texto de su tarjeta. Dependiendo de la imagen, es posible que necesite o no estilos o utilidades adicionales.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural 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 class="card-img" src="..." alt="Card image">
  <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>

estilos de tarjeta

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

fondo y color

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

Encabezamiento

Título de la tarjeta principal

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

Encabezamiento

Título de la carta secundaria

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

Encabezamiento

Título de la tarjeta de éxito

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

Encabezamiento

Título de la carta de peligro

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

Encabezamiento

Título de la tarjeta de advertencia

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

Encabezamiento

Título de la tarjeta de información

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

Encabezamiento

Título de la carta de luz

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

Encabezamiento

Título de la carta oscura

Un texto de ejemplo rápido para construir sobre el 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">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-white 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-white 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 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>

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úrese de que la información indicada 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 .sr-onlyclase.

Borde

Use utilidades de borde para cambiar solo el border-colorde una tarjeta. Tenga en cuenta que puede poner .text-{color}clases en el elemento principal .cardo en un subconjunto del contenido de la tarjeta, como se muestra a continuación.

Encabezamiento

Título de la tarjeta principal

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

Encabezamiento

Título de la carta secundaria

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

Encabezamiento

Título de la tarjeta de éxito

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

Encabezamiento

Título de la carta de peligro

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

Encabezamiento

Título de la tarjeta de advertencia

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

Encabezamiento

Título de la tarjeta de información

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

Encabezamiento

Título de la carta de luz

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

Encabezamiento

Título de la carta oscura

Un texto de ejemplo rápido para construir sobre el 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">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 text-warning">
    <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 text-info">
    <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 de los mixins

También puede cambiar los bordes en el encabezado y pie de página de la tarjeta según sea necesario, e incluso eliminarlos background-colorcon .bg-transparent.

Encabezamiento

Título de la tarjeta de éxito

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

Pie de página

<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 la 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 receptivas .

Grupos de tarjetas

Use grupos de tarjetas para representar tarjetas como un único elemento adjunto con columnas de igual ancho y alto. Los grupos de tarjetas se utilizan display: flex;para lograr su tamaño uniforme.

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una 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 una 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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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 una 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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Barajas de cartas

¿Necesita un conjunto de tarjetas de igual ancho y alto que no estén unidas entre sí? Usa mazos de cartas.

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.

Ú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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural 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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Columnas de cartas

Las tarjetas se pueden organizar en columnas similares a Masonry con solo CSS envolviéndolas en .card-columns. Las tarjetas se construyen con columnpropiedades CSS en lugar de flexbox para facilitar la alineación. Las cartas se ordenan de arriba a abajo y de izquierda a derecha.

¡Aviso! Su millaje con columnas de tarjeta puede variar. Para evitar que las tarjetas se rompan en las columnas, debemos configurarlas display: inline-blockporque column-break-inside: avoidaún no es una solución a prueba de balas.

Título de la tarjeta que se ajusta a una nueva línea

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.

Alguien famoso en Título fuente

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat.

Alguien famoso en Título fuente

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.

Alguien famoso en Título fuente

Título de la tarjeta

Última actualización hace 3 minutos

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 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>

Las columnas de la tarjeta también se pueden ampliar y personalizar con algún código adicional. A continuación se muestra una extensión de la .card-columnsclase que usa el mismo CSS que usamos (columnas CSS) para generar un conjunto de niveles receptivos para cambiar la cantidad de columnas.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Tarjetas

Sobre

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

Grupos de listas

Fregadero

Título de la tarjeta

Encabezado y pié de página

Tratamiento especial del título

Presentado

Tratamiento especial del título

Tratamiento especial del título

Dimensionamiento

Uso de marcado de cuadrícula

Tratamiento especial del título

Tratamiento especial del título

Uso de utilidades

Título de la tarjeta

Título de la tarjeta

Usando CSS personalizado

Tratamiento especial del título

Alineación del 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

Tapas de imagen

Título de la tarjeta

Título de la tarjeta

superposiciones de imágenes

Título de la tarjeta

estilos de tarjeta

fondo y color

Título de la tarjeta principal

Título de la carta secundaria

Título de la tarjeta de éxito

Título de la carta de peligro

Título de la tarjeta de advertencia

Título de la tarjeta de información

Título de la carta de luz

Título de la carta oscura

Transmitir significado a las tecnologías de asistencia

Borde

Título de la tarjeta principal

Título de la carta secundaria

Título de la tarjeta de éxito

Título de la carta de peligro

Título de la tarjeta de advertencia

Título de la tarjeta de información

Título de la carta de luz

Título de la carta oscura

Utilidades de los mixins

Título de la tarjeta de éxito

diseño de la 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

Barajas de cartas

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

Columnas de cartas

Título de la tarjeta que se ajusta a una nueva línea

Título de la tarjeta