Gå til hovedinnhold Hopp til dokumentnavigering
Check
in English

Kort

Bootstraps kort gir en fleksibel og utvidbar innholdsbeholder med flere varianter og alternativer.

På denne siden

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 .

Placeholder Image cap
Korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Gå et sted
html 
<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.

Dette er litt tekst i en korttekst.
html 
<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
html 
<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.

Placeholder Image cap

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

html 
<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
html 
<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>
Utvalgte
  • En ting
  • Et annet element
  • Et tredje element
html 
<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
Kortbunntekst
html 
<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.

Placeholder Image cap
Korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

  • En ting
  • Et annet element
  • Et tredje element
Kortlenke En annen lenke
html 
<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>

Legg til en valgfri topp- og/eller bunntekst på et kort.

Utvalgte
Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted
html 
<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
html 
<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>
Sitat

Et velkjent sitat, inneholdt i et blockquote-element.

Noen kjent i kildetittelen
html 
<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>
Utvalgte
Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted
2 dager siden
html 
<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 sted
Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted
html 
<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.

Korttittel

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Knapp
Korttittel

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Knapp
html 
<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
html 
<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 sted
Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted
Spesiell tittelbehandling

Med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Gå et sted
html 
<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>

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

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.

Placeholder Image cap
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

Placeholder Image cap
html 
<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.

Placeholder Card image
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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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 .g-0og bruker .col-md-*klasser for å gjøre kortet horisontalt ved mdbruddpunktet. Ytterligere justeringer kan være nødvendig avhengig av innholdet på kortet ditt.

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

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

Lagt til i v5.2.0

Sett en background-colormed kontrasterende forgrunn colormed våre .text-bg-{color}hjelpere . Tidligere var det nødvendig å manuelt pare ditt valg av .text-{color}og .bg-{color}verktøy for styling, som du fortsatt kan bruke hvis du foretrekker det.

Overskrift
Primærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Sekundærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Tittel på suksesskortet

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Tittel på farekort

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Advarselskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Infokorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Lyskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Mørk korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

html 
<div class="card text-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-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-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-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-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-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-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-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-hiddenklassen.

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.

Overskrift
Primærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Sekundærkorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Tittel på suksesskortet

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Tittel på farekort

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Advarselskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Infokorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Lyskorttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

Overskrift
Mørk korttittel

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

html 
<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-colormed .bg-transparent.

Overskrift
Tittel på suksesskortet

Noen raske eksempeltekster for å bygge på korttittelen og utgjøre hoveddelen av kortets innhold.

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

Placeholder Image cap
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

Placeholder Image cap
Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden

Placeholder Image cap
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

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

Placeholder Image cap
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
Placeholder Image cap
Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden
Placeholder Image cap
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
html 
<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-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 bruddpunkt og opp.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

html 
<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-3og du vil se det fjerde kortet.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

html 
<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-100til kortene. Hvis du vil ha like høyder som standard, kan du stille $card-height: 100%inn i Sass.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

Placeholder Image cap
Korttittel

Dette er et kort kort.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Placeholder Image cap
Korttittel

Dette er et lengre kort med støttetekst nedenfor som en naturlig innledning til tilleggsinnhold. Dette innholdet er litt lengre.

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

Placeholder Image cap
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
Placeholder Image cap
Korttittel

Dette kortet har støttetekst nedenfor som en naturlig innledning til tilleggsinnhold.

Sist oppdatert for 3 minutter siden
Placeholder Image cap
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
html 
<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 v4brukte 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.

CSS

Variabler

Lagt til i v5.2.0

Som en del av Bootstraps utviklende tilnærming til CSS-variabler, bruker kort nå lokale CSS-variabler .cardfor forbedret sanntidstilpasning. Verdier for CSS-variablene settes via Sass, så Sass-tilpasning støttes fortsatt også.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass variabler

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$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;