in English

Carte

E carte di Bootstrap furniscenu un containeru di cuntenutu flessibile è estensibile cù parechje varianti è opzioni.

À propositu

Una carta hè un cuntainer di cuntenutu flexible è estensibile. Include opzioni per intestazioni è piè di pagina, una larga varietà di cuntenutu, culori di fondo contextuale è opzioni di visualizazione putenti. Sè vo site familiarizatu cù Bootstrap 3, e carte rimpiazzanu i nostri vechji pannelli, pozzi è miniature. Funzionalità simili à quelli cumpunenti hè dispunibule cum'è classi modificatori per carte.

Esempiu

E carte sò custruite cù u minimu marcatu è stili pussibule, ma ancu riesce à furnisce una tonna di cuntrollu è persunalizazione. Custruitu cù flexbox, offrenu un allineamentu faciule è mischjà bè cù altri cumpunenti Bootstrap. Ùn anu micca marginper difettu, cusì utilizate l' utilità di spaziazione quantu necessariu.

Quì sottu hè un esempiu di una carta basica cun cuntenutu mistu è una larghezza fissa. I cartoni ùn anu micca una larghezza fissa per inizià, cusì cumponenu naturalmente tutta a larghezza di u so elementu parent. Questu hè facilmente persunalizatu cù e nostre diverse opzioni di taglia .

Placeholder Image cap
Titulu di a carta

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Andate in qualchì locu 
<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>

Tipi di cuntenutu

I carte supportanu una larga varietà di cuntenutu, cumprese l'imaghjini, u testu, i gruppi di lista, i ligami è più. Quì sottu sò esempi di ciò chì hè supportatu.

corpu

U bloccu di costruzione di una carta hè u .card-body. Aduprate ogni volta chì avete bisognu di una sezione imbottita in una carta.

Questu hè un testu in un corpu di carta. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tituli, testu è ligami

I tituli di carte sò usati per aghjunghje .card-titleà una <h*>tag. In u listessu modu, i ligami sò aghjuntu è posti vicinu à l'altri aghjunghjendu .card-linkà una <a>tag.

I subtitulos sò usati aghjunghjendu un .card-subtitleà un <h*>tag. Sì i .card-titleè l' .card-subtitlearticuli sò posti in un .card-bodyarticulu, u titulu di a carta è u subtitulu sò allinati bè.

Titulu di a carta
Sous-titre de la carte

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Card link Un altru ligame 
<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>

Images

.card-img-topmette una maghjina à a cima di a carta. Cù .card-text, u testu pò esse aghjuntu à a carta. U testu in l'internu .card-textpò ancu esse stilatu cù e tag HTML standard.

Placeholder Image cap

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

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

Lista gruppi

Crea listi di cuntenutu in una carta cù un gruppu di lista flush.

  • Un articulu
  • Un secondu articulu
  • Un terzu articulu
<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>
Featured
  • Un articulu
  • Un secondu articulu
  • Un terzu articulu
<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 articulu
  • Un secondu articulu
  • Un terzu articulu
Piede di carta 
<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>

Lavabo di cucina

Imbulighjate è abbinate parechji tippi di cuntenutu per creà a carta chì avete bisognu, o lanciate tuttu quì. A mostra quì sottu sò stili d'imaghjini, blocchi, stili di testu, è un gruppu di lista - tutti impannillati in una carta di larghezza fissa.

Placeholder Image cap
Titulu di a carta

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

  • Un articulu
  • Un secondu articulu
  • Un terzu articulu
Card link Un altru ligame 
<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>

Aghjunghjite un header opzionale è / o footer in una carta.

Featured
Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu 
<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>

L'intestazione di carte ponu esse stilate aghjunghjendu .card-headerelementi <h*>.

Featured
Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu 
<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>
Citazione

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in Source Title 
<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>
Featured
Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu
2 ghjorni fà 
<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>

Misure

I carte ùn assumenu micca specifichi widthper inizià, cusì seranu 100% larghe, salvu s'ellu ùn hè micca dettu altrimenti. Pudete cambià questu cum'è necessariu cù CSS persunalizati, classi di griglia, mixins di griglia Sass, o utilità.

Utilizà a marcatura di griglia

