Bootstrap Card Komponente: eine vollständige Einführung

Tutorials
Bootstrap

Bootstrap-Karten sind ein unverzichtbares Werkzeug zur Organisation und Präsentation von Inhalten in Webprojekten. Sie bieten eine einfache, aber vielseitige Möglichkeit, visuell ansprechende Layouts zu erstellen, die sich nahtlos an verschiedene Geräte anpassen. Am Ende dieses Artikels wissen Sie, wie Sie Bootstrap-Kartenkomponenten effektiv in Ihren Projekten nutzen können.

Warum Bootstrap wählen?

Bootstrap bleibt eines der beliebtesten Frameworks für den Aufbau von responsiven und mobil-first Weblayouts. Zu den wichtigsten Vorteilen gehören:

  • Schnelles und einfaches responsives Design: Sie benötigen nur grundlegende HTML- und CSS-Kenntnisse, um beeindruckende Layouts zu erstellen.
  • Mobile-First-Ansatz: Bootstrap priorisiert die mobile Responsivität von Grund auf.
  • Browser-Kompatibilität: Es funktioniert einwandfrei in allen gängigen Browsern.
  • Flexbox-basiertes Rastersystem: Vereinfacht Ausrichtungs- und Abstandsaufgaben.
  • Umfangreiche Komponenten: Eine breite Palette wiederverwendbarer Elemente wie Schaltflächen, Modale und Karten.

Die neueste Version von Bootstrap bringt bedeutende Verbesserungen, wie die Unterstützung von Flexbox und die vielseitige Kartenkomponente, die ältere Komponenten wie Panels und Thumbnails ersetzt.

Wichtige Erkenntnisse

Bootstrap-Karten sind vielseitige Werkzeuge zum Erstellen organisierter, responsiver Layouts. Sie ermöglichen es, verschiedene Arten von Inhalten wie Text, Bilder und Multimedia in einem stilvollen Container anzuzeigen. Nachfolgend sind einige wichtige Funktionen aufgeführt, die sie für Entwickler unverzichtbar machen:

  • Benutzerfreundlichkeit: Sie können schnell eine Karte erstellen, indem Sie Elemente wie div class=”card-body” kombinieren, das den Inhaltsbereich definiert, und p class=”card-text”, in dem sich die Textinformationen befinden.
  • Unterstützung für mehrere Inhaltsarten: Fügen Sie einen Kartentitel, Bilder oder Listen-Elemente hinzu, um Ihre Inhalte effektiv zu strukturieren.
  • Responsivität: Mit Hilfe des Grids und der Breakpoints von Bootstrap können sich Karten an jede Gerätegröße anpassen – von Mobilgeräten bis hin zu Desktop-Computern.
  • Anpassbares Design: Utility-Klassen ermöglichen es Ihnen, das Erscheinungsbild anzupassen, einschließlich Farben, Rändern und Textausrichtung.
  • Erweiterte Layouts: Funktionen wie Kartengruppen, Decks und Mauerwerk-Layouts ermöglichen eine nahtlose Ausrichtung und Organisation.

Was ist die Bootstrap-Kartenkomponente?

Bootstrap führt eine vielseitige und moderne UI-Komponente namens Karten ein, die als flexible und stilvolle Container für die Anzeige verschiedener Arten von Inhalten dienen. Mit minimaler Standardgestaltung können Bootstrap-Karten leicht mit einer Vielzahl von Utility-Klassen verbessert werden.

Diese Komponente basiert auf Flexbox, was präzise Ausrichtung und Abstand ermöglicht. Entwickler können Bootstraps Abstandshilfsprogramme verwenden, um Ränder und Polsterung effektiv zu steuern.

Karten können bequem verschiedene Arten von Inhalten wie Titel, Untertitel, Fließtext und Bilder usw. sowie optionale Kopf- und Fußzeilenbereiche aufnehmen. Sie können auch verschiedene Abschnitte (Kartenblöcke) einfügen, um verschiedene Kartentypen je nach Verwendungszweck zu erstellen.

Wichtige Bootstrap-Kartenspezifische Klassen

