Vés al contingut principal Saltar a la navegació de documents
Check
in English

Targetes

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

En aquesta pàgina

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

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.
html 
<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ç
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>

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.

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>

Llista de grups

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

  • Un element
  • Un segon element
  • Un tercer element
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>
Destacat
  • Un element
  • Un segon element
  • Un tercer element
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 element
  • Un segon element
  • Un tercer element
Peu de pàgina de la targeta
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>

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.

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

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

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

Una cita coneguda, continguda en un element blockquote.

Algú famós a 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>
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
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

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

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

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

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

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
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>
Tractament especial del títol

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

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

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

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

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>
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 .g-0i 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

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>

Estils de targetes

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

Fons i color

Afegit a la v5.2.0

Estableix un background-colorprimer pla contrastant coloramb els nostres .text-bg-{color}ajudants . Abans calia emparellar manualment la vostra elecció .text-{color}i les .bg-{color}utilitats per a l'estil, que encara podeu utilitzar si ho preferiu.

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.

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>
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 .visually-hiddenclasse.

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.

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>

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

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 comencen apilats i s'acostumen display: flex;a unir-se amb dimensions uniformes a partir del punt d' sminterrupció.

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

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>

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

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.

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>

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.

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>

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.

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>

Igual que amb els grups de targetes, els peus de pàgina 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
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>

maçoneria

En v4vam utilitzar una tècnica només de CSS per imitar el comportament de les columnes de maçoneria , però aquesta tècnica va comportar molts efectes secundaris desagradables . Si voleu tenir aquest tipus de disseny a v5, només podeu fer ús del connector Masonry. La maçoneria no està inclosa a Bootstrap , però hem fet un exemple de demostració per ajudar-vos a començar.

CSS

Les variables

Afegit a la v5.2.0

Com a part de l'enfocament de variables CSS en evolució de Bootstrap, les targetes ara utilitzen variables CSS locals activades per .carda una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

  --#{$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;