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 .

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

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.

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

Lista grup

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

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.

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

Nagłówek i stopka

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. Liczba całkowita 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, owiń 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="#" 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>

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="#" 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>

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 nagłówki i stopki, karty mogą zawierać górne i dolne „zakończenia obrazów” — obrazy na górze lub na dole karty.

Tytuł karty

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

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

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.

Tytuł karty

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

Pamiętaj, że treść nie powinna być większa niż wysokość obrazu. Jeśli zawartość jest większa niż obraz, zawartość zostanie wyświetlona poza obrazem.

Poziomy

Wykorzystując kombinację klas siatki i użyteczności, karty mogą być poziome w sposób przyjazny dla urządzeń mobilnych i responsywny. W poniższym przykładzie usuwamy rynny siatki .no-guttersi używamy .col-md-*klas, aby ustawić kartę poziomo w punkcie mdprzerwania. W zależności od zawartości karty mogą być potrzebne dalsze korekty.

Tytuł karty

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

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 inny sposób, np. 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 zawartości kart, 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 o równych kolumnach szerokości i wysokości. Grupy kart stosują display: flex;do uzyskania jednolitego rozmiaru.

Tytuł karty

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

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

Ostatnia aktualizacja 3 minuty temu

Tytuł karty

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

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

Tytuł karty

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

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

Ostatnia aktualizacja 3 minuty temu

Tytuł karty

Ostatnia aktualizacja 3 minuty temu

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

Talie kart

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

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

Tytuł karty

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

Ostatnia aktualizacja 3 minuty temu

Tytuł karty

Ostatnia aktualizacja 3 minuty temu

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

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

Tytuł karty

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

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

Ostatnia aktualizacja 3 minuty temu

Tytuł karty

Ostatnia aktualizacja 3 minuty temu

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

Karty siatkowe

Użyj systemu siatek Bootstrap i jego .row-colsklas, aby kontrolować, ile kolumn siatki (owiniętych wokół twoich kart) wyświetlasz w rzędzie. Na przykład tutaj .row-cols-1układamy karty w jednej kolumnie i .row-cols-md-2dzielimy cztery karty na równą szerokość w wielu rzędach, od średniego punktu przerwania w górę.

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.

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.

Tytuł karty

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

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.

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

Zmień go na .row-cols-3, a zobaczysz czwarte opakowanie karty.

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.

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.

Tytuł karty

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

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.

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

Kiedy potrzebujesz równej wysokości, dodaj .h-100do kart. Jeśli chcesz domyślnie równe wysokości, możesz ustawić $card-height: 100%w Sass.

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.

Tytuł karty

To jest krótka karta.

Tytuł karty

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

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.

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

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 za pomocą CSScolumn wł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.

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. Liczba całkowita posuere erat ante.

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

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 ma normalny tytuł i krótki akapit tekstu poniżej.

Ostatnia aktualizacja 3 minuty temu

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

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

Tytuł karty

To kolejna karta z tytułem i tekstem pomocniczym poniżej. Ta karta ma dodatkową zawartość, dzięki czemu jest nieco wyższa.

Ostatnia aktualizacja 3 minuty temu

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

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

Karty

O

Przykład

Tytuł karty

Rodzaje treści

Ciało

Tytuły, tekst i linki

Tytuł karty

Podtytuł karty

Obrazy

Lista grup

Zlew kuchenny

Tytuł karty

Nagłówek i stopka

Specjalne traktowanie tytułów

Wyróżniony

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Rozmiary

Korzystanie ze znaczników siatki

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Korzystanie z narzędzi

Tytuł karty

Tytuł karty

Korzystanie z niestandardowego CSS

Specjalne traktowanie tytułów

Wyrównanie tekstu

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Nawigacja

Specjalne traktowanie tytułów

Specjalne traktowanie tytułów

Obrazy

Czapki z obrazkami

Tytuł karty

Tytuł karty

Nakładki graficzne

Tytuł karty

Poziomy

Tytuł karty

Style kart

Tło i kolor

Główny tytuł karty

Dodatkowy tytuł karty

Tytuł karty sukcesu

Tytuł karty zagrożenia

Tytuł karty ostrzegawczej

Tytuł karty informacyjnej

Jasny tytuł karty

Ciemny tytuł karty

Nadawanie znaczenia technologiom wspomagającym

Granica

Główny tytuł karty

Dodatkowy tytuł karty

Tytuł karty sukcesu

Tytuł karty zagrożenia

Tytuł karty ostrzegawczej

Tytuł karty informacyjnej

Jasny tytuł karty

Ciemny tytuł karty

Narzędzia do mieszania

Tytuł karty sukcesu

Układ karty

Grupy kart

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Talie kart

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Tytuł karty

Karty siatkowe