Im Folgenden sind die wichtigen Bootstrap-Karten-Hilfsklassen zusammen mit ihrem Zweck aufgeführt:

  • Karte: Die Hauptcontainerklasse, die die Kartenelemente definiert.
  • Kartenkörper: Erstellt den primären Inhaltsbereich innerhalb der Karte.
  • Kartentitel: Gestaltet den Kartentitel, normalerweise in Verbindung mit Überschriftentags wie <h5> verwendet.
  • Kartentext: Wird für standardmäßige Textinhalte innerhalb der Karte verwendet.
  • Kartenkopf: Fügt einen gestalteten Kopfbereich oben auf der Karte hinzu.
  • Kartenfuß: Fügt einen gestalteten Fußbereich unten auf der Karte hinzu.
  • Kartenbild-oben: Platziert ein Bild oben auf der Karte.
  • Kartenbild-unten: Platziert ein Bild unten auf der Karte.
  • Listen-Gruppe: Erstellt eine Listen-Gruppe innerhalb der Karte.
  • Listen-Gruppen-Element: Gestaltet einzelne Elemente in der Listen-Gruppe.
  • card-group: Gruppiert mehrere Karten mit gleichem Breite und Höhe.
  • card-deck: Ausrichtung mehrerer Karten mit Abstand, veraltet in Bootstrap 5.
  • text-*: Hilfsklassen für Textfarben-Styling (z.B. text-primary, text-success).
  • bg-*: Hilfsklassen für Hintergrundfarben-Styling (z.B. bg-light, bg-dark).

Diese knappe Übersicht listet die wesentlichen Klassen auf, die zur Erstellung und Anpassung von Bootstrap-Karten verwendet werden.

So binden Sie Bootstrap in Ihr Projekt ein

Sie können Bootstrap in Ihrem Projekt mühelos einbinden, indem Sie es von einem Content Delivery Network (CDN) abrufen oder die erforderlichen Dateien von getbootstrap.com

herunterladen. In diesem Beispiel zeigen wir, wie Sie eine einfache HTML-Seite unter Verwendung eines CDNs einrichten, um das Bootstrap-Kartenkomponente einzuschließen. Diese Methode ermöglicht es Ihnen, Karten schnell zu erstellen und zu formatieren, ohne zusätzliche Konfiguration vornehmen zu müssen.

Befolgen Sie die folgenden Schritte, um Ihre index.html-Datei zu erstellen und Bootstrap 5.3.3 einzuschließen:

<!doctype html>
<html lang="en">
<head>
    <!-- Erforderliche Meta-Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Bootstrap Card Example</title>
</head>
<body>
    <div class="container mt-5">
        <div class="card" style="width: 18rem;">
            <div class="card-header bg-primary text-white">
                Example Card Header
            </div>
            <div class="card-body">
                <h5 class="card-title">Example Card Title</h5>
                <p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
                    header, title, and text.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle mit Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>
</html>

Wir haben die Bootstrap-Dateien über ein CDN eingebunden, um sicherzustellen, dass die neueste Framework-Version immer verfügbar ist. Ein Containerdivision wurde hinzugefügt, um als Basis für Ihren Inhalt zu dienen und es Ihnen zu ermöglichen, sofort mit dem Aufbau des Bootstrap-Kartenkomponenten zu beginnen.

Für weitere Details können Sie die Starter-Template-Dokumentation erkunden.

Erstellen von einfachen Bootstrap-Karten

Um eine einfache Karte zu erstellen, befolgen Sie diese Schritte:

  • Verwenden Sie die Klasse .card mit einem <div>-Tag, um den äußeren Container zu erstellen.
  • Fügen Sie der inneren <div>-Tag die Klasse .card-body hinzu, um den Körper der Karte zu definieren.
  • Verwenden Sie die Klassen .card-title und .card-subtitle mit Überschriftentags (<h5> und <h6>), um den Karten-Titel und Untertitel hinzuzufügen.
  • Verwenden Sie die Klasse .card-text mit <p>-Tags, um Textinhalt einzuschließen.
  • Verwenden Sie die Klasse .card-img-top mit dem <img>-Tag, um ein Bild oben auf der Karte hinzuzufügen.

Dies sind die grundlegenden Bausteine eines einfachen Kartenlayouts. Hier ist ein Beispiel:

<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
      <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

Dieser Code generiert eine Karte mit einem Bild, Titel, Untertitel, Text und einer Schaltfläche und passt sich der Breite ihres übergeordneten Containers an, es sei denn, es wird anderweitig mit der Eigenschaft style=“width: 30rem;“ festgelegt.

Hier ist ein Screenshot des Ergebnisses:

Horizontale Karten in Bootstrap

Horizontale Karten ermöglichen es Ihnen, Inhalte in einem nebeneinander angeordneten Layout anzuzeigen, was sie ideal für kompakte und organisierte Designs macht. Sie können sie mithilfe von Rasterklassen für ein responsives Verhalten erstellen, um sicherzustellen, dass die Karte auf allen Geräten gut aussieht.

