Zum Hauptinhalt springen Zur Dokumentennavigation springen
Check
in English

Karten

Die Karten von Bootstrap bieten einen flexiblen und erweiterbaren Inhaltscontainer mit mehreren Varianten und Optionen.

Auf dieser Seite

Um

Eine Karte ist ein flexibler und erweiterbarer Inhaltsbehälter. Es enthält Optionen für Kopf- und Fußzeilen, eine Vielzahl von Inhalten, kontextbezogene Hintergrundfarben und leistungsstarke Anzeigeoptionen. Wenn Sie mit Bootstrap 3 vertraut sind, ersetzen Karten unsere alten Panels, Wells und Thumbnails. Eine ähnliche Funktionalität wie diese Komponenten ist als Modifikatorklassen für Karten verfügbar.

Beispiel

Karten werden mit so wenig Markup und Stilen wie möglich erstellt, bieten aber dennoch eine Menge Kontrolle und Anpassungsmöglichkeiten. Mit Flexbox gebaut, bieten sie eine einfache Ausrichtung und lassen sich gut mit anderen Bootstrap-Komponenten kombinieren. Sie haben marginstandardmäßig keine, verwenden Sie also nach Bedarf Abstandshilfsmittel .

Unten sehen Sie ein Beispiel einer einfachen Karte mit gemischtem Inhalt und fester Breite. Karten haben zu Beginn keine feste Breite, daher füllen sie natürlich die volle Breite des übergeordneten Elements aus. Dies lässt sich leicht mit unseren verschiedenen Größenoptionen anpassen .

Placeholder Image cap
Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Irgendwohin gehen
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Inhaltstypen

Karten unterstützen eine Vielzahl von Inhalten, darunter Bilder, Text, Listengruppen, Links und mehr. Unten finden Sie Beispiele dafür, was unterstützt wird.

Körper

Der Baustein einer Karte ist die .card-body. Verwenden Sie es, wenn Sie einen gepolsterten Abschnitt innerhalb einer Karte benötigen.

Dies ist ein Text innerhalb eines Kartenkörpers.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titel, Text und Links

Kartentitel werden durch Hinzufügen .card-titlezu einem <h*>Tag verwendet. .card-linkAuf die gleiche Weise werden Links hinzugefügt und durch Hinzufügen zu einem <a>Tag nebeneinander platziert .

Untertitel werden verwendet, indem .card-subtitleeinem <h*>Tag ein hinzugefügt wird. Wenn die .card-titleund die .card-subtitleElemente in einem .card-bodyElement platziert werden, werden der Kartentitel und der Untertitel gut ausgerichtet.

Kartentitel
Untertitel der Karte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Kartenlink Ein weiterer Link
html 
<div class="card" style="width: 18rem;">
  <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">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Bilder

.card-img-topplatziert ein Bild oben auf der Karte. Mit .card-textkann der Karte Text hinzugefügt werden. Text .card-textdarin kann auch mit den Standard-HTML-Tags gestaltet werden.

Placeholder Image cap

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Gruppen auflisten

Erstellen Sie Inhaltslisten in einer Karte mit einer Flush-Listengruppe.

  • Ein Gegenstand
  • Ein zweiter Artikel
  • Ein dritter Artikel
html 
<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>
Hervorgehoben
  • Ein Gegenstand
  • Ein zweiter Artikel
  • Ein dritter Artikel
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <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>
  • Ein Gegenstand
  • Ein zweiter Artikel
  • Ein dritter Artikel
Fußzeile der Karte
html 
<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 class="card-footer">
    Card footer
  </div>
</div>

Spüle

Mischen und kombinieren Sie mehrere Inhaltstypen, um die Karte zu erstellen, die Sie benötigen, oder werfen Sie alles hinein. Unten sehen Sie Bildstile, Blöcke, Textstile und eine Listengruppe – alles in einer Karte mit fester Breite verpackt.

Placeholder Image cap
Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

  • Ein Gegenstand
  • Ein zweiter Artikel
  • Ein dritter Artikel
Kartenlink Ein weiterer Link
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <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 class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Fügen Sie einer Karte eine optionale Kopf- und/oder Fußzeile hinzu.

Hervorgehoben
Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
html 
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Kartenkopfzeilen können durch Hinzufügen .card-headervon <h*>Elementen gestaltet werden.

Hervorgehoben
Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
html 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Zitieren

Ein bekanntes Zitat, das in einem Blockquote-Element enthalten ist.

