Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check
in English

Karte

Bootstrap kartice pružaju fleksibilan i proširiv kontejner sadržaja sa više varijanti i opcija.

Na ovoj stranici

O

Kartica je fleksibilan i proširiv kontejner sadržaja . Uključuje opcije za zaglavlja i podnožja, širok izbor sadržaja, kontekstualne boje pozadine i moćne opcije prikaza. Ako ste upoznati sa Bootstrapom 3, kartice zamjenjuju naše stare panele, bunare i sličice. Slična funkcionalnost ovim komponentama dostupna je kao modifikatorske klase za kartice.

Primjer

Kartice su napravljene sa što manje oznaka i stilova, ali ipak uspijevaju pružiti tonu kontrole i prilagođavanja. Napravljeni sa flexboxom, nude lako poravnavanje i dobro se mešaju sa drugim Bootstrap komponentama. Nemaju ih prema zadanim postavkama, pa po potrebi marginkoristite uslužne programe za razmak .

Ispod je primjer osnovne kartice s mješovitim sadržajem i fiksnom širinom. Kartice nemaju fiksnu širinu za početak, tako da će prirodno ispuniti punu širinu svog nadređenog elementa. Ovo se lako prilagođava našim različitim opcijama veličine .

Placeholder Image cap
Naslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

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

Vrste sadržaja

Kartice podržavaju širok spektar sadržaja, uključujući slike, tekst, grupe lista, veze i još mnogo toga. Ispod su primjeri onoga što je podržano.

Tijelo

Građevinski blok kartice je .card-body. Koristite ga kad god vam zatreba podstavljeni dio unutar kartice.

Ovo je neki tekst unutar tijela kartice.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Naslovi, tekst i veze

Naslovi kartica se koriste dodavanjem .card-titleu <h*>oznaku. Na isti način, linkovi se dodaju i postavljaju jedan pored drugog dodavanjem .card-linku <a>oznaku.

Titlovi se koriste dodavanjem a .card-subtitleu <h*>oznaku. Ako su .card-titlei .card-subtitlestavke postavljene u .card-bodystavku, naslov kartice i podnaslov su lijepo usklađeni.

Naslov kartice
Podnaslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Link kartice Još jedan link
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Slike

.card-img-toppostavlja sliku na vrh kartice. Pomoću .card-text, na karticu se može dodati tekst. Tekst unutar .card-textse također može stilizirati standardnim HTML oznakama.

Placeholder Image cap

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

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

Lista grupa

Kreirajte liste sadržaja na kartici sa grupom liste za ispiranje.

  • Stavka
  • Druga stavka
  • Treća stavka
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Istaknuto
  • Stavka
  • Druga stavka
  • Treća stavka
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Stavka
  • Druga stavka
  • Treća stavka
Podnožje kartice
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Sudoper

Pomiješajte i uparite više vrsta sadržaja kako biste kreirali karticu koja vam je potrebna ili stavite sve tamo. Dolje su prikazani stilovi slika, blokovi, stilovi teksta i grupa liste—sve umotano u karticu fiksne širine.

Placeholder Image cap
Naslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

  • Stavka
  • Druga stavka
  • Treća stavka
Link kartice Još jedan link
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Dodajte opcionalno zaglavlje i/ili podnožje unutar kartice.

Istaknuto
Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

.card-headerZaglavlja kartica mogu se stilizirati dodavanjem <h*>elementima.

Istaknuto
Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

Dobro poznati citat, sadržan u elementu blok citata.

Neko poznat u naslovu izvora
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Istaknuto
Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

Određivanje veličine

Kartice pretpostavljaju da nema specifičnosti widthza početak, tako da će biti 100% široke osim ako nije drugačije navedeno. Ovo možete promijeniti po potrebi pomoću prilagođenog CSS-a, grid klasa, grid Sass miksina ili uslužnih programa.

Korištenje mrežnih oznaka

Koristeći mrežu, omotajte kartice u kolone i redove po potrebi.

Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

Idi negde
Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

Korištenje uslužnih programa

Koristite naš pregršt dostupnih alata za određivanje veličine da brzo postavite širinu kartice.

Naslov kartice

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

Dugme
Naslov kartice

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

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

Korištenje prilagođenog CSS-a

Koristite prilagođeni CSS u vašim stilovima ili kao ugrađene stilove da postavite širinu.

Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

Poravnanje teksta

Možete brzo promijeniti poravnanje teksta na bilo kojoj kartici – u cijelosti ili određenim dijelovima – pomoću naših klasa za poravnavanje teksta .

Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

Idi negde
Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

Idi negde
Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

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

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

Dodajte malo navigacije u zaglavlje (ili blok) kartice s Bootstrap-ovim navigacijskim komponentama .

Poseban naslovni tretman

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

S pratećim tekstom ispod kao prirodnim uvodom u dodatni sadržaj.

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

Slike

Kartice uključuju nekoliko opcija za rad sa slikama. Birajte između dodavanja “kapa slika” na oba kraja kartice, preklapanja slika sa sadržajem kartice ili jednostavnog ugrađivanja slike u karticu.

Image caps