<div class="card mb-3" style="max-width: 540px;">
   <div class="row g-0">
      <div class="col-md-4">
         <img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
      </div>
      <div class="col-md-8">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">This is a card with text beside an image, perfect for showcasing content
               side-by-side.
            </p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
      </div>
   </div>
</div>

Dies ist ein Screenshot des Ergebnisses:

Listengruppen in Bootstrap-Karten

Bootstrap ermöglicht es Ihnen, Ihre Karten durch die Einbindung von Listengruppen zu verbessern, um strukturierte und organisierte Inhalte einfacher anzuzeigen. Die Klassen list-group und list-group-flush integrieren sich nahtlos in Karten und ermöglichen es Entwicklern, optisch ansprechende Listen zu erstellen.

So erstellen Sie eine Karte mit einer flush Listengruppe:

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Verbesserung der Kartenfunktionen

Hinzufügen von Überschriften und Fußzeilen

Sie können Ihre Karten durch das Hinzufügen von Überschriften und Fußzeilen mit den Klassen .card-header und .card-footer verbessern. Hier ist ein Beispiel:

<div class="row">
    <div class="col-sm-3">
        <div class="card">
            <div class="card-header">
                This is a header
            </div>
            <img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <h4 class="card-subtitle">Card subtitle</h4>
                <p class="card-text">This is a simple Card example</p>
            </div>
            <div class="card-footer">
                    This is a footer
            </div>
        </div>
    </div>
</div>

Dies ist ein Screenshot des Ergebnisses:

Dieses Layout fügt der Karte mehr Kontext hinzu mit einer gestalteten Überschrift und Fußzeile.

Text überlagern auf Bildern

Verwenden Sie .card-img-overlay, um Inhalte über dem Bild zu überlagern. Indem wir einfach die Klasse card-body durch die Klasse card-img-overlay ersetzen, können wir das Bild als Überlagerung verwenden:

<div class="card" style="width: 30rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
   <div class="card-img-overlay">
      <h5 class="card-title">Card Title</h5>
      <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
      <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>

Dies ist ein Screenshot des Ergebnisses:

Hinzufügen von Bildkappen zur Karte

Fügen Sie Bilder oben oder unten auf der Karte hinzu, indem Sie .card-img-top oder .card-img-bottom verwenden.

<div class="card" style="width: 18rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
   <div class="card-body">
      <p class="card-text">This card has an image cap at both the top and bottom.</p>
   </div>
   <img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>

Dies ist ein Screenshot des Ergebnisses:

Die oberen und unteren Bilder der Karte werden Bildkappen genannt.

Responsives Design mit Bootstrap-Karten

Responsives Design sorgt dafür, dass Ihre Karten auf allen Geräten großartig aussehen. Verwenden Sie das Bootstrap-Rastersystem, um das Layout zu steuern.

Beispielcode

<div class="row row-cols-1 row-cols-md-3 g-4">
   <div class="col">
      <div class="card">
         <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
            <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
      </div>
   </div>
   <div class="col">
      <div class="card">
         <img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
         <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
            <p class="card-text">This is a simple card example created using Bootstrap 5.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
         </div>
      </div>
   </div>
</div>

Dies ist ein Screenshot des Ergebnisses:

Anpassen der Höhe und Breite von Bootstrap-Karten

Um eine bestimmte Breite für eine Karte festzulegen, können Sie das Style-Attribut oder die Utility-Klassen von Bootstrap verwenden. Hier ist ein Beispiel:

<div class="card" style="width: 10rem;">
   <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">This is a simple card example with a custom width.</p>
   </div>
</div>

Dies ist ein Screenshot des Ergebnisses:

Die Breite dieser Karte ist auf 10rem begrenzt, was je nach Designbedarf angepasst werden kann.

Normalerweise wird die Höhe der Karte angepasst, um den Inhalt der Karte vertikal anzupassen, aber wir können sie auch mit benutzerdefiniertem CSS (zum Beispiel style=” height: 10rem;”) oder den Größenhilfen von Bootstrap steuern (zum Beispiel <div class=”card h-200″>).

Bitte beachten Sie, dass die neueste Version von Bootstrap auf rem-Einheiten anstelle von px-Einheiten umgestiegen ist, da rem eine skalierbare Maßeinheit ist – dies funktioniert besser mit den Benutzereinstellungen, was den Text viel zugänglicher macht. Das Ergebnis ist, dass sich alle Elemente auf der Seite mit der Bildschirmgröße skalieren.

