Kort
Bootstraps kort gir en fleksibel og utvidbar innholdsbeholder med flere varianter og alternativer.
Om
Et kort er en fleksibel og utvidbar innholdsbeholder. Den inkluderer alternativer for topp- og bunntekst, et bredt utvalg av innhold, kontekstuelle bakgrunnsfarger og kraftige visningsalternativer. Hvis du er kjent med Bootstrap 3, erstatter kort våre gamle paneler, brønner og miniatyrbilder. Tilsvarende funksjonalitet som disse komponentene er tilgjengelig som modifikasjonsklasser for kort.
Eksempel
Kort er bygget med så lite markup og stiler som mulig, men klarer likevel å levere massevis av kontroll og tilpasning. Bygget med flexbox, tilbyr de enkel justering og blandes godt med andre Bootstrap-komponenter. De har ingen marginsom standard, så bruk avstandsverktøy etter behov.
Nedenfor er et eksempel på et basiskort med blandet innhold og fast bredde. Kortene har ingen fast bredde for å starte, så de vil naturligvis fylle hele bredden av det overordnede elementet. Dette kan enkelt tilpasses med våre forskjellige størrelsesalternativer .
Korttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Gå et sted<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>Innholdstyper
Kort støtter et bredt spekter av innhold, inkludert bilder, tekst, listegrupper, lenker og mer. Nedenfor er eksempler på hva som støttes.
Kropp
Byggesteinen til et kort er .card-body. Bruk den når du trenger en polstret seksjon i et kort.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Titler, tekst og lenker
Korttitler brukes ved å legge .card-titletil en <h*>tag. På samme måte legges lenker til og plasseres ved siden av hverandre ved å legge .card-linktil en <a>tag.
Undertekster brukes ved å legge til en .card-subtitlei en <h*>tag. Hvis elementene .card-titleog .card-subtitleer plassert i et .card-bodyelement, er kortets tittel og undertittel pent på linje.
Korttittel
Kort undertekst
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Kortlenke En annen lenke<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>Bilder
.card-img-topplasserer et bilde øverst på kortet. Med .card-textkan tekst legges til kortet. Tekst innenfor .card-textkan også styles med standard HTML-tagger.
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
<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>List grupper
Lag lister over innhold på et kort med en flush-listegruppe.
- Cras justo odio
- Dapibus ac facilisis i
- Vestibulum ved 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>- Cras justo odio
- Dapibus ac facilisis i
- Vestibulum ved 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>- Cras justo odio
- Dapibus ac facilisis i
- Vestibulum ved 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 class="card-footer">
Card footer
</div>
</div>Kjøkkenvask
Miks og match flere innholdstyper for å lage kortet du trenger, eller kast alt deri. Nedenfor vises bildestiler, blokker, tekststiler og en listegruppe – alt pakket inn i et kort med fast bredde.
Korttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
- Cras justo odio
- Dapibus ac facilisis i
- Vestibulum ved eros
<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>Topptekst og bunntekst
Legg til en valgfri topp- og/eller bunntekst på et kort.
Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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>Kortoverskrifter kan styles ved å legge .card-headertil <h*>elementer.
Utvalgte
Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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. Heltall posuere erat en 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>Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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>Dimensjonering
Kortene forutsetter ingen spesifikk widthstart, så de vil være 100 % brede med mindre annet er oppgitt. Du kan endre dette etter behov med tilpasset CSS, grid-klasser, grid Sass-mikser eller verktøy.
Bruker rutenettmarkering
Bruk rutenettet, pakk kortene inn i kolonner og rader etter behov.
Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et stedSpesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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>Bruke verktøy
Bruk vår håndfull tilgjengelige størrelsesverktøy for raskt å angi bredden til et kort.
<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>Bruker tilpasset CSS
Bruk tilpasset CSS i stilarkene dine eller som innebygde stiler for å angi en bredde.
Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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>Tekstjustering
Du kan raskt endre tekstjusteringen til ethvert kort – i sin helhet eller spesifikke deler – med våre tekstjusteringsklasser .
Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et stedSpesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et stedSpesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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>Navigasjon
Legg til litt navigering til et korts overskrift (eller blokk) med Bootstraps nav-komponenter .
Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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>Spesiell tittelbehandling
Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Gå et sted<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>Bilder
Kort inneholder noen få alternativer for å jobbe med bilder. Velg mellom å legge til "bildekapsler" i hver ende av et kort, overlegge bilder med kortinnhold, eller bare legge inn bildet i et kort.
Bildekapsler
I likhet med topptekster og bunntekster kan kort inneholde topp og bunn "bildekapsler" - bilder øverst eller nederst på et kort.
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Sist oppdatert for 3 minutter siden
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Sist oppdatert for 3 minutter siden
<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>Bildeoverlegg
Gjør et bilde til en kortbakgrunn og overlegg kortets tekst. Avhengig av bildet kan det hende du trenger flere stiler eller verktøy.
<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>Merk at innholdet ikke skal være større enn høyden på bildet. Hvis innholdet er større enn bildet, vil innholdet vises utenfor bildet.
Horisontal
Ved å bruke en kombinasjon av rutenett og bruksklasser kan kort gjøres horisontale på en mobilvennlig og responsiv måte. I eksemplet under fjerner vi grid-rennene med .no-guttersog bruker .col-md-*klasser for å gjøre kortet horisontalt ved mdbruddpunktet. Ytterligere justeringer kan være nødvendig avhengig av innholdet på kortet ditt.
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Sist oppdatert for 3 minutter siden
<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>Kortstiler
Kortene inneholder ulike alternativer for å tilpasse bakgrunn, kantlinjer og farge.
Bakgrunn og farge
Bruk tekst- og bakgrunnsverktøy for å endre utseendet til et kort.
Primærkorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Sekundærkorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Tittel på suksesskortet
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Tittel på farekort
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Advarselskorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Infokorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Lyskorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Mørk korttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
<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>Formidle mening til hjelpeteknologier
Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.
Grense
Bruk grenseverktøy for å endre bare på border-coloret kort. Merk at du kan legge .text-{color}klasser på forelderen .cardeller en undergruppe av kortets innhold som vist nedenfor.
Primærkorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Sekundærkorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Tittel på suksesskortet
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Tittel på farekort
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Advarselskorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Infokorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Lyskorttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
Mørk korttittel
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
<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-verktøy
Du kan også endre grensene på kortets topp- og bunntekst etter behov, og til og med fjerne dem background-colormed .bg-transparent.
Tittel på suksesskortet
Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.
<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>Kortoppsett
I tillegg til å style innholdet på kort, inkluderer Bootstrap noen få alternativer for å legge ut serier med kort. Foreløpig er disse layoutalternativene ennå ikke responsive .
Kortgrupper
Bruk kortgrupper til å gjengi kort som et enkelt, festet element med samme bredde og høyde kolonner. Kortgrupper starter stablet og bruker display: flex;til å bli festet med ensartede dimensjoner som starter ved smbruddpunktet.
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Sist oppdatert for 3 minutter siden
Korttittel
Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Sist oppdatert for 3 minutter siden
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.
Sist oppdatert for 3 minutter siden
<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>Når du bruker kortgrupper med bunntekst, vil innholdet deres automatisk stilles opp.
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Korttittel
Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.
<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>Kortstokker
Trenger du et sett med like bredde- og høydekort som ikke er festet til hverandre? Bruk kortstokker.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Sist oppdatert for 3 minutter siden
Korttittel
Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Sist oppdatert for 3 minutter siden
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.
Sist oppdatert for 3 minutter siden
<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>Akkurat som med kortgrupper, vil kortbunntekster i kortstokker automatisk stå på linje.
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Korttittel
Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Korttittel
Dette er et bredere kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette kortet har enda lengre innhold enn det første som viser den samme høyden.
<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>Rutenettkort
Bruk Bootstrap-rutenettsystemet og dets .row-colsklasser for å kontrollere hvor mange rutenettkolonner (viklet rundt kortene dine) du viser per rad. For eksempel, her .row-cols-1legger du ut kortene på én kolonne, og .row-cols-md-2deler fire kort til lik bredde over flere rader, fra middels brytepunkt og opp.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
<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>Endre den til .row-cols-3og du vil se det fjerde kortet.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
<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>Når du trenger lik høyde, legg .h-100til kortene. Hvis du vil ha like høyder som standard, kan du stille $card-height: 100%inn i Sass.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Korttittel
Dette er et kort kort.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Korttittel
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
<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>Kortkolonner
Kort kan organiseres i Masonry -lignende kolonner med bare CSS ved å pakke dem inn .card-columns. Kort er bygget med CSS column-egenskaper i stedet for flexbox for enklere justering. Kortene er sortert fra topp til bunn og venstre til høyre.
Vær oppmerksom! Kilometerstanden din med kortkolonner kan variere. For å forhindre at kort brytes på tvers av kolonner, må vi angi at de ikke display: inline-blocker column-break-inside: avoiden skuddsikker løsning ennå.
Korttittel som omsluttes til en ny linje
Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Korttittel
Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.
Sist oppdatert for 3 minutter siden
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat.
Korttittel
Dette kortet har en vanlig tittel og et kort avsnitt med tekst under.
Sist oppdatert for 3 minutter siden
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Korttittel
Dette er nok et kort med tittel og støttetekst nedenfor. Dette kortet har noe ekstra innhold for å gjøre det litt høyere totalt sett.
Sist oppdatert for 3 minutter siden
<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>Kortkolonner kan også utvides og tilpasses med litt tilleggskode. Nedenfor vises en utvidelse av .card-columnsklassen som bruker den samme CSS-en vi bruker – CSS-kolonner – for å generere et sett med responsive nivåer for å endre antall kolonner.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}