Ir ao contido principal Ir á navegación de documentos
Check
in English

Tarxetas

As tarxetas de Bootstrap ofrecen un contedor de contido flexible e extensible con múltiples variantes e opcións.

Nesta páxina

Sobre

Unha tarxeta é un contedor de contido flexible e extensible. Inclúe opcións para cabeceiras e pés de páxina, unha gran variedade de contidos, cores de fondo contextuais e poderosas opcións de visualización. Se estás familiarizado con Bootstrap 3, as tarxetas substitúen aos nosos antigos paneis, pozos e miniaturas. Unha funcionalidade similar a eses compoñentes está dispoñible como clases modificadoras para tarxetas.

Exemplo

As tarxetas constrúense co menor marcado e estilos posibles, pero aínda así conseguen ofrecer moito control e personalización. Construídos con flexbox, ofrecen un aliñamento sinxelo e mestúranse ben con outros compoñentes de Bootstrap. Non teñen marginpor defecto, polo que use as utilidades de espazamento segundo sexa necesario.

A continuación móstrase un exemplo de tarxeta básica con contido mixto e ancho fixo. As tarxetas non teñen un ancho fixo para comezar, polo que encherán naturalmente todo o ancho do seu elemento principal. Isto pódese personalizar facilmente coas nosas distintas opcións de tamaño .

Placeholder Image cap
Título da tarxeta

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

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

Tipos de contido

As tarxetas admiten unha gran variedade de contido, incluíndo imaxes, texto, grupos de listas, ligazóns e moito máis. Abaixo amósanse exemplos do que se admite.

Corpo

O bloque de construción dunha tarxeta é o .card-body. Utilízao sempre que necesites unha sección acolchada dentro dunha tarxeta.

Este é un texto dentro do corpo dunha tarxeta.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Títulos, texto e ligazóns

Os títulos das tarxetas úsanse engadindo .card-titlea unha <h*>etiqueta. Do mesmo xeito, as ligazóns engádense e colócanse unha á beira das outras engadindo .card-linka unha <a>etiqueta.

Os subtítulos úsanse engadindo un .card-subtitlea unha <h*>etiqueta. Se os .card-titleelementos e .card-subtitlese colocan nun .card-bodyelemento, o título e o subtítulo da tarxeta están ben aliñados.

Título da tarxeta
Subtítulo da tarxeta

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Ligazón da tarxeta Outra ligazón
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-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>

Imaxes

.card-img-topcoloca unha imaxe na parte superior da tarxeta. Con .card-text, pódese engadir texto á tarxeta. O texto dentro .card-texttamén se pode estilizar coas etiquetas HTML estándar.

Placeholder Image cap

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Lista de grupos

Crea listas de contido nunha tarxeta cun grupo de listas de descarga.

  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Destacado
  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
Pé da tarxeta
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Pía da cociña

Mestura e combina varios tipos de contido para crear a tarxeta que necesitas ou bótalle todo alí. A continuación móstranse estilos de imaxe, bloques, estilos de texto e un grupo de listas, todo envolto nunha tarxeta de ancho fixo.

Placeholder Image cap
Título da tarxeta

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

  • Un elemento
  • Un segundo elemento
  • Un terceiro elemento
Ligazón da tarxeta Outra ligazón
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Engade un encabezado e/ou pé de páxina opcional nunha tarxeta.

Destacado
Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

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

As cabeceiras das tarxetas pódense modificar engadindo .card-headeraos <h*>elementos.

Destacado
Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

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

Unha cita coñecida, contida nun elemento blockquote.

Alguén famoso en Source Title
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Destacado
Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

Vai a algún lado
hai 2 días
html 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Talla

As tarxetas non supoñen un inicio específico width, polo que terán un ancho 100 % a non ser que se indique o contrario. Podes cambialo segundo sexa necesario con CSS personalizados, clases de cuadrícula, mesturas de Sass de cuadrícula ou utilidades.

Usando o marcado de cuadrícula

Usando a grade, envolve as tarxetas en columnas e filas segundo sexa necesario.

Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

Vai a algún lado
Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

Vai a algún lado
html 
<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

Use o noso puñado de utilidades de tamaño dispoñibles para definir rapidamente o ancho dunha tarxeta.

Título da tarxeta

Con texto de apoio a continuación como inicio natural de contido adicional.

Botón
Título da tarxeta

Con texto de apoio a continuación como inicio natural de contido adicional.

Botón
html 
<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 nas súas follas de estilo ou como estilos en liña para establecer un ancho.

Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

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

Aliñación do texto

Podes cambiar rapidamente a aliñación do texto de calquera tarxeta (na súa totalidade ou partes específicas) coas nosas clases de aliñamento de texto .

Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

Vai a algún lado
Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

Vai a algún lado
Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

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

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

Engade algo de navegación á cabeceira (ou bloque) dunha tarxeta cos compoñentes de navegación de Bootstrap .

Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

Vai a algún lado
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">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>
Tratamento especial do título

Con texto de apoio a continuación como inicio natural de contido adicional.

Vai a algún lado
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">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>

Imaxes

As tarxetas inclúen algunhas opcións para traballar con imaxes. Escolle entre engadir "caps de imaxe" a cada extremo dunha tarxeta, superpoñer imaxes co contido da tarxeta ou simplemente inserir a imaxe nunha tarxeta.

Capas de imaxe

Do mesmo xeito que os encabezados e os pés de páxina, as tarxetas poden incluír "caps de imaxe" superior e inferior: imaxes na parte superior ou inferior dunha tarxeta.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.

