Source

Kartice

Bootstrapove kartice pružaju fleksibilan i proširiv spremnik sadržaja s više varijanti i opcija.

Oko

Kartica je fleksibilan i proširiv spremnik sadržaja . Uključuje opcije za zaglavlja i podnožja, širok izbor sadržaja, kontekstualne pozadinske boje i moćne opcije prikaza. Ako ste upoznati s Bootstrapom 3, kartice zamjenjuju naše stare ploče, jame i sličice. Funkcionalnost slična tim komponentama dostupna je kao klase modifikatora za kartice.

Primjer

Kartice su izrađene sa što je moguće manje markupa i stilova, ali ipak uspijevaju pružiti tonu kontrole i prilagodbe. Izgrađeni s flexboxom, nude jednostavno usklađivanje i dobro se kombiniraju s drugim Bootstrap komponentama. Prema zadanim postavkama nemaju margin, pa prema potrebi koristite pomoćne programe za razmake .

Ispod je primjer osnovne kartice s mješovitim sadržajem i fiksne širine. Kartice nemaju fiksnu početnu širinu, pa će prirodno ispuniti punu širinu nadređenog elementa. To se lako prilagođava našim različitim opcijama veličine .

Placeholder Image cap
Naslov kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Ici negdje 
<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 izbor sadržaja, uključujući slike, tekst, grupe popisa, veze i još mnogo toga. Ispod su primjeri onoga što je podržano.

Tijelo

Gradivni blok kartice je .card-body. Koristite ga kad god trebate podstavljeni dio unutar kartice.

Ovo je 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 koriste se dodavanjem .card-titleu <h*>oznaku. Na isti način poveznice se dodaju i postavljaju jedna pored druge dodavanjem .card-linku <a>oznaku.

Podnaslovi se koriste dodavanjem .card-subtitlea <h*>oznaci. Ako su .card-titlei .card-subtitlestavke smještene u .card-bodystavku, naslov kartice i podnaslov su lijepo poravnati.

Naslov kartice
Podnaslov kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći 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.

Placeholder Image cap

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći 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>

Popis grupa

Stvorite popise sadržaja na kartici s grupom popisa za ispiranje.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum i eros
<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 i eros
<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>

Kuhinjski sudoper

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

Placeholder Image cap
Naslov kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum i eros
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 izborno zaglavlje i/ili podnožje unutar kartice.

Istaknuto
Poseban tretman naslova

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

Ici negdje 
<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*>elemenata.

Istaknuto
Poseban tretman naslova

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

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

Netko 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 tretman naslova

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

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

Dimenzioniranje

Kartice ne pretpostavljaju specifičan widthpočetak, tako da će biti 100% široke osim ako nije drugačije navedeno. To možete promijeniti prema potrebi pomoću prilagođenog CSS-a, klasa rešetki, grid Sass miksina ili uslužnih programa.

Korištenje mrežnog označavanja

Koristeći rešetku, zamotajte kartice u stupce i retke prema potrebi.

Poseban tretman naslova

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

Ici negdje
Poseban tretman naslova

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

Ici negdje 
<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 pomoćnih programa

Koristite našu pregršt dostupnih alata za određivanje veličine za brzo postavljanje širine kartice.

Naslov kartice

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

Dugme
Naslov kartice

S pratećim tekstom u nastavku 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 svojim listovima stilova ili kao ugrađene stilove za postavljanje širine.

Poseban tretman naslova

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

Ici negdje 
<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 bilo koje kartice—u cijelosti ili u određenim dijelovima—s našim klasama poravnanja teksta .

Poseban tretman naslova

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

Ici negdje
Poseban tretman naslova

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

Ici negdje
Poseban tretman naslova

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

Ici negdje 
<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 Bootstrapovim navigacijskim komponentama .

Poseban tretman naslova

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

Ici negdje 
<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>
Poseban tretman naslova

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

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

Kape slike

Slično zaglavljima i podnožjima, kartice mogu sadržavati gornje i donje "površine slika"—slike na vrhu ili dnu kartice.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

Zadnji put ažurirano prije 3 minute

Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Slikovni slojevi

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

Placeholder Card image
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

Zadnji 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 smije 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 rešetki i uslužnih klasa, kartice se mogu napraviti vodoravno na način koji je prilagođen mobilnim uređajima i responzivan. U donjem primjeru uklanjamo oluke rešetke s klasama .no-guttersi koristimo .col-md-*ih kako bismo karticu učinili vodoravnom na mdprijelomnoj točki. Možda će biti potrebne dodatne prilagodbe ovisno o sadržaju kartice.

Placeholder Image
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

Zadnji put ažurirano prije 3 minute

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

Stilovi karata

Kartice uključuju različite opcije za prilagodbu pozadine, obruba i boje.

Pozadina i boja

Koristite pomoćne programe za tekst i pozadinu za promjenu izgleda kartice.

