Passà à u cuntenutu principale Salta à a navigazione di documenti
Check
in English

Carte

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

In sta pagina

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

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

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.

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

Lista gruppi

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

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

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

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

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

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in 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>
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à
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>

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

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

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

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

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
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>
Trattamentu di titulu speciale

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

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

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

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à

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>
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 .g-0è 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à

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>

Stili di carte

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

U fondu è u culore

Aggiuntu in v5.2.0

Stabilisci un background-colorprimu pianu cuntrastanti colorcù i nostri .text-bg-{color}aiutanti . In precedenza, era necessariu di accoppià manualmente a vostra scelta .text-{color}è .bg-{color}utilità per u stilu, chì pudete ancu aduprà se preferite.

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.

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

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.

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>

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

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à

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>

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

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.

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>

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.

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>

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.

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>

Cum'è cù i gruppi di carte, i piè di pagina di e carte 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à
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>

muratura

In v4avemu usatu una tecnica solu CSS per imità u cumpurtamentu di e colonne cum'è a Masoneria , ma sta tecnica hè stata cun assai effetti secundari sgradevoli . Se vulete avè stu tipu di layout in v5, pudete solu fà usu di u plugin Masonry. A masoneria ùn hè micca inclusa in Bootstrap , ma avemu fattu un esempiu demo per aiutà à principià.

CSS

Variabili

Aggiuntu in v5.2.0

Comu parte di l'avvicinamentu di e variabili CSS in evoluzione di Bootstrap, e carte usanu avà variabili CSS lucali .cardper una persunalizazione mejorata in tempu reale. I valori per e variabili CSS sò stabiliti via Sass, cusì a persunalizazione di Sass hè ancu supportata.

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

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