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 .

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Lista gruppi

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum à l'eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum à l'eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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.

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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum à l'eros

Card link Un altru ligame

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Header è footer

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

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

Qualchissia famosu in Source Title

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

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à

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

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 class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

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 utilizanu display: flex;per ottene a so dimensione uniforme.

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 carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

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. 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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

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 carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Ultima aghjurnata 3 minuti fà

Titulu di a carta

Ultima aghjurnata 3 minuti fà

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

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.

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à

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à

Titulu di a carta

Ultima aghjurnata 3 minuti fà

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

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 carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.

Ultima aghjurnata 3 minuti fà

Titulu di a carta

Ultima aghjurnata 3 minuti fà

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

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.

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.

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

Qualchissia famosu in Source Title

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à

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

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à

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

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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has 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 class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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;
  }
}

Carte

À propositu

Esempiu

Titulu di a carta

Tipi di cuntenutu

corpu

Tituli, testu è ligami

Titulu di a carta

Sous-titre de la carte

Images

Lista gruppi

Lavabo di cucina

Titulu di a carta

Header è footer

Trattamentu di titulu speciale

Featured

Trattamentu di titulu speciale

Trattamentu di titulu speciale

Misure

Utilizà a marcatura di griglia

Trattamentu di titulu speciale

Trattamentu di titulu speciale

Utilizà utilità

Titulu di a carta

Titulu di a carta

Utilizà CSS persunalizata

Trattamentu di titulu speciale

Allineamentu di testu

Trattamentu di titulu speciale

Trattamentu di titulu speciale

Trattamentu di titulu speciale

Navigazione

Trattamentu di titulu speciale

Trattamentu di titulu speciale

Images

Caps d'imaghjini

Titulu di a carta

Titulu di a carta

Overlays d'imaghjini

Titulu di a carta

Stili di carte

U fondu è u culore

Titulu di a carta primaria

Titulu di a carta secundaria

Titulu di a carta di successu

Titulu di a carta di periculu

Titulu di a carta d'avvertimentu

Titulu di a carta d'infurmazione

Titulu di a carta luminosa

Titulu di carta scura

Trasmette u significatu à e tecnulugia assistive

Cunfini

Titulu di a carta primaria

Titulu di a carta secundaria

Titulu di a carta di successu

Titulu di a carta di periculu

Titulu di a carta d'avvertimentu

Titulu di a carta d'infurmazione

Titulu di a carta luminosa

Titulu di carta scura

Utilità Mixins

Titulu di a carta di successu

Disposizione di carta

Gruppi di carte

Titulu di a carta

Titulu di a carta

Titulu di a carta

Titulu di a carta

Titulu di a carta

Titulu di a carta

I mazzi di carte

Titulu di a carta

Titulu di a carta

Titulu di a carta

Titulu di a carta

Titulu di a carta

Titulu di a carta

Culonni di carte

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

Titulu di a carta