Karte

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

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 .

Naslov kartice

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

Idi negde

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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>

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.

<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

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

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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 grupa

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum u erosu

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

Istaknuto

Cras justo odio
Dapibus ac facilisis in
Vestibulum u erosu

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

Sudoper

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

Naslov kartice

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum u erosu

Link kartice Još jedan link

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Zaglavlje i podnožje

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

<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

<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

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

Neko poznat u naslovu izvora

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

Istaknuto

Poseban naslovni tretman

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

Idi negde

prije 2 dana

<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

<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

<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

<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

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

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

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

Poseban naslovni tretman

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

Idi negde

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

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.

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

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>

Stilovi kartica

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

Pozadina i boja

Koristite tekstualne i pozadinske uslužne programe da promijenite izgled kartice.

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.

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

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

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.

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

Mixins utilities

Po potrebi možete promijeniti ivice na zaglavlju i podnožju kartice, 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

<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 koriste display: flex;za postizanje ujednačene veličine.

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

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

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. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.

Posljednji put ažurirano prije 3 minute

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

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

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

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

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. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.

Posljednji put ažurirano prije 3 minute

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Špilovi karata

Trebate li set kartica jednake širine i visine koje nisu pričvršćene jedna za drugu? Koristite špilove karata.

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.

Posljednji put ažurirano prije 3 minute

Naslov kartice

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

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. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.

Posljednji put ažurirano prije 3 minute

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

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

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

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

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. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.

Posljednji put ažurirano prije 3 minute

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Kolone za kartice

Kartice se mogu organizirati u kolone nalik na masoneriju sa samo CSS-om tako što ćete ih umotati u .card-columns. Kartice su napravljene sa CSS columnsvojstvima umjesto flexbox-a radi lakšeg poravnanja. Karte se poredaju odozgo prema dolje i slijeva nadesno.

Glavu gore! Vaša kilometraža sa kolonama kartice može varirati. Kako bismo spriječili da se kartice razbiju po kolonama, moramo ih postaviti na display: inline-blockkao što column-break-inside: avoidjoš nije neprobojno rješenje.

Naslov kartice koji prelazi u novi red

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

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

Neko poznat u naslovu izvora

Naslov kartice

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

Posljednji put ažurirano prije 3 minute

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

Neko poznat u naslovu izvora

Naslov kartice

Ova kartica ima pravilan naslov i kratak odlomak teksta ispod njega.

Posljednji put ažurirano prije 3 minute

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

Neko poznat u naslovu izvora

Naslov kartice

Ovo je još jedna kartica sa naslovom i pratećim tekstom ispod. Ova kartica ima neki dodatni sadržaj koji je čini malo višom u cjelini.

Posljednji put ažurirano prije 3 minute

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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>

Kolone kartice se također mogu proširiti i prilagoditi nekim dodatnim kodom. Dole je prikazano proširenje .card-columnsklase koje koristi isti CSS koji koristimo – CSS kolone – za generisanje skupa responzivnih nivoa za promenu broja kolona.

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

Karte

O

Primjer

Naslov kartice

Vrste sadržaja

Tijelo

Naslovi, tekst i veze

Naslov kartice

Podnaslov kartice

Slike

Lista grupa

Sudoper

Naslov kartice

Zaglavlje i podnožje

Poseban naslovni tretman

Istaknuto

Poseban naslovni tretman

Poseban naslovni tretman

Određivanje veličine

Korištenje mrežnih oznaka

Poseban naslovni tretman

Poseban naslovni tretman

Korištenje uslužnih programa

Naslov kartice

Naslov kartice

Korištenje prilagođenog CSS-a

Poseban naslovni tretman

Poravnanje teksta

Poseban naslovni tretman

Poseban naslovni tretman

Poseban naslovni tretman

Navigacija

Poseban naslovni tretman

Poseban naslovni tretman

Slike

Image caps

Naslov kartice

Naslov kartice

Prekrivanja slika

Naslov kartice

Stilovi kartica

Pozadina i boja

Naslov primarne kartice

Naslov sekundarne kartice

Naslov kartice uspjeha

Naziv kartice opasnosti

Naslov kartice upozorenja

Naslov info kartice

Lagani naslov kartice

Tamni naslov kartice

Prenošenje značenja pomoćnim tehnologijama

Granica

Naslov primarne kartice

Naslov sekundarne kartice

Naslov kartice uspjeha

Naziv kartice opasnosti

Naslov kartice upozorenja

Naslov info kartice

Lagani naslov kartice

Tamni naslov kartice

Mixins utilities

Naslov kartice uspjeha

Izgled kartice

Grupe kartica

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Špilovi karata

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Kolone za kartice

Naslov kartice koji prelazi u novi red

Naslov kartice