Sie können mehr über die neuen Funktionen von Bootstrap in dem Artikel „Bootstrap: Super Smarte Funktionen, die Sie überzeugen werden“ auf SitePoint erfahren.

Das Grid-System verwenden, um die Breite zu steuern

Eine weitere Möglichkeit, die Breite der Bootstrap-Kartenkomponente zu steuern, ist die Verwendung des Bootstrap-Grid (Reihen und Spalten):

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">This is an example card using the grid system.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
            <div class="card-body">
                <h5 class="card-title">Another Card</h5>
                <p class="card-text">This card sits next to the first one.</p>
            </div>
           </div>
    </div>
</div>

Dies ist ein Screenshot des Ergebnisses:

In diesem Beispiel werden zwei Karten nebeneinander angezeigt, wobei jede vier Spalten (col-md-4) auf mittleren und größeren Bildschirmen einnimmt.

Kartenstile

Bootstrap bietet verschiedene Optionen zur Anpassung von Karten, einschließlich Hintergrundfarben, Rahmen und Textstilen.

Hintergrund- und Textfarben

Sie können die Hintergrund- und Textfarben einer Karte mit Hilfsklassen wie .bg-primary oder .text-white ändern.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body">
    <h5 class="card-title">Primary Card Title</h5>
    <p class="card-text">Quick text to demonstrate card styling.</p>
  </div>
</div>

Randfarben

Verwenden Sie .border-{color} Klassen, um die Randfarbe Ihrer Karten anzupassen. Der Text innerhalb der Karte kann ebenfalls mit .text-{color}gestylt werden.

<div class="card border-success mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-success">
    <h5 class="card-title">Success Card Title</h5>
    <p class="card-text">Simple content styled with a border.</p>
  </div>
</div>

Transparente Kopf- und Fußzeilen

Entfernen Sie die Hintergrundfarbe von Kopf- und Fußzeilen mit .bg-transparent und passen Sie deren Ränder an.

<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-info">Header</div>
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-info">
    <h5 class="card-title">Info Card Title</h5>
    <p class="card-text">Example content inside a card.</p>
  </div>
  <div class="card-footer bg-transparent border-info">Footer</div>
</div>

Hintergründe und Ränder mischen

Kombinieren Sie Hintergrund- und Randutilities für ein einzigartiges Styling.

<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
  <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
  <div class="card-body text-dark">
    <h5 class="card-title">Mixed Style Card</h5>
    <p class="card-text">Custom card combining background and border.</p>
  </div>
</div>

Hier ist das Ergebnis, das vier verschiedene Kartenstile in einem einzeiligen Layout zeigt:

Bootstrap ermöglicht es Ihnen, Karten mit verschiedenen Kopfzeilenstilen zu erstellen

  • ‘header primary card title’ für Hauptabschnitte
  • ‘header light card title’ für subtile Designs
  • ‘header secondary card title’ für Karten mit unterstützendem Text.
  • ‘header dark card title’ für kräftige Looks
  • ‘header success card title’ für positive Nachrichten
  • ‘header danger card title’ für Warnungen.

Mit diesen vielseitigen Optionen zur Gestaltung von Karten können Sie auch einzigartige Designs wie „header warning card title“, „header info card title“ erstellen, um kritische Informationen hervorzuheben oder auf spezifische Details aufmerksam zu machen.

Navigation hinzufügen

Ein weiteres schönes Feature der Bootstrap-Kartenkomponente ist die Möglichkeit, erweiterte Navigationsmuster in den Kopfbereich hinzuzufügen, wie z.B. Tabs und Navigations-Pillen.

Tabs zur Kartenkopfzeile hinzufügen

Um Registerkarten im Header der Karte einzuschließen, verwenden Sie die Klassen .nav-tabs und .card-header-tabs auf einer ungeordneten Liste (<ul>). Hier ist ein Beispiel:

<div class="card" style="width: 30rem;">
   <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
         <li class="nav-item">
            <a class="nav-link active" href="#">Tab 1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Tab 2</a>
         </li>
      </ul>
   </div>
   <div class="card-body">
      <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
      <h5 class="card-title pt-3">Card with Tabs</h5>
      <p class="card-text">This card includes a tabbed navigation element in its header.</p>
   </div>
</div>

Dies ist der Screenshot des Ergebnisses:

Hinzufügen von Pillen zum Kartenheader

Auf die gleiche Weise können wir Navigationspillen hinzufügen, indem wir einfach .nav-tabs durch .nav-pills und .card-header-tabs durch .card-header-pill auf dem <ul> Tag ersetzen:

