Source

Karty

Karty Bootstrap zapewniają elastyczny i rozszerzalny kontener zawartości z wieloma wariantami i opcjami.

O

Karta to elastyczny i rozszerzalny pojemnik na zawartość . Zawiera opcje nagłówków i stopek, szeroką gamę treści, kontekstowe kolory tła i zaawansowane opcje wyświetlania. Jeśli znasz Bootstrap 3, karty zastępują nasze stare panele, zagłębienia i miniatury. Podobna funkcjonalność do tych komponentów jest dostępna jako klasy modyfikujące dla kart.

Przykład

Karty są zbudowane z jak najmniejszą ilością znaczników i stylów, ale nadal zapewniają mnóstwo kontroli i dostosowywania. Zbudowane z flexboxem, zapewniają łatwe dopasowanie i dobrze łączą się z innymi komponentami Bootstrap. marginDomyślnie nie mają , więc w razie potrzeby użyj narzędzi do rozmieszczania .

Poniżej znajduje się przykład karty podstawowej o mieszanej zawartości i stałej szerokości. Karty nie mają ustalonej szerokości na początku, więc naturalnie wypełniają całą szerokość elementu nadrzędnego. Można to łatwo dostosować dzięki naszym różnym opcjom rozmiarów .

100%x180
Tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

Iść gdzieś 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Rodzaje treści

Karty obsługują szeroką gamę treści, w tym obrazy, tekst, grupy list, linki i inne. Poniżej znajdują się przykłady obsługiwanych elementów.

Ciało

Elementem budulcowym karty jest .card-body. Użyj go, gdy potrzebujesz wyściełanej sekcji w karcie.

To jest tekst w treści karty. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Tytuły, tekst i linki

Tytuły kart są używane przez dodanie .card-titledo <h*>tagu. W ten sam sposób linki są dodawane i umieszczane obok siebie poprzez dodanie .card-linkdo <a>tagu.

Napisy są używane przez dodanie .card-subtitledo <h*>tagu. Jeśli elementy .card-titlei .card-subtitlesą umieszczone w .card-bodyelemencie, tytuł karty i podtytuł są dobrze wyrównane.

Tytuł karty
Podtytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

Link do karty Kolejny 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>

Obrazy

.card-img-topumieszcza obraz na górze karty. Dzięki .card-text, tekst może być dodany do karty. Tekst wewnątrz .card-textmoże być również stylizowany za pomocą standardowych znaczników HTML.

Limit obrazu [100% x 180]

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Lista grup

Twórz listy treści na karcie z grupą list opróżnianych.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Przedsionek w erosie
<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>
Wyróżniony
  • Cras justo odio
  • Dapibus ac facilisis in
  • Przedsionek w erosie
<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>

Zlew kuchenny

Mieszaj i dopasowuj różne rodzaje treści, aby utworzyć kartę, której potrzebujesz, lub wrzuć wszystko do niej. Poniżej pokazano style obrazów, bloki, style tekstu i grupę list — wszystko w karcie o stałej szerokości.

Limit obrazu [100% x 180]
Tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Przedsionek w erosie
Link do karty Kolejny link 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Dodaj opcjonalny nagłówek i/lub stopkę na karcie.

Wyróżniony
Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś 
<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>

Nagłówki kart mogą być stylizowane przez dodawanie .card-headerdo <h*>elementów.

Wyróżniony
Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś 
<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>
Cytat

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

Ktoś sławny w tytule źródła 
<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>
Wyróżniony
Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś
2 dni temu 
<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>

Rozmiary

Karty zakładają , że widthna początku nie są określone, więc będą miały 100% szerokości, chyba że zaznaczono inaczej. Możesz to zmienić w razie potrzeby za pomocą niestandardowego CSS, klas siatki, mixinów siatki Sass lub narzędzi.

Korzystanie ze znaczników siatki

Używając siatki, zawijaj karty w kolumny i rzędy zgodnie z potrzebami.

Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś
Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś 
<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>

Korzystanie z narzędzi

Skorzystaj z naszych kilku dostępnych narzędzi do zmiany rozmiaru , aby szybko ustawić szerokość karty.

Tytuł karty

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Przycisk
Tytuł karty

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

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

Korzystanie z niestandardowego CSS

Użyj niestandardowego CSS w swoich arkuszach stylów lub jako style wbudowane, aby ustawić szerokość.

Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś 
<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>

Wyrównanie tekstu

Możesz szybko zmienić wyrównanie tekstu dowolnej karty — w całości lub w określonych częściach — dzięki naszym klasom wyrównania tekstu .

Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś
Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś
Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś 
<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>

Dodaj nawigację do nagłówka (lub bloku) karty za pomocą komponentów nawigacji Bootstrap .

Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś 
<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="#">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>
Specjalne traktowanie tytułów

Z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści.

Iść gdzieś 
<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="#">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>

Obrazy

Karty zawierają kilka opcji pracy z obrazami. Wybieraj spośród dołączania „zakończeń obrazu” na obu końcach karty, nakładania obrazów z treścią karty lub po prostu osadzania obrazu na karcie.

Czapki z obrazkami

Podobnie jak w przypadku nagłówków i stopek, karty mogą zawierać górne i dolne „zakończenia obrazów” — obrazy na górze lub na dole karty.

100%x180
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.

Ostatnia aktualizacja 3 minuty temu

Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.

Ostatnia aktualizacja 3 minuty temu

100%x180 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

Nakładki graficzne

