Il componente Card di Bootstrap è un contenitore flessibile che può essere utilizzato per mostrare diversi tipi di contenuti in modo strutturato. È ideale per visualizzare articoli, profili utente, prodotti e altro ancora, offrendo funzionalità integrate per organizzare e presentare i contenuti in modo efficace.

Caratteristiche principali

• Header e Footer: Le card possono avere sezioni di intestazione e piè di pagina per fornire contesto aggiuntivo o azioni correlate al contenuto;
• Immagini: Le card supportano l'inclusione di immagini, consentendo agli sviluppatori di mostrare contenuti visivi insieme alle informazioni testuali;
• Contenuto testuale: All'interno del corpo della card è possibile includere contenuti testuali come titoli, descrizioni e informazioni aggiuntive;
• Pulsanti: Il componente card di Bootstrap consente l'integrazione di pulsanti per azioni come leggere di più, aggiungere al carrello o mettere "mi piace" al contenuto;
• Varietà di stili: Bootstrap offre diversi stili e layout di card per soddisfare varie esigenze di design, incluse card con sfondi, bordi e ombre.

Classi di utilizzo

• card: Classe di base per creare un contenitore card;
• card-header: Aggiunge lo stile per una sezione di intestazione all'interno della card;
• card-footer: Aggiunge lo stile per una sezione di piè di pagina all'interno della card;
• card-img-top: Posiziona un'immagine nella parte superiore della card;
• card-body: Contenitore per il contenuto principale della card, come testo e pulsanti;
• card-title: Applica lo stile al titolo del contenuto della card;
• card-text: Applica lo stile al testo della card;
• btn: Applica gli stili dei pulsanti Bootstrap ai pulsanti all'interno della card;
• btn-primary, btn-secondary, ecc.: Applica stili di colore specifici ai pulsanti all'interno della card.

Esempio 1: Card di base

Esempio 2: Card con intestazione e piè di pagina

Esempio 3: Scheda con immagine