Karten

Das Card-Komponente von Bootstrap ist ein flexibler Container, der genutzt werden kann, um verschiedene Arten von Inhalten strukturiert darzustellen. Es ist perfekt geeignet, um Artikel, Benutzerprofile, Produkte und mehr anzuzeigen und bietet integrierte Funktionen zur effektiven Organisation und Präsentation von Inhalten.

Hauptmerkmale

• Header und Footer: Karten können Header- und Footer-Bereiche haben, um zusätzlichen Kontext oder Aktionen im Zusammenhang mit dem Inhalt bereitzustellen;
• Bilder: Karten 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 Kartenkörper enthalten sein;
• Buttons: Die Card-Komponente von Bootstrap ermöglicht die Integration von Buttons für Aktionen wie Weiterlesen, In den Warenkorb legen oder Inhalte liken;
• Verschiedene Stile: Bootstrap bietet verschiedene Kartenstile und Layouts, um unterschiedlichen Designanforderungen gerecht zu werden, einschließlich Karten mit Hintergründen, Rahmen und Schatten.

Verwendungs-Klassen

• card: Basisklasse zur Erstellung eines Kartencontainers;
• card-header: Fügt Styling für einen Header-Bereich innerhalb der Karte hinzu;
• card-footer: Fügt Styling für einen Footer-Bereich innerhalb der Karte hinzu;
• card-img-top: Platziert ein Bild oben auf der Karte;
• card-body: Container für den Hauptinhalt der Karte, wie Text und Buttons;
• card-title: Stiliert den Titel des Karteninhalts;
• card-text: Stiliert den Textinhalt der Karte;
• btn: Wendet Bootstrap-Button-Stile auf Buttons innerhalb der Karte an;
• btn-primary, btn-secondary, etc.: Wenden spezifische Button-Farbstile innerhalb der Karte an.

Beispiel 1: Grundlegende Karte

Beispiel 2: Karte mit Kopf- und Fußzeile

Beispiel 3: Karte mit Bild