Zmień obraz w tło karty i nałóż na nią tekst. W zależności od obrazu możesz potrzebować dodatkowych stylów lub narzędzi.

100%x270
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.

Ostatnia aktualizacja 3 minuty temu

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

Style kart

Karty zawierają różne opcje dostosowywania tła, obramowania i koloru.

Tło i kolor

Użyj narzędzi tekstu i tła , aby zmienić wygląd karty.

nagłówek
Główny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Dodatkowy tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty sukcesu

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty zagrożenia

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty ostrzegawczej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty informacyjnej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Jasny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Ciemny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

<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>
Nadawanie znaczenia technologiom wspomagającym

Użycie koloru w celu dodania znaczenia zapewnia jedynie wizualne wskazanie, które nie zostanie przekazane użytkownikom technologii wspomagających – takich jak czytniki ekranu. Upewnij się, że informacje oznaczone kolorem są oczywiste z samej treści (np. widoczny tekst) lub są zawarte w alternatywnych środkach, takich jak dodatkowy tekst ukryty z .sr-onlyklasą.

Granica

Użyj narzędzi granicznych , aby zmienić tylko border-colorkartę. Pamiętaj, że możesz umieścić .text-{color}klasy na rodzicu .cardlub podzbiorze zawartości karty, jak pokazano poniżej.

nagłówek
Główny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Dodatkowy tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty sukcesu

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty zagrożenia

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty ostrzegawczej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Tytuł karty informacyjnej

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Jasny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

nagłówek
Ciemny tytuł karty

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

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

Narzędzia do mieszania

W razie potrzeby możesz także zmienić obramowanie nagłówka i stopki karty, a nawet usunąć je background-colorza pomocą .bg-transparent.

nagłówek
Tytuł karty sukcesu

Krótki przykładowy tekst do zbudowania na tytule karty i uzupełnienia większości treści karty.

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

Układ karty

Oprócz stylizowania treści w kartach, Bootstrap zawiera kilka opcji układania serii kart. Na razie te opcje układu nie są jeszcze responsywne .

Grupy kart

Użyj grup kart, aby renderować karty jako pojedynczy, dołączony element z kolumnami o równej szerokości i wysokości. Grupy kart stosują display: flex;do uzyskania jednolitego rozmiaru.

100%x180
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.

Ostatnia aktualizacja 3 minuty temu

100%x180
Tytuł karty

Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.

Ostatnia aktualizacja 3 minuty temu

100%x180
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.

Ostatnia aktualizacja 3 minuty temu

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

W przypadku korzystania z grup kart ze stopkami ich zawartość zostanie automatycznie wyrównana.

100%x180
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.

Ostatnia aktualizacja 3 minuty temu
100%x180
Tytuł karty

Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.

Ostatnia aktualizacja 3 minuty temu
100%x180
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.

Ostatnia aktualizacja 3 minuty temu 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Talie kart

Potrzebujesz zestawu kart o jednakowej szerokości i wysokości, które nie są ze sobą połączone? Używaj talii kart.

100%x200
Tytuł karty

Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.

Ostatnia aktualizacja 3 minuty temu

100%x200
Tytuł karty

Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.

Ostatnia aktualizacja 3 minuty temu

100%x200
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.

Ostatnia aktualizacja 3 minuty temu

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Podobnie jak w przypadku grup kart, stopki kart w taliach zostaną automatycznie wyrównane.

100%x180
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta treść jest trochę dłuższa.

Ostatnia aktualizacja 3 minuty temu
100%x180
Tytuł karty

Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.

Ostatnia aktualizacja 3 minuty temu
100%x180
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.

Ostatnia aktualizacja 3 minuty temu 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Kolumny kart

Karty można organizować w kolumny przypominające murarstwo za pomocą samego kodu CSS, pakując je w .card-columns. Karty są zbudowane z columnwłaściwościami CSS zamiast flexbox dla łatwiejszego wyrównania. Karty są uporządkowane od góry do dołu i od lewej do prawej.

Heads-up! Twój przebieg z kolumnami kart może się różnić. Aby zapobiec rozbijaniu kart przez kolumny, musimy je ustawić, display: inline-blockponieważ column-break-inside: avoidnie jest to jeszcze kuloodporne rozwiązanie.

100%x160
Tytuł karty, który zawija się do nowej linii

Jest to dłuższa karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowych treści. Ta treść jest trochę dłuższa.

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

Ktoś sławny w tytule źródła
100%x160
Tytuł karty

Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.

Ostatnia aktualizacja 3 minuty temu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat.

Ktoś sławny w tytule źródła
Tytuł karty

Ta karta zawiera tekst pomocniczy poniżej jako naturalny wstęp do dodatkowej zawartości.

Ostatnia aktualizacja 3 minuty temu

100%x260

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

Ktoś sławny w tytule źródła
Tytuł karty

Jest to szersza karta z tekstem pomocniczym poniżej jako naturalnym wprowadzeniem do dodatkowej zawartości. Ta karta ma jeszcze dłuższą zawartość niż pierwsza, która pokazuje tę samą akcję wysokości.

Ostatnia aktualizacja 3 minuty temu

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

Kolumny kart można również rozszerzyć i dostosować za pomocą dodatkowego kodu. Poniżej pokazano rozszerzenie .card-columnsklasy wykorzystujące ten sam CSS, którego używamy — kolumny CSS — do generowania zestawu responsywnych warstw do zmiany liczby kolumn.

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