Utilizendu a griglia, imbulighjate e carte in culonni è fila quantu necessariu.

Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu
Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu 
<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>

Utilizà utilità

Aduprate a nostra manciata di utilità di dimensionamentu dispunibili per stabilisce rapidamente a larghezza di una carta.

Titulu di a carta

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Pulsante
Titulu di a carta

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

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

Utilizà CSS persunalizata

Aduprate CSS persunalizati in i vostri fogli di stile o cum'è stili inline per stabilisce una larghezza.

Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu 
<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>

Allineamentu di testu

Pudete cambià rapidamente l'allineamentu di testu di qualsiasi carta - in a so intera o parti specifiche - cù e nostre classi di allineamentu di testu .

Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu
Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu
Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu 
<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>

Aghjunghjite un pocu di navigazione à l'intestazione di una carta (o bloccu) cù i cumpunenti di navigazione di Bootstrap .

Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu 
<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">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>
Trattamentu di titulu speciale

Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Andate in qualchì locu 
<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>

Images

I carte includenu uni pochi di opzioni per travaglià cù l'imaghjini. Sceglite da appiccicà "capsule di l'imaghjini" à ogni estremità di una carta, sovrappone l'imaghjini cù u cuntenutu di a carta, o simpricimenti incrustendu l'imaghjini in una carta.

Caps d'imaghjini

Simile à l'intestazione è i piè di pagina, e carte ponu include "caps d'imaghjini" in cima è in fondu - imagine in cima o in fondu di una carta.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà

Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà

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-bottom" alt="...">
</div>

Overlays d'imaghjini

Trasforma una maghjina in un fondo di carta è sovrappone u testu di a vostra carta. Sicondu l'imaghjini, pudete o micca bisognu di stili o utilità supplementari.

Placeholder Card image
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà

<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>
Nota chì u cuntenutu ùn deve esse più grande di l'altezza di l'imaghjini. Se u cuntenutu hè più grande di l'imaghjini, u cuntenutu serà visualizatu fora di l'imaghjini.

Orizzontale

Utilizendu una cumminazione di classi di griglia è di utilità, e carte ponu esse fatte orizontali in una manera mobile-friendly è responsiva. In l'esempiu quì sottu, sguassate i canali di griglia .no-guttersè usemu .col-md-*classi per fà a carta horizontale à u puntu di mdrottura. Ulteriori aghjustamenti ponu esse necessarii secondu u cuntenutu di a vostra carta.

Placeholder Image
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà

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

Stili di carte

E carte includenu diverse opzioni per persunalizà i so sfondi, cunfini è culore.

U fondu è u culore

Aduprate u testu è l'utilità di fondo per cambià l'apparenza di una carta.

Intestazione
Titulu di a carta primaria

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta secundaria

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta di successu

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta di periculu

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta d'avvertimentu

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta d'infurmazione

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta luminosa

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di carta scura

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

<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>
Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-onlyclasse.

Cunfini

Aduprate utilità di cunfini per cambià solu a border-colorcarta. Nota chì pudete mette .text-{color}classi nantu à u genitore .cardo un subset di u cuntenutu di a carta cum'è mostratu quì sottu.

Intestazione
Titulu di a carta primaria

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta secundaria

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta di successu

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta di periculu

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta d'avvertimentu

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta d'infurmazione

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di a carta luminosa

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

Intestazione
Titulu di carta scura

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

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

Utilità Mixins

Pudete ancu cambià i cunfini nantu à l'intestazione di a carta è u piè di pagina in quantu necessariu, è ancu sguassate i so background-colorcun .bg-transparent.

Intestazione
Titulu di a carta di successu

Qualchì testu di esempiu rapidu per custruisce nantu à u tìtulu di a carta è custituiscenu a maiò parte di u cuntenutu di a carta.

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

Disposizione di carta

In più di stilà u cuntenutu in e carte, Bootstrap include uni pochi di opzioni per mette in serie di carte. Per u mumentu, queste opzioni di layout ùn sò ancu responsive .

Gruppi di carte

Aduprate gruppi di carte per renderà e carte cum'è un elementu unicu attaccatu cù colonne di larghezza è altezza uguali. I gruppi di carte partenu impilati è sò usati display: flex;per esse attaccati cù dimensioni uniformi à partesi da u puntu di smrottura.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà

