Carte

Le schede di Bootstrap forniscono un contenitore di contenuti flessibile ed estensibile con più varianti e opzioni.

Su questa pagina

Di

Una carta è un contenitore di contenuti flessibile ed estensibile. Include opzioni per intestazioni e piè di pagina, un'ampia varietà di contenuti, colori di sfondo contestuali e potenti opzioni di visualizzazione. Se hai familiarità con Bootstrap 3, le schede sostituiscono i nostri vecchi pannelli, pozzi e miniature. Funzionalità simili a quelle componenti sono disponibili come classi modificatori per le carte.

Esempio

Le carte sono costruite con il minor numero possibile di markup e stili, ma riescono comunque a fornire un sacco di controllo e personalizzazione. Costruiti con flexbox, offrono un facile allineamento e si combinano bene con altri componenti Bootstrap. Non hanno marginper impostazione predefinita, quindi usa le utilità di spaziatura secondo necessità.

Di seguito è riportato un esempio di una scheda base con contenuto misto e larghezza fissa. Le carte non hanno una larghezza fissa per iniziare, quindi riempiranno naturalmente l'intera larghezza del suo elemento genitore. Questo è facilmente personalizzabile con le nostre varie opzioni di dimensionamento .

Titolo della carta

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Andare da qualche parte

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 contenuto

Le schede supportano un'ampia varietà di contenuti, tra cui immagini, testo, gruppi di elenchi, collegamenti e altro. Di seguito sono riportati esempi di ciò che è supportato.

Corpo

L'elemento costitutivo di una carta è il .card-body. Usalo ogni volta che hai bisogno di una sezione imbottita all'interno di una carta.

Questo è del testo all'interno del corpo di una carta.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titoli, testo e collegamenti

I titoli delle carte vengono utilizzati aggiungendo .card-titlea un <h*>tag. Allo stesso modo, i collegamenti vengono aggiunti e posizionati uno accanto all'altro aggiungendo .card-linka un <a>tag.

I sottotitoli vengono utilizzati aggiungendo a .card-subtitlea un <h*>tag. Se gli .card-titleelementi e .card-subtitlesono inseriti in un .card-bodyelemento, il titolo e il sottotitolo della carta sono ben allineati.

Titolo della carta

Sottotitolo della carta

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Collegamento scheda Un altro collegamento

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>

immagini

.card-img-topposiziona un'immagine in cima alla scheda. Con .card-text, il testo può essere aggiunto alla scheda. Il testo all'interno .card-textpuò anche essere stilizzato con i tag HTML standard.

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della 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>

Elenca i gruppi

Crea elenchi di contenuti in una carta con un gruppo di elenchi di colore.

Un oggetto
Un secondo oggetto
Un terzo elemento

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>

In primo piano

Un oggetto
Un secondo oggetto
Un terzo elemento

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 oggetto
Un secondo oggetto
Un terzo elemento

Piè di pagina

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>

Lavandino della cucina

Mescola e abbina più tipi di contenuto per creare la scheda di cui hai bisogno o butta tutto lì dentro. Di seguito sono mostrati stili di immagine, blocchi, stili di testo e un gruppo di elenchi, il tutto racchiuso in una scheda a larghezza fissa.

Titolo della carta

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Un oggetto
Un secondo oggetto
Un terzo elemento

Collegamento scheda Un altro collegamento

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>

Intestazione e piè di pagina

Aggiungi un'intestazione e/o un piè di pagina facoltativi all'interno di una scheda.

In primo piano

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

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>

.card-headerLe intestazioni delle carte possono essere stilizzate aggiungendo <h*>elementi.

In primo piano

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

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 citazione nota, contenuta in un elemento blockquote.

Qualcuno famoso nel titolo della fonte

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>

In primo piano

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

2 giorni fa

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>

Dimensionamento

Le carte non presuppongono un widthinizio specifico, quindi saranno larghe al 100% se non diversamente indicato. Puoi modificarlo secondo necessità con CSS personalizzati, classi di griglia, mixin Sass della griglia o utilità.

Utilizzo del markup della griglia

Usando la griglia, avvolgi le carte in colonne e righe secondo necessità.

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

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>

Utilizzo di utilità

Usa la nostra manciata di utilità di dimensionamento disponibili per impostare rapidamente la larghezza di una carta.

Titolo della carta

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Pulsante