Zaglavlje
Naslov primarne kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov sekundarne kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov kartice uspjeha

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov kartice opasnosti

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov kartice upozorenja

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov info kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Lagani naslov kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov tamne kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći 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 daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .sr-onlyklasom.

Granica

Upotrijebite granične pomoćne programe za promjenu samo border-colorkartice. Imajte na umu da možete staviti .text-{color}klase na roditelj .cardili podskup sadržaja kartice kao što je prikazano u nastavku.

Zaglavlje
Naslov primarne kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov sekundarne kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov kartice uspjeha

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov kartice opasnosti

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov kartice upozorenja

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov info kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Lagani naslov kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.

Zaglavlje
Naslov tamne kartice

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći 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 pomoćni programi

Također možete po potrebi promijeniti obrube zaglavlja i podnožja kartice, pa ih čak i ukloniti background-colorpomoću .bg-transparent.

Zaglavlje
Naslov kartice uspjeha

Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći 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 oblikovanja sadržaja unutar kartica, Bootstrap uključuje nekoliko opcija za postavljanje niza kartica. Za sada ove opcije izgleda još nisu responzivne .

Grupe kartica

Upotrijebite grupe kartica za prikaz kartica kao jednog, priloženog elementa sa stupcima jednake širine i visine. Grupe kartica koriste display: flex;se za postizanje jedinstvene veličine.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

Zadnji put ažurirano prije 3 minute

Placeholder Image cap
Naslov kartice

Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.

Zadnji put ažurirano prije 3 minute

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ova kartica ima čak i duži sadržaj od prve koja prikazuje radnju jednake visine.

Zadnji 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 će se sadržaj automatski poredati.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.

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

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ova kartica ima čak i duži sadržaj od prve koja prikazuje radnju jednake visine.

Zadnji 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 set kartica jednake širine i visine koje nisu spojene jedna na drugu? Koristite špilove karata.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

Zadnji put ažurirano prije 3 minute

Placeholder Image cap
Naslov kartice

Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.

Zadnji put ažurirano prije 3 minute

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ova kartica ima čak i duži sadržaj od prve koja prikazuje radnju jednake visine.

Zadnji 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 špilovima automatski će se poredati.

Placeholder Image cap
Naslov kartice

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.

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

Ovo je šira kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ova kartica ima čak i duži sadržaj od prve koja prikazuje radnju jednake visine.

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

Mrežne kartice

Upotrijebite Bootstrap sustav rešetki i njegove .row-colsklase za kontrolu broja stupaca mreže (omotanih oko vaših kartica) koje prikazujete po retku. Na primjer, ovdje .row-cols-1postavljamo karte u jedan stupac i .row-cols-md-2dijelimo četiri karte na jednaku širinu u više redaka, od srednje prijelomne točke prema gore.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom 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 u nastavku kao prirodnim uvodom 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 u nastavku kao prirodnim uvodom u dodatni sadržaj.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Promijenite ga u .row-cols-3i vidjet ćete omot četvrte karte.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom 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 u nastavku kao prirodnim uvodom 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 u nastavku kao prirodnim uvodom u dodatni sadržaj.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Kada trebate jednaku visinu, dodajte .h-100karticama. Ako želite jednake visine prema zadanim postavkama, možete postaviti $card-height: 100%u Sass-u.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

Placeholder Image cap
Naslov kartice

Ovo je kratka karta.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.

Placeholder Image cap
Naslov kartice

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Stupci kartica

Kartice se mogu organizirati u stupce poput Masonryja samo pomoću CSS-a tako da ih umotate u .card-columns. Kartice su izrađene s CSS columnsvojstvima umjesto flexboxa radi lakšeg usklađivanja. Karte su poredane od vrha prema dolje i slijeva na desno.

Glavu gore! Vaša kilometraža sa stupcima kartice može varirati. Kako bismo spriječili lomljenje kartica preko stupaca, moramo ih postaviti na display: inline-blockas column-break-inside: avoidjoš nije neprobojno rješenje.

Placeholder Image cap
Naslov kartice koji se prelama u novi redak

Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.

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

Netko poznat u naslovu izvora
Placeholder Image cap
Naslov kartice

Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.

Zadnji put ažurirano prije 3 minute

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

Netko poznat u naslovu izvora
Naslov kartice

Ova kartica ima običan naslov i kratki odlomak teksta ispod njega.

Zadnji put ažurirano prije 3 minute

Placeholder Card image

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

Netko poznat u naslovu izvora
Naslov kartice

Ovo je još jedna kartica s naslovom i popratnim tekstom ispod. Ova kartica ima dodatni sadržaj koji je čini malo višom u cjelini.

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

Stupci kartica također se mogu proširiti i prilagoditi nekim dodatnim kodom. Dolje je prikazano proširenje .card-columnsklase koje koristi isti CSS koji koristimo - CSS stupce - za generiranje skupa odgovarajućih razina za promjenu broja stupaca.

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