Die Card-Komponente von Bootstrap ist ein flexibler Container, der zur strukturierten Darstellung verschiedener Inhaltstypen verwendet werden kann. Sie eignet sich ideal zur Präsentation von Artikeln, Benutzerprofilen, Produkten und mehr und bietet integrierte Funktionen zur effektiven Organisation und Präsentation von Inhalten.

Hauptmerkmale

• Header und Footer: Cards können Kopf- und Fußbereiche enthalten, um zusätzlichen Kontext oder Aktionen im Zusammenhang mit dem Inhalt bereitzustellen;
• Bilder: Cards unterstützen die Einbindung von Bildern, sodass Entwickler visuelle Inhalte neben Textinformationen präsentieren können;
• Textinhalt: Textinhalte wie Titel, Beschreibungen und zusätzliche Informationen können im Card-Body eingefügt werden;
• Buttons: Die Card-Komponente von Bootstrap ermöglicht die Integration von Schaltflächen für Aktionen wie Weiterlesen, In den Warenkorb legen oder Liken von Inhalten;
• Vielfalt an Stilen: Bootstrap bietet verschiedene Card-Stile und Layouts für unterschiedliche Designanforderungen, einschließlich Cards mit Hintergründen, Rahmen und Schatten.

Verwendete Klassen

• card: Basisklasse zur Erstellung eines Card-Containers;
• card-header: Fügt eine Gestaltung für einen Kopfbereich innerhalb der Card hinzu;
• card-footer: Fügt eine Gestaltung für einen Fußbereich innerhalb der Card hinzu;
• card-img-top: Platziert ein Bild am oberen Rand der Card;
• card-body: Container für den Hauptinhalt der Card, wie Text und Schaltflächen;
• card-title: Gestaltet den Titel des Card-Inhalts;
• card-text: Gestaltet den Textinhalt der Card;
• btn: Wendet Bootstrap-Button-Stile auf Schaltflächen innerhalb der Card an;
• btn-primary, btn-secondary usw.: Wendet spezifische Button-Farbstile innerhalb der Card an.

Beispiel 1: Grundlegende Karte

Beispiel 2: Karte mit Kopf- und Fußzeile

Beispiel 3: Karte mit Bild