Titolo della carta

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

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>

Utilizzo di CSS personalizzati

Usa CSS personalizzati nei tuoi fogli di stile o come stili in linea per impostare una larghezza.

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

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>

Allineamento del testo

Puoi modificare rapidamente l'allineamento del testo di qualsiasi scheda, nella sua interezza o in parti specifiche, con le nostre classi di allineamento del testo .

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

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>

Aggiungi un po' di navigazione all'intestazione (o blocco) di una carta con i componenti di navigazione di Bootstrap .

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

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>

Trattamento speciale del titolo

Con il testo di supporto di seguito come naturale introduzione a contenuti aggiuntivi.

Andare da qualche parte

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>

immagini

Le schede includono alcune opzioni per lavorare con le immagini. Scegli tra l'aggiunta di "tappi immagine" a una delle estremità di una scheda, la sovrapposizione di immagini con il contenuto della scheda o semplicemente l'incorporamento dell'immagine in una scheda.

Tappi immagine

Simile alle intestazioni e ai piè di pagina, le schede possono includere "cappucci immagine" in alto e in basso, immagini nella parte superiore o inferiore di una scheda.

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Ultimo aggiornamento 3 minuti fa

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Ultimo aggiornamento 3 minuti fa

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>

Sovrapposizioni di immagini

Trasforma un'immagine in uno sfondo di una carta e sovrapponi il testo della tua carta. A seconda dell'immagine, potresti aver bisogno o meno di stili o utilità aggiuntivi.

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Ultimo aggiornamento 3 minuti fa

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>

Tieni presente che il contenuto non deve essere più grande dell'altezza dell'immagine. Se il contenuto è più grande dell'immagine, il contenuto verrà visualizzato all'esterno dell'immagine.

Orizzontale

Utilizzando una combinazione di griglia e classi di utilità, le carte possono essere rese orizzontali in modo ottimizzato per i dispositivi mobili e reattive. Nell'esempio seguente, rimuoviamo le grondaie della griglia con .g-0e utilizziamo .col-md-*le classi per rendere la scheda orizzontale al punto di mdinterruzione. Potrebbero essere necessarie ulteriori modifiche a seconda del contenuto della tua carta.

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Ultimo aggiornamento 3 minuti fa

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

Le schede includono varie opzioni per la personalizzazione di sfondi, bordi e colore.

Sfondo e colore

Aggiunto nella v5.2.0

Imposta un background-colorprimo piano contrastante colorcon i nostri .text-bg-{color}aiutanti . In precedenza era necessario accoppiare manualmente la tua scelta .text-{color}e .bg-{color}le utilità per lo styling, che puoi comunque utilizzare se preferisci.

Intestazione

Titolo della carta principale

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta secondaria

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta di successo

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta di pericolo

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta di avviso

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della scheda informativa

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta leggera

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta scura

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della 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>

Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .visually-hiddenclasse.

Confine

Usa le utilità di confine per cambiare solo il border-colordi una carta. Nota che puoi inserire .text-{color}classi sul genitore .cardo su un sottoinsieme dei contenuti della scheda come mostrato di seguito.

Intestazione

Titolo della carta principale

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta secondaria

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta di successo

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta di pericolo

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta di avviso

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della scheda informativa

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta leggera

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Intestazione

Titolo della carta scura

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della 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à di mixin

Puoi anche modificare i bordi dell'intestazione e del piè di pagina della carta secondo necessità e persino rimuoverli background-colorcon .bg-transparent.

Intestazione

Titolo della carta di successo

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Piè di pagina

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

Oltre allo stile del contenuto all'interno delle carte, Bootstrap include alcune opzioni per disporre le serie di carte. Per il momento, queste opzioni di layout non sono ancora reattive .

Gruppi di carte

Usa i gruppi di carte per rendere le carte come un singolo elemento allegato con colonne di larghezza e altezza uguali. I gruppi di carte iniziano impilati e display: flex;vengono utilizzati per attaccarsi con dimensioni uniformi a partire dal punto di sminterruzione.

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Ultimo aggiornamento 3 minuti fa

Titolo della carta

Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.

Ultimo aggiornamento 3 minuti fa

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questa carta ha un contenuto ancora più lungo della prima a mostrare quell'azione di uguale altezza.

Ultimo aggiornamento 3 minuti fa

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>