<div class="card" style="width: 30rem;">
   <div class="card-header">
      <ul class="nav nav-pills card-header-pill">
         <li class="nav-item">
            <a class="nav-link active" href="#">Tab 1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Tab 2</a>
         </li>
      </ul>
   </div>
   <div class="card-body">
      <img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
      <h5 class="card-title pt-3">Card with Tabs</h5>
      <p class="card-text">This card includes a pill-style navigation element in its header.</p>
   </div>
</div>

Dies ist der Screenshot des Ergebnisses:

Weitere Informationen zu diesem Thema finden Sie in der Dokumentation zu den Bootstrap-Navigationskomponenten

Wir können schnell Links in Karten einfügen, indem wir das <a> Tag mit einer Klasse .card-link verwenden:

<div class="card">
<div class="card-body">
  <h3 class="card-title">Adding Links</h3>
  <p class="card-text">These are simple links</p>
  <a href="#" class="card-link">Link 1</a>
  <a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
      This is a footer
</div>
</div>

Dies ist der Screenshot des Ergebnisses:

Ausrichten und Transformieren von Text in Bootstrap-Kartenkomponenten

Bootstrap bietet Text-Hilfsdienstprogramme Klassen zum Ausrichten und Transformieren von Text innerhalb einer Kartenkomponente. Für die Textausrichtung können Sie die folgenden Klassen verwenden:

  • .text-start für die Textlinks-Ausrichtung
  • .text-end für die Textrechtsausrichtung
  • .text-center für die Textzentrierung
  • .text-justify für die Textausrichtung im Flattersatz (gilt für ältere Versionen, in Bootstrap 5 veraltet)
  • .text-nowrap, um das Umwickeln von Text zu verhindern

Sie können auch Text mit den folgenden Klassen transformieren:

  • .text-lowercase, um den Text in Kleinbuchstaben zu verwandeln
  • .text-uppercase, um den Text in Großbuchstaben zu verwandeln
  • .text-capitalize, um den ersten Buchstaben jedes Worts zu kapitalisieren

Anpassen von Hintergrund-, Vordergrund- und Rahmenfarben des Bootstrap-Card-Komponenten

Sie können die Hintergrund-, Text- und Rahmenfarben einer Bootstrap-Karte mit Hilfsklassen für Text und Hintergrund anpassen. Hier sind einige Beispiele:

  • Textfarben: Verwenden Sie .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark oder .text-white, um die Textfarbe zu ändern.
  • Hintergrundfarben: Verwenden Sie .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark oder .bg-white, um die Hintergrundfarbe zu ändern.
  • Rahmenfarben: Verwenden Sie .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark oder .border-white, um die Rahmenfarbe zu gestalten.

Das CodePen-Demo unten zeigt alle Arten von Karten, die wir mit Bootstrap erstellen können. Experimentieren Sie frei damit:

Erstellen von fortgeschrittenen Layouts mit der Bootstrap-Card-Komponente

Die Bootstrap-Karte ist eine vielseitige UI-Komponente, die in modernen Web-Layouts weit verbreitet ist, um gemischte Inhaltstypen (wie Text und Bilder) entweder als einzelne Entität oder als gruppierte Sammlungen anzuzeigen.

Karten sind besonders nützlich für responsives Design und werden häufig in Layouts wie dem Mauerwerkslayout, auch bekannt als das Pinterest-ähnliche Layout, implementiert.

Karten können verwendet werden, um Layouts für Bildergalerien, Blogbeiträge oder E-Commerce-Produkte zu erstellen. Große Plattformen wie Google und Facebook nutzen Karten umfangreich, um Inhalte in ihren Webanwendungen zu organisieren und anzuzeigen.

Zuvor erforderte der Aufbau solcher fortschrittlicher Layouts ein tiefgreifendes Wissen über CSS und HTML. Mit den neuesten Funktionen von Bootstrap können Entwickler jedoch mühelos responsive und visuell ansprechende kartenbasierte Layouts erstellen.

Klassen wie .card-group, .card-deck und .card-columns vereinfachen den Prozess der Organisation von Karten mit konsistentem Styling und Ausrichtung.

Gruppierung/Verschachtelung von Karten

Kartengruppen in Bootstrap sind eine effiziente Möglichkeit, mehrere Kartenkomponenten als einzelne, verbundene Einheit mit einheitlicher Breite und Höhe anzuzeigen.

