Karten

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

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 .

Kartentitel

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

Irgendwohin gehen

<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.

<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

<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.

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

<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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum bei Eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Hervorgehoben

Cras justo odio
Dapibus ac facilisis in
Vestibulum bei Eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</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.

Kartentitel

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum bei Eros

Kartenlink Ein weiterer Link

<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Kopf-und Fußzeile

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

<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

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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

<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

<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

<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

<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

<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-right" 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

<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" 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" href="#" tabindex="-1" aria-disabled="true">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

<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" href="#" tabindex="-1" aria-disabled="true">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.

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

<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-top" 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.

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

<div class="card bg-dark text-white">
  <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">Last updated 3 mins ago</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 .no-guttersund verwenden .col-md-*Klassen, um die Karte am mdHaltepunkt horizontal zu machen. Je nach Karteninhalt können weitere Anpassungen erforderlich sein.

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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 von Hintergrund, Rahmen und Farbe.

Hintergrund und Farbe

Verwenden Sie Text- und Hintergrunddienstprogramme , um das Aussehen einer Karte zu ändern.

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.

<div class="card text-white 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-white 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-white 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-white 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-white 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-white 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 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-white 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 .sr-onlyKlasse 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.

<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 text-warning">
    <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 text-info">
    <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

<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 verwenden display: flex;, um ihre einheitliche Größe zu erreichen.

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

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

Zuletzt aktualisiert vor 3 Minuten

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

<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.

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

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

Zuletzt aktualisiert vor 3 Minuten

Kartentitel

Zuletzt aktualisiert vor 3 Minuten

<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>

Kartendecks

Benötigen Sie einen Satz Karten gleicher Breite und Höhe, die nicht aneinander befestigt sind? Verwenden Sie Kartendecks.

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.

Zuletzt aktualisiert vor 3 Minuten

Kartentitel

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

Zuletzt aktualisiert vor 3 Minuten

Kartentitel

Zuletzt aktualisiert vor 3 Minuten

<div class="card-deck">
  <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>
      <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>

Genau wie bei Kartengruppen werden Kartenfußzeilen in Decks automatisch ausgerichtet.

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

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

Zuletzt aktualisiert vor 3 Minuten

Kartentitel

Zuletzt aktualisiert vor 3 Minuten

<div class="card-deck">
  <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.

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.

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.

Kartentitel

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

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.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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.

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.

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.

Kartentitel

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

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.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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.

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.

Kartentitel

Dies ist eine kurze Karte.

Kartentitel

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

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.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Kartenspalten

Karten können einfach mit CSS in Mauerwerk -ähnlichen Spalten organisiert werden, indem sie in .card-columns. Karten werden zur einfacheren Ausrichtung mit CSS column-Eigenschaften anstelle von Flexbox erstellt. Die Karten sind von oben nach unten und von links nach rechts angeordnet.

Kopf hoch! Ihr Kilometerstand mit Kartenspalten kann variieren. Um zu verhindern, dass Karten über Spalten brechen, müssen wir sie auf setzen, display: inline-blockda column-break-inside: avoiddies noch keine kugelsichere Lösung ist.

Kartentitel, der in eine neue Zeile umbricht

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist

Kartentitel

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

Zuletzt aktualisiert vor 3 Minuten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Jemand, der in Source Title berühmt ist

Kartentitel

Diese Karte hat einen normalen Titel und einen kurzen Textabsatz darunter.

Zuletzt aktualisiert vor 3 Minuten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist

Kartentitel

Dies ist eine weitere Karte mit Titel und unterstützendem Text unten. Diese Karte hat einige zusätzliche Inhalte, um sie insgesamt etwas größer zu machen.

Zuletzt aktualisiert vor 3 Minuten

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</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>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kartenspalten können auch erweitert und mit einigen zusätzlichen Codes angepasst werden. Unten sehen Sie eine Erweiterung der .card-columnsKlasse, die das gleiche CSS verwendet, das wir verwenden – CSS-Spalten –, um eine Reihe von reaktionsfähigen Ebenen zum Ändern der Anzahl der Spalten zu generieren.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}