Quando si utilizzano gruppi di carte con piè di pagina, il loro contenuto si allineerà automaticamente.

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Ultimo aggiornamento 3 minuti fa

Titolo della carta

Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.

Ultimo aggiornamento 3 minuti fa

Titolo della carta

Ultimo aggiornamento 3 minuti fa

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

Usa il sistema di griglia Bootstrap e le sue .row-colsclassi per controllare quante colonne della griglia (avvolte attorno alle tue carte) mostri per riga. Ad esempio, ecco la .row-cols-1disposizione delle carte su una colonna e la .row-cols-md-2suddivisione di quattro carte in larghezza uguale su più righe, dal punto di interruzione medio in su.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

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>

Cambialo in .row-cols-3e vedrai il quarto involucro di carta.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

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>

Quando hai bisogno della stessa altezza, aggiungi .h-100alle carte. Se vuoi altezze uguali per impostazione predefinita, puoi impostare $card-height: 100%in Sass.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Titolo della carta

Questa è una carta corta.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.

Titolo della carta

Questa è una scheda più lunga con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

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>

Proprio come con i gruppi di carte, i piè di pagina delle carte si allineeranno automaticamente.

Titolo della carta

Questa è una scheda più ampia con il testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi. Questo contenuto è un po' più lungo.

Ultimo aggiornamento 3 minuti fa

Titolo della carta

Questa scheda ha un testo di supporto di seguito come introduzione naturale a contenuti aggiuntivi.

Ultimo aggiornamento 3 minuti fa

Titolo della carta

Ultimo aggiornamento 3 minuti fa

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>

Opere murarie

In v4abbiamo usato una tecnica solo CSS per imitare il comportamento delle colonne simili alla muratura , ma questa tecnica ha avuto molti effetti collaterali spiacevoli . Se vuoi avere questo tipo di layout in v5, puoi semplicemente utilizzare il plugin Masonry. La muratura non è inclusa in Bootstrap , ma abbiamo creato un esempio demo per aiutarti a iniziare.

CSS

Variabili

Aggiunto nella v5.2.0

Come parte dell'approccio in evoluzione delle variabili CSS di Bootstrap, le schede ora utilizzano variabili CSS locali .cardper una migliore personalizzazione in tempo reale. I valori per le variabili CSS vengono impostati tramite Sass, quindi anche la personalizzazione di Sass è ancora 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 Sas

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

Carte

Di

Esempio

Titolo della carta

Tipi di contenuto

Corpo

Titoli, testo e collegamenti

Titolo della carta

Sottotitolo della carta

immagini

Elenca i gruppi

Lavandino della cucina

Titolo della carta

Intestazione e piè di pagina

Trattamento speciale del titolo

In primo piano

Trattamento speciale del titolo

Trattamento speciale del titolo

Dimensionamento

Utilizzo del markup della griglia

Trattamento speciale del titolo

Trattamento speciale del titolo

Utilizzo di utilità

Titolo della carta

Titolo della carta

Utilizzo di CSS personalizzati

Trattamento speciale del titolo

Allineamento del testo

Trattamento speciale del titolo

Trattamento speciale del titolo

Trattamento speciale del titolo

Navigazione

Trattamento speciale del titolo

Trattamento speciale del titolo

immagini

Tappi immagine

Titolo della carta

Titolo della carta

Sovrapposizioni di immagini

Titolo della carta

Orizzontale

Titolo della carta

Stili di carte

Sfondo e colore

Titolo della carta principale

Titolo della carta secondaria

Titolo della carta di successo

Titolo della carta di pericolo

Titolo della carta di avviso

Titolo della scheda informativa

Titolo della carta leggera

Titolo della carta scura

Trasmettere significato alle tecnologie assistive

Confine

Titolo della carta principale

Titolo della carta secondaria

Titolo della carta di successo

Titolo della carta di pericolo

Titolo della carta di avviso

Titolo della scheda informativa

Titolo della carta leggera

Titolo della carta scura

Utilità di mixin

Titolo della carta di successo

Disposizione delle carte

Gruppi di carte

Titolo della carta

Titolo della carta

Titolo della carta

Titolo della carta

Titolo della carta

Titolo della carta

Carte griglia

Titolo della carta

Titolo della carta

Titolo della carta

Titolo della carta

Titolo della carta

Titolo della carta

Titolo della carta