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 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.
<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 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.
- 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>- 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
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Header è footer
Aghjunghjite un header opzionale è / o footer in una carta.
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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<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>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">
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ì locuTrattamentu 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.
PulsanteTitulu 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ì locuTrattamentu di titulu speciale
Cù u testu di sustegnu quì sottu cum'è una guida naturale à u cuntenutu supplementu.
Andate in qualchì locuTrattamentu 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>Navigazione
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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>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="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-top" alt="...">
</div>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.
<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.
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="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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 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.
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.
Titulu di a carta
Questa carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.
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.
<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.
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
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.
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.
Titulu di a carta
Questa carta hà u testu di supportu quì sottu cum'è una guida naturale à u cuntenutu supplementu.
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.
<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.
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.
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.
Titulu di a carta
Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu.
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.
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.
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.
Titulu di a carta
Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu.
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.
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.
Titulu di a carta
Questa hè una carta corta.
Titulu di a carta
Questa hè una carta più longa cù u testu di supportu sottu cum'è una guida naturale à u cuntenutu supplementu.
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.
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.
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.
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.
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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>E colonne di carte ponu ancu esse allargate è persunalizate 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 set 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;
}
}