Source

Targetes

Les targetes de Bootstrap proporcionen un contenidor de contingut flexible i extensible amb múltiples variants i opcions.

Sobre

Una targeta és un contenidor flexible i extensible. Inclou opcions per a capçaleres i peus de pàgina, una gran varietat de contingut, colors de fons contextuals i potents opcions de visualització. Si esteu familiaritzat amb Bootstrap 3, les targetes substitueixen els nostres panells, pous i miniatures antics. Hi ha disponible una funcionalitat similar a aquests components com a classes modificadores per a les targetes.

Exemple

Les targetes es creen amb el mínim marcat i estils possibles, però tot i així aconsegueixen oferir un munt de control i personalització. Construïts amb flexbox, ofereixen una fàcil alineació i es barregen bé amb altres components Bootstrap. No tenen marginper defecte, així que utilitzeu les utilitats d'espaiat segons sigui necessari.

A continuació es mostra un exemple de targeta bàsica amb contingut mixt i amplada fixa. Les targetes no tenen una amplada fixa per començar, de manera que ompliran naturalment tota l'amplada del seu element principal. Això es pot personalitzar fàcilment amb les nostres diferents opcions de mida .

Placeholder Image cap
Títol de la targeta

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Anar a algun lloc 
<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>

Tipus de contingut

Les targetes admeten una gran varietat de contingut, com ara imatges, text, grups de llista, enllaços i molt més. A continuació es mostren exemples del que s'admet.

Cos

El bloc de construcció d'una targeta és el .card-body. Utilitzeu-lo sempre que necessiteu una secció encoixinada dins d'una targeta.

Aquest és un text dins del cos d'una targeta. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Títols, text i enllaços

Els títols de les targetes s'utilitzen afegint -los .card-titlea una <h*>etiqueta. De la mateixa manera, s'afegeixen enllaços i es col·loquen un al costat de l'altre afegint -los .card-linka una <a>etiqueta.

Els subtítols s'utilitzen afegint a .card-subtitlea una <h*>etiqueta. Si els .card-titleelements i .card-subtitlees col·loquen en un .card-bodyelement, el títol i el subtítol de la targeta s'alineen perfectament.

Títol de la targeta
Subtítol de la targeta

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Enllaç de la targeta Un altre enllaç 
<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>

Imatges

.card-img-topcol·loca una imatge a la part superior de la targeta. Amb .card-text, es pot afegir text a la targeta. El text dins .card-texttambé es pot dissenyar amb les etiquetes HTML estàndard.

Placeholder Image cap

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

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

Llista de grups

Creeu llistes de contingut en una targeta amb un grup de llistes d'encaix.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Vestíbul a l'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>
Destacat
  • Cras justo odio
  • Dapibus ac facilitis in
  • Vestíbul a l'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>

Pica de la cuina

Barreja i combina diversos tipus de contingut per crear la targeta que necessites o tira-hi tot. A continuació es mostren estils d'imatge, blocs, estils de text i un grup de llista, tot embolicat en una targeta d'amplada fixa.

Placeholder Image cap
Títol de la targeta

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

  • Cras justo odio
  • Dapibus ac facilitis in
  • Vestíbul a l'eros
Enllaç de la targeta Un altre enllaç 
<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">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>

Afegiu una capçalera i/o un peu de pàgina opcionals dins d'una targeta.

Destacat
Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc 
<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>

Les capçaleres de les targetes es poden dissenyar afegint .card-header- hi <h*>elements.

Destacat
Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc 
<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.

Algú famós a 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>
Destacat
Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc
fa 2 dies 
<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

Les targetes assumeixen que no s'especifica widthper començar, de manera que seran 100% amples tret que s'indiqui el contrari. Podeu canviar-ho segons sigui necessari amb CSS personalitzats, classes de quadrícula, mixins Sass de quadrícula o utilitats.

Utilitzant el marcatge de quadrícula

Utilitzant la quadrícula, emboliqui les targetes en columnes i files segons sigui necessari.

Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc
Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc 
<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>

Ús d'utilitats

