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 margin
som 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-title
til en <h*>
tag. På samme måte legges lenker til og plasseres ved siden av hverandre ved å legge .card-link
til en <a>
tag.
Undertekster brukes ved å legge til en .card-subtitle
i en <h*>
tag. Hvis elementene .card-title
og .card-subtitle
er plassert i et .card-body
element, 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-top
plasserer et bilde øverst på kortet. Med .card-text
kan tekst legges til kortet. Tekst innenfor .card-text
kan 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.
- En ting
- Et annet element
- Et tredje element
<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>
- En ting
- Et annet element
- Et tredje element
<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>
- En ting
- Et annet element
- Et tredje element
<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>
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.
- En ting
- Et annet element
- Et tredje element
<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>
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-header
til <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>
Et velkjent sitat, inneholdt i et blockquote-element.
<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>
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 width
start, 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-end" 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" aria-current="true" 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>
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 .g-0
og bruker .col-md-*
klasser for å gjøre kortet horisontalt ved md
bruddpunktet. 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 g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" 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 tekstfarge- 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-dark 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-dark 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 text-dark 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 .visually-hidden
klassen.
Grense
Bruk grenseverktøy for å endre bare på border-color
et kort. Merk at du kan legge .text-{color}
klasser på forelderen .card
eller 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">
<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">
<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-color
med .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 sm
bruddpunktet.
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>
Rutenettkort
Bruk Bootstrap-rutenettsystemet og dets .row-cols
klasser for å kontrollere hvor mange rutenettkolonner (viklet rundt kortene dine) du viser per rad. For eksempel, her .row-cols-1
legger du ut kortene på én kolonne, og .row-cols-md-2
deler fire kort til lik bredde over flere rader, fra middels bruddpunkt 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 g-4">
<div class="col">
<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">
<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">
<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">
<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-3
og 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 g-4">
<div class="col">
<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">
<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">
<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">
<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-100
til 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 g-4">
<div class="col">
<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">
<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">
<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">
<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>
Akkurat som med kortgrupper, vil kortbunntekster 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="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<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 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>
<div class="col">
<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 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>
<div class="col">
<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 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>
</div>
Murverk
I v4
brukte vi en CSS-kun-teknikk for å etterligne oppførselen til murlignende søyler, men denne teknikken kom med mange ubehagelige bivirkninger . Hvis du ønsker å ha denne typen layout i v5
, kan du bare benytte deg av Masonry-plugin. Murverk er ikke inkludert i Bootstrap , men vi har laget et demoeksempel for å hjelpe deg i gang.
Sass
Variabler
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;