Karte
Bootstrap kartice pružaju fleksibilan i proširiv kontejner sadržaja sa više varijanti i opcija.
O
Kartica je fleksibilan i proširiv kontejner sadržaja . Uključuje opcije za zaglavlja i podnožja, širok izbor sadržaja, kontekstualne boje pozadine i moćne opcije prikaza. Ako ste upoznati sa Bootstrapom 3, kartice zamjenjuju naše stare panele, bunare i sličice. Slična funkcionalnost ovim komponentama dostupna je kao modifikatorske klase za kartice.
Primjer
Kartice su napravljene sa što manje oznaka i stilova, ali ipak uspijevaju pružiti tonu kontrole i prilagođavanja. Napravljeni sa flexboxom, nude lako poravnavanje i dobro se mešaju sa drugim Bootstrap komponentama. Nemaju ih prema zadanim postavkama, pa po potrebi marginkoristite uslužne programe za razmak .
Ispod je primjer osnovne kartice s mješovitim sadržajem i fiksnom širinom. Kartice nemaju fiksnu širinu za početak, tako da će prirodno ispuniti punu širinu svog nadređenog elementa. Ovo se lako prilagođava našim različitim opcijama veličine .
Naslov kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Idi negde<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Vrste sadržaja
Kartice podržavaju širok spektar sadržaja, uključujući slike, tekst, grupe lista, veze i još mnogo toga. Ispod su primjeri onoga što je podržano.
Tijelo
Građevinski blok kartice je .card-body. Koristite ga kad god vam zatreba podstavljeni dio unutar kartice.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Naslovi, tekst i veze
Naslovi kartica se koriste dodavanjem .card-titleu <h*>oznaku. Na isti način, linkovi se dodaju i postavljaju jedan pored drugog dodavanjem .card-linku <a>oznaku.
Titlovi se koriste dodavanjem a .card-subtitleu <h*>oznaku. Ako su .card-titlei .card-subtitlestavke postavljene u .card-bodystavku, naslov kartice i podnaslov su dobro usklađeni.
Naslov kartice
Podnaslov kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Link kartice Još jedan link<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Slike
.card-img-toppostavlja sliku na vrh kartice. Pomoću .card-text, na karticu se može dodati tekst. Tekst unutar .card-textse takođe može stilizovati sa standardnim HTML oznakama.
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Lista grupa
Kreirajte liste sadržaja na kartici sa grupom liste za ispiranje.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum u erosu
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum u erosu
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Sudoper
Pomiješajte i uparite više vrsta sadržaja kako biste kreirali karticu koja vam je potrebna ili stavite sve tamo. U nastavku su prikazani stilovi slika, blokovi, stilovi teksta i grupa liste—sve umotano u karticu fiksne širine.
Naslov kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum u erosu
<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>Zaglavlje i podnožje
Dodajte opcionalno zaglavlje i/ili podnožje unutar kartice.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>.card-headerZaglavlja kartica mogu se stilizirati dodavanjem <h*>elementima.
Istaknuto
<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<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><div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>Određivanje veličine
Kartice pretpostavljaju da nema specifičnosti widthza početak, tako da će biti 100% široke osim ako nije drugačije navedeno. Ovo možete promijeniti po potrebi s prilagođenim CSS-om, grid klasama, grid Sass miksinama ili uslužnim programima.
Korištenje mrežnih oznaka
Koristeći mrežu, omotajte kartice u kolone i redove po potrebi.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Korištenje uslužnih programa
Koristite naš pregršt dostupnih uslužnih programa za određivanje veličine da brzo postavite širinu kartice.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Korištenje prilagođenog CSS-a
Koristite prilagođeni CSS u vašim stilovima ili kao ugrađene stilove da postavite širinu.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Poravnanje teksta
Možete brzo promijeniti poravnanje teksta na bilo kojoj kartici – u cijelosti ili određenim dijelovima – pomoću naših klasa za poravnavanje teksta .
<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>Navigacija
Dodajte malo navigacije u zaglavlje (ili blok) kartice s Bootstrap-ovim navigacijskim komponentama .
<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><div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Slike
Kartice uključuju nekoliko opcija za rad sa slikama. Birajte između dodavanja “kapa slika” na oba kraja kartice, preklapanja slika sa sadržajem kartice ili jednostavnog ugrađivanja slike u karticu.
Image caps
Slično kao zaglavlja i podnožja, kartice mogu uključivati gornje i donje „kape slika“—slike na vrhu ili dnu kartice.
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Posljednji put ažurirano prije 3 minute
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Posljednji put ažurirano prije 3 minute
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-top" alt="...">
</div>Prekrivanja slika
Pretvorite sliku u pozadinu kartice i prekrijte tekst kartice. Ovisno o slici, možda će vam trebati ili ne moraju biti dodatni stilovi ili uslužni programi.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>Imajte na umu da sadržaj ne bi trebao biti veći od visine slike. Ako je sadržaj veći od slike, sadržaj će biti prikazan izvan slike.
Horizontalno
Koristeći kombinaciju grid i uslužnih klasa, kartice se mogu napraviti horizontalno na način prilagođen mobilnim uređajima i prilagodljiv. U donjem primjeru uklanjamo rešetkaste oluke sa .no-guttersi koristimo .col-md-*klase da bismo karticu učinili horizontalnom na mdtački prekida. Možda će biti potrebna dodatna podešavanja u zavisnosti od sadržaja vaše kartice.
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Posljednji put ažurirano prije 3 minute
<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 kartica
Kartice uključuju različite opcije za prilagođavanje njihove pozadine, obruba i boje.
Pozadina i boja
Koristite tekstualne i pozadinske uslužne programe da promijenite izgled kartice.
Naslov primarne kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov sekundarne kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov kartice uspjeha
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naziv kartice opasnosti
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov kartice upozorenja
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov info kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Lagani naslov kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Tamni naslov kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Prenošenje značenja pomoćnim tehnologijama
Korištenje boje za dodavanje značenja pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .sr-onlyklasom.
Granica
Koristite granične uslužne programe da promijenite samo border-colorkarticu. Imajte na umu da možete staviti .text-{color}klase na roditelj .cardili podskup sadržaja kartice kao što je prikazano ispod.
Naslov primarne kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov sekundarne kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov kartice uspjeha
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naziv kartice opasnosti
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov kartice upozorenja
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Naslov info kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Lagani naslov kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
Tamni naslov kartice
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti većinu sadržaja kartice.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Mixins utilities
Također možete promijeniti ivice na zaglavlju i podnožju kartice po potrebi, pa čak i ukloniti ih background-colorpomoću .bg-transparent.
Naslov kartice uspjeha
Neki brzi primjer teksta koji treba nadograditi na naslov kartice i činiti 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 stiliziranja sadržaja unutar kartica, Bootstrap uključuje nekoliko opcija za postavljanje serije kartica. Za sada, ove opcije izgleda još ne odgovaraju .
Grupe kartica
Koristite grupe kartica da prikažete kartice kao jedan, pričvršćeni element sa kolonama jednake širine i visine. Grupe kartica koriste display: flex;za postizanje ujednačene veličine.
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Posljednji put ažurirano prije 3 minute
Naslov kartice
Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.
Posljednji put ažurirano prije 3 minute
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.
Posljednji put ažurirano prije 3 minute
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Kada koristite grupe kartica s podnožjima, njihov sadržaj će se automatski poravnati.
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Špilovi karata
Trebate li set kartica jednake širine i visine koje nisu pričvršćene jedna za drugu? Koristite špilove karata.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Posljednji put ažurirano prije 3 minute
Naslov kartice
Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.
Posljednji put ažurirano prije 3 minute
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.
Posljednji put ažurirano prije 3 minute
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Baš kao i kod grupa karata, podnožja karata u špilu će se automatski poredati.
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.
Naslov kartice
Ovo je šira kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ova kartica ima čak duži sadržaj od prve koja pokazuje akciju jednake visine.
<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
Koristite Bootstrap sistem mreže i njegove .row-colsklase da kontrolišete koliko kolona mreže (umotanih oko vaših kartica) prikazujete po redu. Na primjer, ovdje je .row-cols-1polaganje kartica na jednu kolonu i .row-cols-md-2dijeljenje četiri kartice na jednaku širinu u više redova, od srednje tačke prekida nagore.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
<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 četvrti omot kartice.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
<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 vam treba jednaka visina, dodajte .h-100na karte. Ako želite jednake visine prema zadanim postavkama, možete postaviti $card-height: 100%u Sass-u.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je kratka kartica.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
<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>Kolone kartice
Kartice se mogu organizirati u kolone nalik na masoneriju sa samo CSS-om tako što ćete ih umotati u .card-columns. Kartice su napravljene sa CSS columnsvojstvima umjesto flexbox-a radi lakšeg poravnanja. Karte se poredaju odozgo prema dolje i slijeva nadesno.
Glavu gore! Vaša kilometraža sa kolonama kartice može varirati. Kako bismo spriječili da se kartice razbiju po kolonama, moramo ih postaviti na display: inline-blockkao što column-break-inside: avoidjoš nije neprobojno rješenje.
Naslov kartice koji se prelama u novi red
Ovo je duža kartica s pratećim tekstom ispod kao prirodni uvod u dodatni sadržaj. Ovaj sadržaj je malo duži.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Naslov kartice
Ova kartica ima prateći tekst ispod kao prirodni uvod u dodatni sadržaj.
Posljednji put ažurirano prije 3 minute
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Naslov kartice
Ova kartica ima pravilan naslov i kratak odlomak teksta ispod njega.
Posljednji put ažurirano prije 3 minute
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Naslov kartice
Ovo je još jedna kartica sa naslovom i pratećim tekstom ispod. Ova kartica ima neki dodatni sadržaj koji je čini malo višom u cjelini.
Posljednji put ažurirano prije 3 minute
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Kolone kartice se također mogu proširiti i prilagoditi nekim dodatnim kodom. Dole je prikazano proširenje .card-columnsklase koje koristi isti CSS koji koristimo – CSS kolone – za generisanje skupa responzivnih nivoa za promenu broja kolona.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}