Jemand, der in Source Title berühmt ist
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Hervorgehoben
Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
Vor 2 Tagen
html 
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Dimensionierung

Karten gehen von keinem bestimmten widthAnfang aus, daher sind sie 100 % breit, sofern nicht anders angegeben. Sie können dies nach Bedarf mit benutzerdefiniertem CSS, Grid-Klassen, Grid-Sass-Mixins oder Dienstprogrammen ändern.

Grid-Markup verwenden

Wickeln Sie Karten mithilfe des Rasters nach Bedarf in Spalten und Reihen ein.

Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
html 
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Verwenden von Dienstprogrammen

Verwenden Sie unsere Handvoll verfügbarer Dienstprogramme zur Größenanpassung, um die Breite einer Karte schnell festzulegen.

Kartentitel

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Taste
Kartentitel

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Taste
html 
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Verwenden von benutzerdefiniertem CSS

Verwenden Sie benutzerdefiniertes CSS in Ihren Stylesheets oder als Inline-Stile, um eine Breite festzulegen.

Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Textausrichtung

Mit unseren Textausrichtungsklassen können Sie die Textausrichtung jeder Karte schnell ändern – ganz oder in bestimmten Teilen .

Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Fügen Sie der Kopfzeile (oder dem Block) einer Karte mit den Navigationskomponenten von Bootstrap eine Navigation hinzu .

Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Spezielle Titelbehandlung

Mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Irgendwohin gehen
html 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bilder

Karten enthalten einige Optionen zum Arbeiten mit Bildern. Wählen Sie zwischen dem Anhängen von „Bildkappen“ an beiden Enden einer Karte, dem Überlagern von Bildern mit Karteninhalten oder dem einfachen Einbetten des Bildes in eine Karte.

Bildkappen

Ähnlich wie Kopf- und Fußzeilen können Karten obere und untere „Bildkappen“ enthalten – Bilder oben oder unten auf einer Karte.

Placeholder Image cap
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Zuletzt aktualisiert vor 3 Minuten

Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Zuletzt aktualisiert vor 3 Minuten

Placeholder Image cap
html 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

Bildüberlagerungen

Verwandeln Sie ein Bild in einen Kartenhintergrund und überlagern Sie den Text Ihrer Karte. Je nach Bild benötigen Sie möglicherweise zusätzliche Stile oder Dienstprogramme.

Placeholder Card image
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Zuletzt aktualisiert vor 3 Minuten

html 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Beachten Sie, dass der Inhalt nicht größer sein sollte als die Höhe des Bildes. Wenn der Inhalt größer als das Bild ist, wird der Inhalt außerhalb des Bildes angezeigt.

Horizontal

Mithilfe einer Kombination aus Raster- und Utility-Klassen können Karten auf mobilfreundliche und reaktionsschnelle Weise horizontal erstellt werden. Im folgenden Beispiel entfernen wir die Gitterstege mit .g-0und verwenden .col-md-*Klassen, um die Karte am mdHaltepunkt horizontal zu machen. Je nach Karteninhalt können weitere Anpassungen erforderlich sein.

Placeholder Image
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Zuletzt aktualisiert vor 3 Minuten

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kartenstile

Karten enthalten verschiedene Optionen zum Anpassen ihrer Hintergründe, Rahmen und Farben.

Hintergrund und Farbe

Hinzugefügt in v5.2.0

Setzen Sie mit unseren Helfernbackground-color einen kontrastreichen Vordergrund . Zuvor war es erforderlich, Ihre Wahl und Dienstprogramme für das Styling manuell zu koppeln, die Sie nach wie vor verwenden können, wenn Sie dies bevorzugen.color.text-bg-{color}.text-{color}.bg-{color}

Header
Primärer Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Sekundärer Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Erfolgskarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Gefahrenkarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Warnkarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Infokarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Leichter Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Dunkler Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

html 
<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .visually-hiddenKlasse verborgen ist.

Grenze

Verwenden Sie Grenzdienstprogramme , um nur das border-coloreiner Karte zu ändern. Beachten Sie, dass Sie .text-{color}Klassen auf die übergeordnete .cardKarte oder eine Teilmenge des Inhalts der Karte legen können, wie unten gezeigt.

Header
Primärer Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Sekundärer Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Erfolgskarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Gefahrenkarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Warnkarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Titel der Infokarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Leichter Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Header
Dunkler Kartentitel

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