Dieses Layout wird durch die Verwendung der Eigenschaft display: flex; erreicht, wodurch sich alle Karten perfekt ausrichten. Es ist besonders nützlich für responsives Design und moderne Weblayouts, bei denen konsistente Kartendimensionen unerlässlich sind.

Um eine Gruppe von Karten zu erstellen, verwenden Sie die Klasse .card-group als Wrapper-Div, die einzelne Karten enthält.

Hier ist ein Beispiel, das eine Gruppe von drei Karten zeigt:

<div class="card-group">
  <div class="card text-white">
      <img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
      <div class="card-img-overlay">
   <div class="card-group">
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 1</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">This is an example of a grouped card.</p>
      </div>
   </div>
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 2</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">Grouped cards ensure uniform styling.</p>
      </div>
   </div>
   <div class="card text-white">
      <img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
      <div class="card-img-overlay">
         <h3 class="card-title">Card Title 3</h3>
         <h4 class="card-subtitle">Card Subtitle</h4>
         <p class="card-text">They are responsive and visually appealing.</p>
      </div>
   </div>
</div>

Dies ist ein Screenshot des Ergebnisses:

Wie zu sehen ist, sind die drei Karten befestigt und haben die gleiche Breite und Höhe.

Kartenstapel

In früheren Versionen von Bootstrap wurde .card-deck verwendet, um Kartenlayouts zu erstellen, bei denen die Karten die gleiche Breite und Höhe hatten, aber nicht miteinander verbunden waren. In Bootstrap 5 wird jedoch das Grid-System für diesen Zweck empfohlen. Dieser Ansatz bietet größere Flexibilität und Reaktionsfähigkeit.

Um ein ähnliches Layout zu erreichen, verwenden Sie die .row-Klasse mit .col, um den Abstand und die Ausrichtung der Karten zu steuern. Hier ist ein Beispiel:

<div class="row row-cols-1 row-cols-md-3 g-4">

Wie wir sehen können, sind die Karten gleich groß mit etwas Abstand zwischen ihnen.

Karten-Spalten

In früheren Versionen von Bootstrap wurde die .card-columns-Klasse verwendet, um ein Masonry-ähnliches Layout zu erstellen, bei dem Karten von oben nach unten und von links nach rechts hinzugefügt wurden. In Bootstrap 5 wurde diese Funktion jedoch entfernt.

Um ein ähnliches Layout zu erreichen, können Sie das Grid-System in Kombination mit dem CSS-Masonry-Layout oder einem JavaScript-Plugin wie Masonry.js für komplexere Verhaltensweisen verwenden.

Hier erfahren Sie, wie Sie ein einfaches Masonry-ähnliches Layout mit dem Grid-System und CSS erstellen:

Leistungsoptimierung

Effiziente Leistung ist entscheidend für die Erstellung von Bootstrap-Karten, die schnell laden und nahtlos anpassen. Hier sind praktische Techniken zur Verbesserung der Leistung beim Integrieren von Bootstrap-Kartenkomponenten wie div class card body und h5 class card title.

Lazy Loading von Bildern

Lazy Loading verzögert das Laden von Bildern, bis sie im Sichtbereich sichtbar sind, und optimiert die Seitenladegeschwindigkeit. Verwenden Sie das Attribut loading=“lazy“ mit card img top für eine effiziente Lösung.

<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">

Bildgrößen optimieren

Bilder an die Abmessungen ihres Containers anpassen, um schnellere Ladezeiten zu gewährleisten. Verwenden Sie img-fluid mit div class card img, um Bilder automatisch zu skalieren.

<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">

Dies stellt sicher, dass card img top perfekt passt, unabhängig von der Breite des übergeordneten Elements.

CSS und JavaScript minimieren

Stile und Skripte minimieren, um die Dateigrößen zu reduzieren. Mehrere div class card header-Elemente kombinieren und benutzerdefiniertes CSS minimieren, um eine schnellere Wiedergabe zu gewährleisten.

Optimiertes Beispiel

Anstatt sich wiederholende oder benutzerdefinierte Stile wie folgt anzuwenden:

<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
   <div class="card-body">
      <h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
      <p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
   </div>
</div>

Verwenden Sie die Utility-Klassen von Bootstrap für eine sauberere und wartungsfreundlichere Struktur:

<div class="card border-primary text-center p-3">
   <div class="card-body">
      <h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
      <p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
   </div>
</div>

Verwenden Sie SVGs für Icons

SVGs sind leicht und skalierbar, was sie ideal für Kartenüberschriften und dekorative Elemente macht. Sie laden schneller und behalten die Schärfe auf verschiedenen Geräten bei.

