Bootstrap 5 scheda

carta

Le carte di Bootstrap 5 sono scatole con bordi, con un piccolo spazio intorno al contenuto. Include intestazione, piè di pagina, contenuto, colori e altre opzioni.

carta di base

Una carta di base è fatta con .card creata dalla classe, il contenuto della carta ha un .card-body classe:

Esempio

<div class="card">
  <div class="card-body">carta di base</div>
</div>

Prova personalmente

testata e piè di pagina

.card-header Aggiungi il titolo alla carta con la classe:.card-footer Aggiungi il piè di pagina alla carta con la classe:

Esempio

<div class="card">
  <div class="card-header">testata</div>
  <div class="card-body">contenuto</div>
  <div class="card-footer"> piè di pagina</div>
</div>

Prova personalmente

Carta contestuale

Per aggiungere un colore di sfondo alla carta, utilizza le classi di contesto:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Esempio

Prova personalmente

titolo, testo e link

Utilizza .card-title Aggiungi il titolo della carta a qualsiasi elemento di titolo. Se <p> l'elemento è .card-body l'ultimo elemento figlio (o l'unico elemento figlio), allora .card-text Classe per rimuovere <p> Margine inferiore dell'elemento..card-link Aggiungi un effetto azzurro e hover per qualsiasi link di classe.

Esempio

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Titolo della carta</h4>
    <p class="card-text">Alcuni esempi di testo. Alcuni esempi di testo.</p>
    <a href="#" class="card-link">Link della carta</a>
    <a href="#" class="card-link">Un altro link</a>
  </div>
</div>

Prova personalmente

Immagine della carta

Converti .card-img-top o .card-img-bottom Aggiungi a <img>, puoi posizionare l'immagine in alto o in basso nella carta.

Notare che abbiamo aggiunto l'immagine al di fuori di .card-body per coprire tutta la larghezza:

Esempio

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Immagine della carta">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates è un programmatore ed ingegnere. Alcuni esempi di testo. Alcuni esempi di testo.</p>
    <a href="#" class="btn btn-primary">Visualizza profilo personale</a>
  </div>
</div>

Prova personalmente

Superficie di immagine della carta

Converti l'immagine in sfondo della carta e usa .card-img-overlay Aggiungi testo nell'immagine in alto:

Esempio

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Immagine della carta">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text"> Alcuni esempi di testo. Alcuni esempi di testo.</p>
    <a href="#" class="btn btn-primary">Visualizza profilo personale</a>
  </div>
</div>

Prova personalmente