Source

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 .

Placeholder Image cap
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 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. 
<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 dobro 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đe može stilizovati sa standardnim HTML oznakama.

Placeholder Image cap

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

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

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

Placeholder Image cap
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 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>

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

Istaknuto
Posebni 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
Posebni 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
Posebni 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 s prilagođenim CSS-om, grid klasama, grid Sass miksinama ili uslužnim programima.

Korištenje mrežnih oznaka

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

Posebni naslovni tretman

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

Idi negde
Posebni 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 uslužnih programa 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.

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

Posebni naslovni tretman

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

Idi negde
Posebni naslovni tretman

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

Idi negde
Posebni 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 .

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

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

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

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

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.

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

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

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

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

Špilovi karata

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

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.

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

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

Baš kao i kod grupa karata, podnožja karata u špilu ć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 
<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>

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

Placeholder Image cap
Naslov kartice koji se prelama 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
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

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

Placeholder Card image

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

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