Beispiel

<div class="card text-center">
   <div class="card-header bg-success text-white">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
         <path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
      </svg>
      <h5 class="card-title">SVG Optimized Header</h5>
   </div>
   <div class="card-body">
      <p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
   </div>
</div>

Ressourcen vorladen und vorab abrufen

Verwenden Sie rel=“preload“, um kritische Ressourcen zu laden, und rel=“prefetch“, um zukünftige Bedürfnisse vorherzusehen. Dies ist besonders nützlich für umfangreiche Karteninhalte.

Beispiel

<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">

DOM-Komplexität reduzieren

Vermeiden Sie übermäßig verschachtelte div class card-Strukturen, die das Rendern verlangsamen können. Vereinfachen Sie Layouts, um die Leistung zu optimieren.

Vor der Optimierung

<div class="card">
   <div class="card-body">
      <div>
         <div>
            <p>Nested Content</p>
         </div>
      </div>
   </div>
</div>

Nach der Optimierung

<div class="card">
   <div class="card-body">
      <p class="card-text">Optimized Content</p>
   </div>
</div>

Schriftarten optimieren

Benutzen Sie vorab geladene benutzerdefinierte Schriftarten oder Systemschriftarten, um die Latenz zu reduzieren. Eine saubere div-Klassenkarte kann die visuelle Anziehungskraft Ihrer Karten weiter hervorheben.

Beispiel

<div class="card">
   <div class="card-body" style="font-family: 'Roboto', sans-serif;">
      <h5 class="card-title">Optimized Font</h5>
      <p class="card-text">Preloading ensures faster rendering for card content.</p>
   </div>
</div>

Fazit

Die Bootstrap-Kartenkomponente ist eine leistungsstarke Ergänzung des Bootstrap-Frameworks, das Entwicklern ermöglicht, moderne Webseiten zu erstellen, ohne sich tief mit den Funktionsweisen von CSS auseinanderzusetzen. Sie können Kartenlayouts hinzufügen, um Bildergalerien, Dashboard-Widgets darzustellen und Blogbeiträge oder Produkte für eine E-Commerce-Website anzuzeigen, indem Sie CSS-Klassen hinzufügen.

Infolge der neuen Funktionen und Komponenten bleibt Bootstrap ein leistungsstarkes CSS-Framework, das allen zur Verfügung steht, insbesondere Entwicklern, die ihre eigenen responsiven und modernen Layouts erstellen müssen, aber nicht genug Zeit und Budget oder das tiefgehende Wissen über CSS haben, das erforderlich ist, um benutzerdefinierten Code zu erstellen.

Wenn Sie die Grundlagen von Bootstrap bereits beherrschen, aber sich fragen, wie Sie Ihre Bootstrap-Fähigkeiten auf die nächste Stufe heben können, schauen Sie sich unseren Erstellen Ihrer ersten Website mit Bootstrap 4-Kurs für eine schnelle und unterhaltsame Einführung in die Möglichkeiten von Bootstrap an.

FAQs zum Beherrschen von Bootstrap-Kartenkomponenten für responsives Design

Was ist eine Bootstrap-Kartenkomponente?

Eine Bootstrap-Kartenkomponente ist ein modernes und flexibles Container für Inhalte, mit dem Sie ansprechende Layouts für Texte, Bilder und Multimedia erstellen können. Karten sind Teil des Bootstrap-Frameworks, das Entwicklern hilft, Informationen in einer responsiven und mobilfreundlichen Weise zu organisieren.

Wie erstelle ich eine Bootstrap-Kartenkomponente?

Die Erstellung einer Bootstrap-Kartenkomponente ist einfach. Sie können ein div mit der Klasse card als Container verwenden und Inhalte wie Titel, Texte und Bilder darin hinzufügen. Hier ist ein Beispiel:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is an example of a Bootstrap card body.</p>
  </div>
</div>

Wie stelle ich die Höhe und Breite einer Karte in Bootstrap ein?

Sie können die Breite und Höhe der Bootstrap-Karte mit Inline-Stilen oder Bootstrap-Utility-Klassen anpassen. Zum Beispiel:

<div class="card" style="width: 20rem; height: 15rem;">
  <div class="card-body">
    <h5 class="card-title">Custom Card</h5>
    <p class="card-text">This card has a custom height and width.</p>
  </div>
</div>

Alternativ können Sie auch Utility-Klassen für die Kartenhöhe wie w-50 oder h-100 verwenden, um die Abmessungen der Karte responsiv festzulegen.

