Het Card-component van Bootstrap is een flexibele container die gebruikt kan worden om verschillende soorten inhoud op een gestructureerde manier weer te geven. Het is ideaal voor het tonen van artikelen, gebruikersprofielen, producten en meer, en biedt ingebouwde functionaliteiten voor het effectief organiseren en presenteren van content.

Belangrijkste kenmerken

• Header en Footer: Kaarten kunnen een header- en footersectie bevatten om extra context of acties met betrekking tot de inhoud te bieden;
• Afbeeldingen: Kaarten ondersteunen het toevoegen van afbeeldingen, waardoor ontwikkelaars visuele inhoud naast tekstuele informatie kunnen tonen;
• Tekstinformatie: Tekstinformatie zoals titels, beschrijvingen en aanvullende gegevens kunnen binnen het kaartlichaam worden opgenomen;
• Knoppen: Het card-component van Bootstrap maakt het mogelijk om knoppen te integreren voor acties zoals meer lezen, toevoegen aan winkelwagen of inhoud liken;
• Verschillende stijlen: Bootstrap biedt diverse kaartstijlen en -lay-outs om aan verschillende ontwerpbehoeften te voldoen, waaronder kaarten met achtergronden, randen en schaduwen.

Gebruikte klassen

• card: Basisklasse voor het maken van een kaartcontainer;
• card-header: Voegt opmaak toe voor een headersectie binnen de kaart;
• card-footer: Voegt opmaak toe voor een footersectie binnen de kaart;
• card-img-top: Plaatst een afbeelding bovenaan de kaart;
• card-body: Container voor de hoofdinhoud van de kaart, zoals tekst en knoppen;
• card-title: Stijlt de titel van de kaartinhoud;
• card-text: Stijlt de tekstinhoud van de kaart;
• btn: Past Bootstrap-knopstijlen toe op knoppen binnen de kaart;
• btn-primary, btn-secondary, enz.: Past specifieke knopkleurstijlen toe binnen de kaart.

Voorbeeld 1: Basiskaart

Voorbeeld 2: Kaart met koptekst en voettekst

Voorbeeld 3: Kaart met afbeelding