Utilitzeu el nostre grapat d' utilitats de mida disponibles per configurar ràpidament l'amplada d'una targeta.

Títol de la targeta

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Botó
Títol de la targeta

Amb el text de suport a continuació com a introducció natural a contingut addicional.

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

Utilitzant CSS personalitzat

Utilitzeu CSS personalitzat als vostres fulls d'estil o com a estils en línia per establir una amplada.

Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc 
<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ó del text

Podeu canviar ràpidament l'alineació del text de qualsevol targeta (en la seva totalitat o parts específiques) amb les nostres classes d'alineació de text .

Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc
Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc
Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc 
<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>

Afegiu una mica de navegació a la capçalera (o bloc) d'una targeta amb els components de navegació de Bootstrap .

Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc 
<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Tractament especial del títol

Amb el text de suport a continuació com a introducció natural a contingut addicional.

Anar a algun lloc 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Imatges

Les targetes inclouen algunes opcions per treballar amb imatges. Trieu entre afegir "majúscules d'imatge" a qualsevol dels extrems d'una targeta, superposar imatges amb el contingut de la targeta o simplement incrustar la imatge en una targeta.

Caps d'imatge

De manera semblant a les capçaleres i peus de pàgina, les targetes poden incloure "majúscules d'imatge" superior i inferior, imatges a la part superior o inferior d'una targeta.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts

Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-top" alt="...">
</div>

Superposicions d'imatges

Converteix una imatge en un fons de targeta i superposa el text de la targeta. Depenent de la imatge, pot ser que necessiteu estils o utilitats addicionals o no.

Placeholder Card image
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Tingueu en compte que el contingut no ha de ser més gran que l'alçada de la imatge. Si el contingut és més gran que la imatge, el contingut es mostrarà fora de la imatge.

Horitzontal

Utilitzant una combinació de classes de graella i utilitat, les targetes es poden fer horitzontals d'una manera adaptada per a mòbils i sensible. A l'exemple següent, eliminem els canals de la quadrícula .no-guttersi fem servir .col-md-*classes per fer que la targeta sigui horitzontal al punt d' mdinterrupció. És possible que calguin més ajustos en funció del contingut de la targeta.

Placeholder Image
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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>

Estils de targetes

Les targetes inclouen diverses opcions per personalitzar els seus fons, vores i color.

Fons i color

Utilitzeu les utilitats de text i fons per canviar l'aparença d'una targeta.

Capçalera
Títol de la targeta principal

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta secundària

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta d'èxit

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta de perill

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta d'advertència

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta d'informació

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta lleugera

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol fosc de la targeta

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

<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>
Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.

Frontera

Utilitzeu les utilitats de vora per canviar només el border-colord'una targeta. Tingueu en compte que podeu posar .text-{color}classes al pare .cardo a un subconjunt del contingut de la targeta tal com es mostra a continuació.

Capçalera
Títol de la targeta principal

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta secundària

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta d'èxit

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta de perill

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta d'advertència

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta d'informació

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol de la targeta lleugera

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

Capçalera
Títol fosc de la targeta

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

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

Utilitats mixins

També podeu canviar les vores de la capçalera i el peu de pàgina de la targeta segons sigui necessari, i fins i tot eliminar-les background-coloramb .bg-transparent.

Capçalera
Títol de la targeta d'èxit

Alguns exemples de text ràpid per construir el títol de la targeta i compondre la major part del contingut de la targeta.

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

Disseny de la targeta

A més de dissenyar el contingut de les targetes, Bootstrap inclou algunes opcions per dissenyar sèries de targetes. De moment, aquestes opcions de disseny encara no responen .

Grups de targetes

Utilitzeu grups de targetes per representar targetes com a element únic adjunt amb columnes d'amplada i alçada iguals. Els grups de targetes utilitzen display: flex;per aconseguir la seva mida uniforme.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts

Placeholder Image cap
Títol de la targeta

Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.

Última actualització fa 3 minuts

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquesta targeta té un contingut fins i tot més llarg que la primera que mostra aquesta acció d'alçada igual.

