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 .

100%x180
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 class="card-img-top" src="..." 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 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 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.

Kapica slike [100%x180]

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

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

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.

Kapica slike [100%x180]
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
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." 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>

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

100%x180
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

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

100%x270
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 class="card-img" src="..." 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 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.

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

100%x180
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

100%x180
Naslov kartice

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

Zadnji put ažurirano prije 3 minute

100%x180
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 class="card-img-top" src="..." 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="..." 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="..." 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 će se sadržaj automatski poredati.

100%x180
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.

100%x180
Naslov kartice

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

100%x180
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.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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 set kartica jednake širine i visine koje nisu spojene jedna na drugu? Koristite špilove karata.

100%x200
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

100%x200
Naslov kartice

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

Zadnji put ažurirano prije 3 minute

100%x200
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 class="card-img-top" src="..." 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="..." 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="..." 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 špilovima automatski će se poredati.

100%x180
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.

100%x180
Naslov kartice

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

100%x180
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.

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

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.

100%x160
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
100%x160
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 popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.

Zadnji put ažurirano prije 3 minute

100%x260

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

Netko poznat u naslovu izvora
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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 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" src="..." 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 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>

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