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 .

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

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.

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

Zaglavlje i podnožje

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

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

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

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.

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.

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

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

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

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

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

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

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

Naslov kartice

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

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

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

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

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

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

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

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

Kartice

Oko

Primjer

Naslov kartice

Vrste sadržaja

Tijelo

Naslovi, tekst i veze

Naslov kartice

Podnaslov kartice

Slike

Popis grupa

Kuhinjski sudoper

Naslov kartice

Zaglavlje i podnožje

Poseban tretman naslova

Istaknuto

Poseban tretman naslova

Poseban tretman naslova

Dimenzioniranje

Korištenje mrežnog označavanja

Poseban tretman naslova

Poseban tretman naslova

Korištenje pomoćnih programa

Naslov kartice

Naslov kartice

Korištenje prilagođenog CSS-a

Poseban tretman naslova

Poravnanje teksta

Poseban tretman naslova

Poseban tretman naslova

Poseban tretman naslova

Navigacija

Poseban tretman naslova

Poseban tretman naslova

Slike

Kape slike

Naslov kartice

Naslov kartice

Slikovni slojevi

Naslov kartice

Stilovi karata

Pozadina i boja

Naslov primarne kartice

Naslov sekundarne kartice

Naslov kartice uspjeha

Naslov kartice opasnosti

Naslov kartice upozorenja

Naslov info kartice

Lagani naslov kartice

Naslov tamne kartice

Prenošenje značenja pomoćnim tehnologijama

Granica

Naslov primarne kartice

Naslov sekundarne kartice

Naslov kartice uspjeha

Naslov kartice opasnosti

Naslov kartice upozorenja

Naslov info kartice

Lagani naslov kartice

Naslov tamne kartice

Mixins pomoćni programi

Naslov kartice uspjeha

Izgled kartice

Grupe kartica

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Špilovi karata

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Naslov kartice

Stupci kartica

Naslov kartice koji se prelama u novi redak

Naslov kartice