Placeholder Image cap
Titulu di a carta

Questa carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Ultima aghjurnata 3 minuti fà

Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Questa carta hà ancu un cuntenutu più longu cà u primu per dimustrà chì l'azzione d'altitudine uguale.

Ultima aghjurnata 3 minuti fà

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

Quandu si usanu gruppi di carte cù piè di pagina, u so cuntenutu sarà automaticamente allineatu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà
Placeholder Image cap
Titulu di a carta

Questa carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Ultima aghjurnata 3 minuti fà
Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Questa carta hà ancu un cuntenutu più longu cà u primu per dimustrà chì l'azzione d'altitudine uguale.

Ultima aghjurnata 3 minuti fà 
<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>

I mazzi di carte

Avete bisognu di un set di carte di larghezza è altezza uguali chì ùn sò micca attaccati l'un à l'altru ? Utilizà i mazzi di carte.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà

Placeholder Image cap
Titulu di a carta

Questa carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Ultima aghjurnata 3 minuti fà

Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Questa carta hà ancu un cuntenutu più longu cà u primu per dimustrà chì l'azzione d'altitudine uguale.

Ultima aghjurnata 3 minuti fà

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

Cum'è cù i gruppi di carte, i piè di pagina di e carte in i mazzi saranu automaticamente allineati.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Ultima aghjurnata 3 minuti fà
Placeholder Image cap
Titulu di a carta

Questa carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Ultima aghjurnata 3 minuti fà
Placeholder Image cap
Titulu di a carta

Questa hè una carta più larga cù u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu. Questa carta hà ancu un cuntenutu più longu cà u primu per dimustrà chì l'azzione d'altitudine uguale.

Ultima aghjurnata 3 minuti fà 
<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>

Carte griglia

Aduprate u sistema di griglia Bootstrap è e so .row-colsclassi per cuntrullà quante colonne di griglia (involte intornu à e vostre carte) mostrate per fila. Per esempiu, quì si .row-cols-1mette e carte nantu à una colonna, è .row-cols-md-2sparte quattru carte à uguale larghezza in parechje fila, da u puntu di rottura mediu in su.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

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

Cambia à .row-cols-3è vi vede a quarta carta wrap.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

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

Quandu avete bisognu di l'altitudine uguale, aghjunghje .h-100à e carte. Se vulete alture uguali per automaticamente, pudete stabilisce $card-height: 100%in Sass.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta corta.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu.

Placeholder Image cap
Titulu di a carta

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

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

Culonni di carte

I cartoni ponu esse urganizati in colonne cum'è masoneria cù solu CSS avenduli in .card-columns. E carte sò custruite cù columnproprietà CSS invece di flexbox per un allinamentu più faciule. I carte sò urdinati da cima à fondu è da manca à diritta.

A testa alta ! U vostru chilometru cù e colonne di carte pò varià. Per impediscenu chì e carte si rompanu in e colonne, duvemu metteli display: inline-blockcum'è column-break-inside: avoidùn hè ancu una soluzione a prova di balle.

Placeholder Image cap
Titulu di a carta chì s'imbulighja in una nova linea

Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu. Stu cuntenutu hè un pocu più longu.

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in Source Title
Placeholder Image cap
Titulu di a carta

Questa carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Ultima aghjurnata 3 minuti fà

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in Source Title
Titulu di a carta

Questa carta hà un titulu regulare è un breve paràgrafu di testu sottu.

Ultima aghjurnata 3 minuti fà

Placeholder Card image

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in Source Title
Titulu di a carta

Questa hè una altra carta cù u titulu è u testu di sustegnu sottu. Questa carta hà qualchì cuntenutu supplementu per fà un pocu più altu in generale.

Ultima aghjurnata 3 minuti fà

<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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</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>

I culonni di carte ponu ancu esse allargati è persunalizati cù qualchì codice supplementu. A mostra quì sottu hè una estensione di a .card-columnsclassa chì utilizeghja u stessu CSS chì avemu usatu - colonne CSS - per generà un inseme di livelli responsivi per cambià u numeru di colonne.

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