Source

Tarxetas

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

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 .

100 % x 180
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 
<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 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. 
<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 
<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.

Capa de imaxe [100 % x 180]

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

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

Lista de grupos

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestíbulo no 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>
Destacado
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestíbulo no 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>

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.

Capa de imaxe [100 % x 180]
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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestíbulo no eros
Ligazón da tarxeta Outra ligazón 
<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>

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

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

Alguén famoso en Source Title 
<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>
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 
<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 
<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 
<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 
<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 
<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>

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 
<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>
Tratamento especial do título

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

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

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.

100 % x 180
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

100 % x 180 
<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>

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.

100 % x 270
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

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

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

Fondo e cor

Use utilidades de texto e fondo para cambiar a aparencia dunha tarxeta.

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.

<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 á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 .sr-onlyclase.

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.

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

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 
<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 usan display: flex;para conseguir o seu tamaño uniforme.

100 % x 180
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

100 % x 180
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

100 % x 180
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

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

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

100 % x 180
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
100 % x 180
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
100 % x 180
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 
<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>

Barallas de cartas

Necesitas un conxunto de tarxetas de igual ancho e alto que non estean unidas entre si? Usa barallas de cartas.

100 % x 200
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.

Última actualización hai 3 minutos

100 % x 200
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

100 % x 200
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

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

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

100 % x 180
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
100 % x 180
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
100 % x 180
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 
<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 tarxetas

As tarxetas pódense organizar en columnas tipo Masonry con só CSS ​​envolvéndoas en .card-columns. As tarxetas constrúense con columnpropiedades CSS en lugar de flexbox para facilitar o aliñamento. As tarxetas están ordenadas de arriba a abaixo e de esquerda a dereita.

Aviso! A túa quilometraxe coas columnas da tarxeta pode variar. Para evitar que as tarxetas se rompan entre as columnas, debemos configuralas display: inline-blockcomo column-break-inside: avoidunha solución a proba de balas aínda.

100 % x 160
Título da tarxeta que se envolve nunha nova liña

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.

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

Alguén famoso en Source Title
100 % x 160
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

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

Alguén famoso en Source Title
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

100 % x 260

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

Alguén famoso en Source Title
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

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

As columnas das tarxetas tamén se poden ampliar e personalizar con algún código adicional. A continuación móstrase unha extensión da .card-columnsclase que utiliza o mesmo CSS que usamos (columnas CSS) para xerar un conxunto de niveis de resposta para cambiar o número de columnas.

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