html 
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins-Dienstprogramme

Sie können auch die Ränder der Kopf- und Fußzeile der Karte nach Bedarf ändern und sogar background-colormit entfernen .bg-transparent.

Header
Titel der Erfolgskarte

Ein kurzer Beispieltext, der auf dem Kartentitel aufbaut und den Großteil des Inhalts der Karte ausmacht.

Fusszeile
html 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Kartenlayout

Zusätzlich zum Gestalten des Inhalts innerhalb von Karten enthält Bootstrap einige Optionen zum Anordnen von Kartenserien. Diese Layoutoptionen sind derzeit noch nicht responsiv .

Kartengruppen

Verwenden Sie Kartengruppen, um Karten als einzelnes, angefügtes Element mit Spalten gleicher Breite und Höhe zu rendern. Kartengruppen beginnen gestapelt und display: flex;werden mit einheitlichen Abmessungen beginnend am smHaltepunkt befestigt.

Placeholder Image cap
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Zuletzt aktualisiert vor 3 Minuten

Placeholder Image cap
Kartentitel

Diese Karte enthält unten unterstützenden Text als natürlichen Einstieg in zusätzliche Inhalte.

Zuletzt aktualisiert vor 3 Minuten

Placeholder Image cap
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Diese Karte hat einen noch längeren Inhalt als die erste, die diese Aktion auf gleicher Höhe zeigt.

Zuletzt aktualisiert vor 3 Minuten

html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Wenn Sie Kartengruppen mit Fußzeilen verwenden, wird ihr Inhalt automatisch ausgerichtet.

Placeholder Image cap
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Zuletzt aktualisiert vor 3 Minuten
Placeholder Image cap
Kartentitel

Diese Karte enthält unten unterstützenden Text als natürlichen Einstieg in zusätzliche Inhalte.

Zuletzt aktualisiert vor 3 Minuten
Placeholder Image cap
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Diese Karte hat einen noch längeren Inhalt als die erste, die diese Aktion auf gleicher Höhe zeigt.

Zuletzt aktualisiert vor 3 Minuten
html 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Rasterkarten

Verwenden Sie das Bootstrap-Rastersystem und seine .row-colsKlassen , um zu steuern, wie viele Rasterspalten (um Ihre Karten gewickelt) Sie pro Zeile anzeigen. Hier ist zum Beispiel das .row-cols-1Auslegen der Karten in einer Spalte und das .row-cols-md-2Aufteilen von vier Karten in gleicher Breite auf mehrere Reihen, beginnend mit dem mittleren Haltepunkt aufwärts.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Ändern Sie es in .row-cols-3und Sie sehen den vierten Kartenumbruch.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Wenn Sie gleiche Höhe benötigen, fügen Sie .h-100den Karten hinzu. Wenn Sie standardmäßig gleiche Höhen wünschen, können Sie dies $card-height: 100%in Sass einstellen.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Placeholder Image cap
Kartentitel

Dies ist eine kurze Karte.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte.

Placeholder Image cap
Kartentitel

Dies ist eine längere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Genau wie bei Kartengruppen werden Kartenfußzeilen automatisch ausgerichtet.

Placeholder Image cap
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Dieser Inhalt ist etwas länger.

Zuletzt aktualisiert vor 3 Minuten
Placeholder Image cap
Kartentitel

Diese Karte enthält unten unterstützenden Text als natürlichen Einstieg in zusätzliche Inhalte.

Zuletzt aktualisiert vor 3 Minuten
Placeholder Image cap
Kartentitel

Dies ist eine breitere Karte mit unterstützendem Text unten als natürlicher Einstieg in zusätzliche Inhalte. Diese Karte hat einen noch längeren Inhalt als die erste, die diese Aktion auf gleicher Höhe zeigt.

Zuletzt aktualisiert vor 3 Minuten
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Mauerwerk

In v4haben wir eine reine CSS-Technik verwendet, um das Verhalten von Mauerwerk - ähnlichen Säulen nachzuahmen, aber diese Technik hatte viele unangenehme Nebenwirkungen . Wenn Sie diese Art von Layout in haben möchten v5, können Sie einfach das Masonry-Plugin verwenden. Masonry ist nicht in Bootstrap enthalten , aber wir haben ein Demobeispiel erstellt , um Ihnen den Einstieg zu erleichtern.

CSS

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Karten jetzt lokale CSS-Variablen .cardfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass-Variablen

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;