Última actualització fa 3 minuts

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

Quan utilitzeu grups de targetes amb peus de pàgina, el seu contingut s'alinearà automàticament.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts
Placeholder Image cap
Títol de la targeta

Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.

Última actualització fa 3 minuts
Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquesta targeta té un contingut fins i tot més llarg que la primera que mostra aquesta acció d'alçada igual.

Última actualització fa 3 minuts 
<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>

Baralles de cartes

Necessites un conjunt de targetes d'amplada i alçada iguals que no estiguin enganxades entre si? Utilitzeu baralles de cartes.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts

Placeholder Image cap
Títol de la targeta

Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.

Última actualització fa 3 minuts

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquesta targeta té un contingut fins i tot més llarg que la primera que mostra aquesta acció d'alçada igual.

Última actualització fa 3 minuts

<div class="card-deck">
  <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>
      <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>

Igual que amb els grups de cartes, els peus de cartes de les baralles s'alinearan automàticament.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Última actualització fa 3 minuts
Placeholder Image cap
Títol de la targeta

Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.

Última actualització fa 3 minuts
Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més àmplia amb el text de suport a continuació com a introducció natural a contingut addicional. Aquesta targeta té un contingut fins i tot més llarg que la primera que mostra aquesta acció d'alçada igual.

Última actualització fa 3 minuts 
<div class="card-deck">
  <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>

Targetes de graella

Utilitzeu el sistema de quadrícula Bootstrap i les seves .row-colsclasses per controlar quantes columnes de quadrícula (embolicades al voltant de les vostres targetes) mostreu per fila. Per exemple, aquí es .row-cols-1distribueixen les cartes en una columna i es .row-cols-md-2divideixen quatre cartes a la mateixa amplada en diverses files, des del punt de ruptura mitjà cap amunt.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Canvieu-lo a .row-cols-3i veureu l'embolcall de la quarta targeta.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Quan necessiteu la mateixa alçada, afegiu .h-100-les a les cartes. Si voleu altures iguals de manera predeterminada, podeu configurar-lo $card-height: 100%a Sass.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

Placeholder Image cap
Títol de la targeta

Aquesta és una carta curta.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional.

Placeholder Image cap
Títol de la targeta

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Columnes de targetes

Les targetes es poden organitzar en columnes semblants a maçoneria amb només CSS embolicant-les en .card-columns. Les targetes es creen amb columnpropietats CSS en lloc de flexbox per facilitar l'alineació. Les cartes s'ordenen de dalt a baix i d'esquerra a dreta.

Caps amunt! El vostre quilometratge amb columnes de targetes pot variar. Per evitar que les targetes es trenquin a través de columnes, hem de configurar-les display: inline-blockperquè column-break-inside: avoidencara no és una solució a prova de bales.

Placeholder Image cap
Títol de la targeta que s'ajusta a una línia nova

Aquesta és una targeta més llarga amb el text de suport a continuació com a introducció natural a contingut addicional. Aquest contingut és una mica més llarg.

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

Algú famós a Source Title
Placeholder Image cap
Títol de la targeta

Aquesta targeta té text de suport a continuació com a introducció natural a contingut addicional.

Última actualització fa 3 minuts

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

Algú famós a Source Title
Títol de la targeta

Aquesta targeta té un títol normal i un paràgraf curt de text a sota.

Última actualització fa 3 minuts

Placeholder Card image

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

Algú famós a Source Title
Títol de la targeta

Aquesta és una altra targeta amb títol i text de suport a continuació. Aquesta targeta té contingut addicional per fer-la una mica més alta en general.

Última actualització fa 3 minuts

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 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 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 text-white">
        <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 a regular title and short paragraphy of text below it.</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>
  <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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Les columnes de la targeta també es poden ampliar i personalitzar amb algun codi addicional. A continuació es mostra una extensió de la .card-columnsclasse que utilitza el mateix CSS que fem servir (columnes CSS) per generar un conjunt de nivells responsius per canviar el nombre de columnes.

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