Bootstrap Card-komponenten är en flexibel behållare som kan användas för att visa olika typer av innehåll på ett strukturerat sätt. Den är idealisk för att presentera artiklar, användarprofiler, produkter och mer, och erbjuder inbyggda funktioner för att organisera och presentera innehåll effektivt.

Viktiga funktioner

• Header och Footer: Kort kan ha header- och footer-sektioner för att ge ytterligare kontext eller åtgärder relaterade till innehållet;
• Bilder: Kort stöder inkludering av bilder, vilket gör det möjligt för utvecklare att visa visuellt innehåll tillsammans med textinformation;
• Textinnehåll: Textinnehåll såsom titlar, beskrivningar och ytterligare information kan inkluderas i kortets kropp;
• Knappar: Bootstraps kortkomponent möjliggör integrering av knappar för åtgärder som att läsa mer, lägga till i varukorg eller gilla innehåll;
• Olika stilar: Bootstrap erbjuder olika kortstilar och layouter för att passa olika designbehov, inklusive kort med bakgrunder, ramar och skuggor.

Användningsklasser

• card: Grundklass för att skapa en kortbehållare;
• card-header: Lägger till stil för en headersektion i kortet;
• card-footer: Lägger till stil för en footersektion i kortet;
• card-img-top: Placerar en bild överst i kortet;
• card-body: Behållare för kortets huvudinnehåll, såsom text och knappar;
• card-title: Stilar titeln på kortinnehållet;
• card-text: Stilar textinnehållet i kortet;
• btn: Tillämpa Bootstraps knappstilar på knappar i kortet;
• btn-primary, btn-secondary, etc.: Tillämpa specifika knappfärgsstilar i kortet.

Exempel 1: Grundläggande kort

Exempel 2: Kort med header och footer

Exempel 3: Kort med bild