Última actualización hai 3 minutos

Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.

Última actualización hai 3 minutos

Placeholder Image cap
html 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-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óns de imaxes

Converte unha imaxe nun fondo de tarxeta e superpoña o texto da túa tarxeta. Dependendo da imaxe, pode ou non necesitar estilos ou utilidades adicionais.

Placeholder Card image
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.

Última actualización hai 3 minutos

html 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Teña en conta que o contido non debe ser maior que a altura da imaxe. Se o contido é maior que a imaxe, o contido mostrarase fóra da imaxe.

Horizontal

Usando unha combinación de clases de rede e utilidade, as tarxetas pódense facer horizontais de forma adaptada aos móbiles e á resposta. No seguinte exemplo, eliminamos as cunetas da reixa .g-0e usamos .col-md-*clases para facer a tarxeta horizontal no punto de mdinterrupción. É posible que sexan necesarios máis axustes dependendo do contido da túa tarxeta.

Placeholder Image
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.

Última actualización hai 3 minutos

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Estilos de tarxeta

As tarxetas inclúen varias opcións para personalizar os seus fondos, bordos e cor.

Fondo e cor

Engadido na v5.2.0

Establece un background-colorprimeiro plano contrastante colorcos nosos .text-bg-{color}axudantes . Anteriormente, era necesario emparellar manualmente as utilidades que prefires .text-{color}e .bg-{color}para o estilo, que aínda podes usar se o prefires.

Cabeceira
Título da tarxeta principal

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta secundaria

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de éxito

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de perigo

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de advertencia

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de información

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta lixeira

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta escuro

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

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

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.

Borde

Use as utilidades de bordo para cambiar só a border-colortarxeta dunha tarxeta. Teña en conta que pode poñer .text-{color}clases no pai .cardou nun subconxunto do contido da tarxeta como se mostra a continuación.

Cabeceira
Título da tarxeta principal

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta secundaria

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de éxito

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de perigo

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de advertencia

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta de información

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta lixeira

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Cabeceira
Título da tarxeta escuro

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

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

Mixins utilidades

Tamén pode cambiar os bordos da cabeceira e do pé de páxina da tarxeta segundo sexa necesario, e incluso eliminalos background-colorcon .bg-transparent.

Cabeceira
Título da tarxeta de éxito

Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.

Pé de páxina
html 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Disposición da tarxeta

Ademais de dar estilo ao contido das tarxetas, Bootstrap inclúe algunhas opcións para organizar series de tarxetas. Polo momento, estas opcións de deseño aínda non responden .

Grupos de tarxetas

Usa grupos de tarxetas para renderizar tarxetas como un único elemento anexo con columnas de igual ancho e altura. Os grupos de tarxetas comezan apilados e adoitan display: flex;unirse con dimensións uniformes a partir do punto de sminterrupción.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.

Última actualización hai 3 minutos

Placeholder Image cap
Título da tarxeta

Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.

Última actualización hai 3 minutos

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Esta tarxeta ten un contido aínda máis longo que a primeira para mostrar esa acción de igual altura.

Última actualización hai 3 minutos

html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-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>

Ao utilizar grupos de tarxetas con pés de páxina, o seu contido aliñarase automaticamente.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.

Última actualización hai 3 minutos
Placeholder Image cap
Título da tarxeta

Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.

Última actualización hai 3 minutos
Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Esta tarxeta ten un contido aínda máis longo que a primeira para mostrar esa acción de igual altura.

Última actualización hai 3 minutos
html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-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>

Tarxetas de reixa

Usa o sistema de grade Bootstrap e as súas .row-colsclases para controlar cantas columnas de grade (envoltas nas túas tarxetas) mostras por fila. Por exemplo, aquí tes a .row-cols-1disposición das tarxetas nunha columna e .row-cols-md-2a división de catro tarxetas para igual ancho en varias filas, desde o punto de ruptura medio cara arriba.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Cámbiao a .row-cols-3e verás o envoltorio da cuarta tarxeta.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Cando necesites a mesma altura, engádese .h-100ás tarxetas. Se queres alturas iguais por defecto, podes configurar $card-height: 100%en Sass.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta curta.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis longa con texto de apoio a continuación como inicio natural de contido adicional. Este contido é un pouco máis longo.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Do mesmo xeito que cos grupos de tarxetas, os pés de páxina aliñaranse automaticamente.

Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Este contido é un pouco máis longo.

Última actualización hai 3 minutos
Placeholder Image cap
Título da tarxeta

Esta tarxeta ten texto de apoio a continuación como un inicio natural de contido adicional.

Última actualización hai 3 minutos
Placeholder Image cap
Título da tarxeta

Esta é unha tarxeta máis ampla con texto de apoio a continuación como un inicio natural de contido adicional. Esta tarxeta ten un contido aínda máis longo que a primeira para mostrar esa acción de igual altura.

Última actualización hai 3 minutos
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-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>

albanelería

En v4utilizamos unha técnica só CSS ​​para imitar o comportamento das columnas tipo mampostería , pero esta técnica tivo moitos efectos secundarios desagradables . Se queres ter este tipo de deseño en v5, só podes facer uso do complemento Masonry. Masonry non está incluído en Bootstrap , pero fixemos un exemplo de demostración para axudarche a comezar.

CSS

Variables

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, agora as tarxetas usan variables CSS locais activadas .cardpara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

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

Variables Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;