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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Vrste sadržaja
Kartice podržavaju širok izbor sadržaja, uključujući slike, tekst, grupe popisa, veze i još mnogo toga. Ispod su primjeri onoga što je podržano.
Tijelo
Gradivni blok kartice je .card-body
. Koristite ga kad god trebate podstavljeni dio unutar kartice.
<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-title
u <h*>
oznaku. Na isti način poveznice se dodaju i postavljaju jedna pored druge dodavanjem .card-link
u <a>
oznaku.
Podnaslovi se koriste dodavanjem .card-subtitle
a <h*>
oznaci. Ako su .card-title
i .card-subtitle
stavke smještene u .card-body
stavku, 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-top
postavlja sliku na vrh kartice. Pomoću .card-text
, na karticu se može dodati tekst. Tekst unutar .card-text
se 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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Popis grupa
Stvorite popise sadržaja na kartici s grupom popisa za ispiranje.
- Stvar
- Druga stavka
- Treća stavka
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Stvar
- Druga stavka
- Treća stavka
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Stvar
- Druga stavka
- Treća stavka
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</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.
- Stvar
- Druga stavka
- Treća stavka
<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">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</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.
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-header
Zaglavlja 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>
Dobro poznati citat, sadržan u elementu blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</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">
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 width
poč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 negdjePoseban 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.
<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 negdjePoseban tretman naslova
S pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Ici negdjePoseban 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>
Navigacija
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">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">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 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-bottom" alt="...">
</div>
Slikovni slojevi
Pretvorite sliku u pozadinu kartice i prekrijte tekst kartice. Ovisno o slici, možda će vam trebati ili neće trebati dodatni stilovi ili uslužni programi.
<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>
Horizontalno
Koristeći kombinaciju rešetki i uslužnih klasa, kartice se mogu napraviti vodoravno na način koji je prilagođen mobilnim uređajima i responzivan. U donjem primjeru uklanjamo oluke rešetke s klasama .no-gutters
i koristimo .col-md-*
ih kako bismo karticu učinili vodoravnom na md
prijelomnoj točki. Možda će biti potrebne dodatne prilagodbe ovisno o sadržaju 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
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Stilovi karata
Kartice uključuju različite opcije za prilagodbu pozadine, obruba i boje.
Pozadina i boja
Koristite pomoćne programe za tekst i pozadinu za promjenu izgleda kartice.
Naslov primarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov sekundarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice uspjeha
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice opasnosti
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice upozorenja
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov info kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Lagani naslov kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
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-only
klasom.
Granica
Upotrijebite granične pomoćne programe za promjenu samo border-color
kartice. Imajte na umu da možete staviti .text-{color}
klase na roditelj .card
ili podskup sadržaja kartice kao što je prikazano u nastavku.
Naslov primarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov sekundarne kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice uspjeha
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice opasnosti
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov kartice upozorenja
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Naslov info kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
Lagani naslov kartice
Nekoliko kratkih primjera teksta za nadogradnju naslova kartice i čineći većinu sadržaja kartice.
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-color
pomoću .bg-transparent
.
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 karata počinju složene i koriste display: flex;
se za spajanje s jednakim dimenzijama počevši od sm
točke prijeloma.
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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Kada koristite grupe kartica s podnožjima, njihov će se sadržaj automatski poredati.
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.
Naslov kartice
Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.
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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Špilovi karata
Trebate set kartica jednake širine i visine koje nisu spojene jedna na drugu? Koristite špilove karata.
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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Baš kao i kod grupa karata, podnožja karata u špilovima automatski će se poredati.
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.
Naslov kartice
Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.
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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Mrežne kartice
Upotrijebite Bootstrap sustav rešetki i njegove .row-cols
klase za kontrolu broja stupaca mreže (omotanih oko vaših kartica) koje prikazujete po retku. Na primjer, ovdje .row-cols-1
postavljamo karte u jedan stupac i .row-cols-md-2
dijelimo četiri karte na jednaku širinu u više redaka, od srednje prijelomne točke prema gore.
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.
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.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Promijenite ga u .row-cols-3
i vidjet ćete omot četvrte karte.
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.
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.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Kada trebate jednaku visinu, dodajte .h-100
karticama. 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 u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
Naslov kartice
Ovo je kratka karta.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj.
Naslov kartice
Ovo je duža kartica s pratećim tekstom u nastavku kao prirodnim uvodom u dodatni sadržaj. Ovaj sadržaj je malo duži.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Stupci kartica
Kartice se mogu organizirati u stupce poput Masonryja samo pomoću CSS-a tako da ih umotate u .card-columns
. Kartice su izrađene s CSS column
svojstvima 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-block
as column-break-inside: avoid
još 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.
Dobro poznati citat, sadržan u elementu blockquote.
Naslov kartice
Ova kartica ima popratni tekst u nastavku kao prirodni uvod u dodatni sadržaj.
Zadnji put ažurirano prije 3 minute
Dobro poznati citat, sadržan u elementu blockquote.
Naslov kartice
Ova kartica ima običan naslov i kratki odlomak teksta ispod njega.
Zadnji put ažurirano prije 3 minute
Dobro poznati citat, sadržan u elementu blockquote.
Naslov kartice
Ovo je još jedna kartica s naslovom i popratnim tekstom ispod. Ova kartica ima dodatni sadržaj koji je čini malo višom u cjelini.
Zadnji put ažurirano prije 3 minute
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Stupci kartica također se mogu proširiti i prilagoditi nekim dodatnim kodom. Dolje je prikazano proširenje .card-columns
klase 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;
}
}