Slično kao zaglavlja i podnožja, kartice mogu uključivati ​​gornje i donje „kape slika“—slike na vrhu ili dnu kartice.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Posljednji put ažurirano prije 3 minute

Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Posljednji put ažurirano prije 3 minute

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

Prekrivanja slika

Pretvorite sliku u pozadinu kartice i prekrijte tekst kartice. Ovisno o slici, možda će vam trebati ili ne moraju biti dodatni stilovi ili uslužni programi.

Placeholder Card image
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Posljednji put ažurirano prije 3 minute

html 
<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Imajte na umu da sadržaj ne bi trebao biti veći od visine slike. Ako je sadržaj veći od slike, sadržaj će biti prikazan izvan slike.

Horizontalno

Koristeći kombinaciju grid i utility klasa, kartice se mogu napraviti horizontalno na način koji je prilagođen mobilnim uređajima i prilagodljiv. U primjeru ispod, uklanjamo rešetkaste oluke sa .g-0i koristimo .col-md-*klase da bismo karticu učinili horizontalnom na mdtački prekida. Možda će biti potrebna dodatna podešavanja u zavisnosti od sadržaja vaše kartice.

Placeholder Image
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Posljednji put ažurirano prije 3 minute

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

Stilovi kartica

Kartice uključuju različite opcije za prilagođavanje njihove pozadine, obruba i boje.

Pozadina i boja

Dodato u v5.2.0

Postavite a background-colorsa kontrastnim prvim planom colorsa našim .text-bg-{color}pomagačima . Ranije je bilo potrebno ručno upariti svoj izbor .text-{color}i .bg-{color}uslužne programe za oblikovanje, koje još uvijek možete koristiti ako želite.

Zaglavlje
Naslov primarne kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov sekundarne kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov kartice uspjeha

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naziv kartice opasnosti

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov kartice upozorenja

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov info kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Lagani naslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Tamni naslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

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

Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .visually-hiddenklasom.

Granica

Koristite granične uslužne programe da promijenite samo border-colorkarticu. Imajte na umu da možete staviti .text-{color}klase na roditelj .cardili podskup sadržaja kartice kao što je prikazano ispod.

Zaglavlje
Naslov primarne kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov sekundarne kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov kartice uspjeha

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naziv kartice opasnosti

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov kartice upozorenja

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Naslov info kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Lagani naslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

Zaglavlje
Tamni naslov kartice

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

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

Mixins utilities

Također možete promijeniti ivice na zaglavlju i podnožju kartice po potrebi, pa čak i ukloniti ih background-colorpomoću .bg-transparent.

Zaglavlje
Naslov kartice uspjeha

Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.

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

Izgled kartice

Osim stiliziranja sadržaja unutar kartica, Bootstrap uključuje nekoliko opcija za postavljanje serije kartica. Za sada, ove opcije izgleda još ne odgovaraju .

Grupe kartica

Koristite grupe kartica da prikažete kartice kao jedan, pričvršćeni element sa kolonama jednake širine i visine. Grupe kartica počinju naslagane i koriste display: flex;se za spajanje sa ujednačenim dimenzijama počevši od smtačke prekida.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Posljednji put ažurirano prije 3 minute

Placeholder Image cap
Naslov kartice

Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.

Posljednji put ažurirano prije 3 minute

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.

Posljednji put ažurirano prije 3 minute

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

Kada koristite grupe kartica s podnožjima, njihov sadržaj će se automatski poravnati.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Posljednji put ažurirano prije 3 minute
Placeholder Image cap
Naslov kartice

Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.

Posljednji put ažurirano prije 3 minute
Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.

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

Mrežne kartice

Koristite Bootstrap sistem mreže i njegove .row-colsklase da kontrolišete koliko kolona mreže (umotanih oko vaših kartica) prikazujete po redu. Na primjer, ovdje je .row-cols-1polaganje kartica na jednu kolonu i .row-cols-md-2dijeljenje četiri kartice na jednaku širinu u više redova, od srednje tačke prekida nagore.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Promijenite ga u .row-cols-3i vidjet ćete četvrti omot kartice.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Kada vam treba jednaka visina, dodajte .h-100na karte. Ako želite jednake visine prema zadanim postavkama, možete postaviti $card-height: 100%u Sass.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Placeholder Image cap
Naslov kartice

Ovo je kratka kartica.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Baš kao i kod grupa kartica, podnožja kartica će se automatski poredati.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.

Posljednji put ažurirano prije 3 minute
Placeholder Image cap
Naslov kartice

Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.

Posljednji put ažurirano prije 3 minute
Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.

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

Zidanje

Koristili v4smo tehniku ​​samo za CSS da oponašamo ponašanje stubova sličnih zidanju , ali ova tehnika je imala mnogo neugodnih nuspojava . Ako želite da imate ovu vrstu izgleda u v5, možete jednostavno koristiti dodatak Masonry. Masonry nije uključen u Bootstrap , ali smo napravili demo primjer koji će vam pomoći da počnete.

CSS

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, kartice sada koriste lokalne CSS varijable .cardza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

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

Sass varijable

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