Wie resize ich eine Karte in Bootstrap?

Um eine Karte zu ändern, können Sie Bootstrap-Utility-Klassen wie w-25, w-50 oder w-75 für die Breite und h-auto oder h-100 für die Höhe verwenden. Dadurch wird sichergestellt, dass Ihre Karte sich an das Layout anpasst, ohne zusätzlichen CSS-Code hinzuzufügen. Hier ist ein Beispiel:

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Responsive Card</h5>
    <p class="card-text">This card resizes based on its parent container.</p>
  </div>
</div>

Wie erstelle ich einen Kartentitel in Bootstrap?

Um Ihrer Karte einen Titel hinzuzufügen, verwenden Sie ein <h5>-Element mit der Klasse=“card-title“. Diese Klasse sorgt dafür, dass der Titel konsistent mit den Designstandards von Bootstrap gestylt wird.

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Card Title</h5>
      <p class="card-text">This is an example of a Bootstrap card with a title.</p>
   </div>
</div>

Wie kann ich die Klasse card-body in Bootstrap verwenden?

Die Klasse card-body ist eine Hilfsklasse, die Padding bereitstellt und Inhalte innerhalb einer Bootstrap-Karte organisiert. Sie ist der Hauptcontainer für den Inhalt einer Karte.

<div class="card">
   <div class="card-body">
      <h5 class="card-title">Using card-body</h5>
      <p class="card-text">This is the content inside the card-body section.</p>
   </div>
</div>

Wie kann man die Bootstrap-Kartengröße anpassen?

Um die Größe einer Karte anzupassen, wenden Sie eine spezifische Breite und Höhe mit Inline-Styles oder Hilfsklassen an. Zum Beispiel:

<div class="card" style="width: 250px; height: 300px;">
  <img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Fixed Size Card</h5>
    <p class="card-text">This card has a fixed size for consistency.</p>
  </div>
</div>

Wie kann man die Kartengröße in Bootstrap anpassen?

Die Kartengröße kann dynamisch mit den Hilfsklassen von Bootstrap oder CSS Grid angepasst werden. Hier ist ein Beispiel für reaktionsfähige Kartengrößen:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Adjustable size based on parent grid.</p>
      </div>
    </div>
  </div>
</div>

Kann ich Bootstrap-Kartenhintergründe und -rahmen anpassen?

Ja, Bootstrap bietet umfangreiche Anpassungsmöglichkeiten mit Hilfsklassen. Verwenden Sie bg-primary für Hintergrundfarben und border-success für Rahmenstile. Beispiel:

<div class="card bg-info border-danger">
  <div class="card-body">
    <h5 class="card-title">Custom Background</h5>
    <p class="card-text">This card has a custom background and border.</p>
  </div>
</div>

Wie kann ich Bilder mit Karten verwenden?

Bootstrap unterstützt Bilder innerhalb von Karten mit card-img-top oder card-img-bottom. Beispiel:

<div class="card">
  <img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card includes a top image.</p>
  </div>
</div>

Wie verwendet man die div-Klasse card-body in Bootstrap?

Die div-Klasse card-body in Bootstrap definiert den Hauptinhaltsbereich innerhalb einer Karte. Sie bietet Padding und sorgt für konsistenten Abstand für Texte, Bilder und andere Elemente innerhalb der Karte.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is some text within a card body.</p>
  </div>
</div>

Was ist die p-Klasse card-text in Bootstrap?

Die p-Klasse card-text in Bootstrap wird verwendet, um Textinhalt innerhalb des Körperbereichs einer Karte zu formatieren. Sie wendet Standardschriftarten an, um den Text sauber und professionell aussehen zu lassen.

<div class="card">
  <div class="card-body">
    <p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
  </div>
</div>

Wie kann man die Kartengröße in Bootstrap vergrößern?

Um die Kartengröße zu erhöhen, passen Sie ihre Breite und Höhe an, indem Sie w-100 für volle Breite verwenden oder Abmessungen unter Verwendung von Stilen angeben. Beispiel: 

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Large Card</h5>
    <p class="card-text">This card has an increased size for visibility.</p>
  </div>
</div>

Wie kann ich Karten auf die gleiche Höhe bringen?

Verwenden Sie .d-flex und .align-items-stretch:

<div class="row g-3">
   <div class="col-md-4 d-flex">
      <div class="card flex-fill">
         <h5 class="card-title">Card 1</h5>
         <p class="card-text">Aligned with others.</p>
      </div>
   </div>
</div>

Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/