Kort

Bootstraps kort giver en fleksibel og udvidelsesbar indholdsbeholder med flere varianter og muligheder.

Om

Et kort er en fleksibel og udvidelsesbar indholdsbeholder. Det inkluderer muligheder for sidehoveder og sidefødder, en bred vifte af indhold, kontekstuelle baggrundsfarver og kraftfulde visningsmuligheder. Hvis du er bekendt med Bootstrap 3, erstatter kort vores gamle paneler, brønde og thumbnails. Lignende funktionalitet til disse komponenter er tilgængelig som modifikatorklasser for kort.

Eksempel

Kort er bygget med så lidt markup og stilarter som muligt, men formår stadig at levere et væld af kontrol og tilpasning. Bygget med flexbox, de tilbyder nem justering og blandes godt med andre Bootstrap-komponenter. De har ingen marginsom standard, så brug mellemrumsværktøjer efter behov.

Nedenfor er et eksempel på et basiskort med blandet indhold og en fast bredde. Kort har ingen fast bredde til at starte, så de vil naturligvis fylde hele bredden af dets overordnede element. Dette kan nemt tilpasses med vores forskellige størrelsesmuligheder .

Kortets titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Gå et sted hen

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

Indholdstyper

Kort understøtter en lang række indhold, herunder billeder, tekst, listegrupper, links og mere. Nedenfor er eksempler på, hvad der understøttes.

Legeme

Byggestenen på et kort er .card-body. Brug det, når du har brug for en polstret sektion på et kort.

Dette er noget tekst i en korttekst.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titler, tekst og links

Korttitler bruges ved at tilføje .card-titletil et <h*>tag. På samme måde tilføjes links og placeres ved siden af hinanden ved at tilføje .card-linktil et <a>tag.

Undertekster bruges ved at tilføje et .card-subtitletil et <h*>tag. Hvis emnerne .card-titleog .card-subtitleer placeret i en .card-bodyvare, er kortets titel og undertekst pænt afstemt.

Kortets titel

Kort undertekst

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Kortlink Et andet link

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Billeder

.card-img-topplacerer et billede øverst på kortet. Med .card-textkan der tilføjes tekst til kortet. Tekst indeni .card-textkan også styles med standard HTML-tags.

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

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

Liste grupper

Opret lister over indhold 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>

Udvalgte

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

Kortfod

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

Køkkenvask

Bland og match flere indholdstyper for at skabe det kort, du har brug for, eller smid alt derind. Nedenfor vises billedstile, blokke, tekststile og en listegruppe – alt sammen pakket ind i et kort med fast bredde.

Kortets titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Cras justo odio
Dapibus ac facilisis i
Vestibulum ved eros

Kortlink Et andet link

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

Sidehoved og sidefod

Tilføj en valgfri sidehoved og/eller sidefod på et kort.

Udvalgte

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

<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 at tilføje .card-headertil <h*>elementer.

Udvalgte

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

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

Citere

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

En berømt i Kildetitel

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

Udvalgte

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

2 dage siden

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

Dimensionering

Kortene antager ingen specifik widthstart, så de vil være 100% brede, medmindre andet er angivet. Du kan ændre dette efter behov med tilpasset CSS, grid-klasser, grid Sass-mixins eller hjælpeprogrammer.

Brug af grid markup

Brug gitteret til at pakke kortene ind i kolonner og rækker efter behov.

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

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

Brug af hjælpeprogrammer

Brug vores håndfuld tilgængelige størrelsesværktøjer til hurtigt at indstille et korts bredde.

Kortets titel

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Knap

Kortets titel

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Knap

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

Brug af tilpasset CSS

Brug tilpasset CSS i dine stylesheets eller som inline-stile til at indstille en bredde.

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

<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 hurtigt ændre tekstjusteringen af ethvert kort – i dets helhed eller specifikke dele – med vores tekstjusteringsklasser .

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

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

Tilføj noget navigation til et korts header (eller blok) med Bootstraps nav-komponenter .

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

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

Særlig titelbehandling

Med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Gå et sted hen

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

Billeder

Kort indeholder et par muligheder for at arbejde med billeder. Vælg mellem at tilføje "billedkapsler" i hver ende af et kort, overlejre billeder med kortindhold eller blot indlejre billedet på et kort.

Billedhætter

I lighed med sidehoveder og sidefødder kan kort indeholde top og bund "image caps" - billeder i toppen eller bunden af et kort.

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret for 3 minutter siden

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret 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>

Billedoverlejringer

Gør et billede til en kortbaggrund, og overlæg dit korts tekst. Afhængigt af billedet har du muligvis brug for yderligere stilarter eller hjælpeprogrammer.

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret for 3 minutter siden

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

Bemærk, at indholdet ikke bør være større end billedets højde. Hvis indholdet er større end billedet, vil indholdet blive vist uden for billedet.

Vandret

Ved at bruge en kombination af gitter- og hjælpeklasser kan kort gøres vandrette på en mobilvenlig og responsiv måde. I eksemplet nedenfor fjerner vi gitterrenderne med .no-guttersog bruger .col-md-*klasser til at gøre kortet vandret ved mdbrudpunktet. Yderligere justeringer kan være nødvendige afhængigt af dit kortindhold.

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret 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>

Kort stilarter

Kort indeholder forskellige muligheder for at tilpasse deres baggrunde, kanter og farve.

Baggrund og farve

Brug tekst- og baggrundsværktøjer til at ændre udseendet af et kort.

Header

Primær korttitel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Sekundær korttitel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Succeskorttitel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Farekorts titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Advarselskorts titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Infokort titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Light card titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Mørk kort titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

<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 hjælpeteknologier

Brug af farve til at tilføje mening giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier – såsom skærmlæsere. Sørg for, at informationer, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom yderligere tekst skjult i .sr-onlyklassen.

Grænse

Brug grænseværktøjer til kun at ændre border-colorpå et kort. Bemærk, at du kan lægge .text-{color}klasser på forælderen .cardeller en delmængde af kortets indhold som vist nedenfor.

Header

Primær korttitel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Sekundær korttitel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Succeskorttitel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Farekorts titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Advarselskorts titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Infokort titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Light card titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Header

Mørk kort titel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

<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 hjælpeprogrammer

Du kan også ændre grænserne på kortets sidehoved og sidefod efter behov, og endda fjerne dem background-colormed .bg-transparent.

Header

Succeskorttitel

Nogle hurtige eksempeltekster til at bygge videre på kortets titel og udgøre hovedparten af kortets indhold.

Sidefod

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

Kort layout

Ud over at style indholdet på kort, inkluderer Bootstrap et par muligheder for at lægge serier af kort ud. Indtil videre er disse layoutmuligheder endnu ikke responsive .

Kortgrupper

Brug kortgrupper til at gengive kort som et enkelt, vedhæftet element med samme bredde og højde kolonner. Kortgrupper starter stablet og bruger display: flex;til at blive vedhæftet med ensartede dimensioner startende ved smbrudpunktet.

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret for 3 minutter siden

Kortets titel

Dette kort har understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Sidst opdateret for 3 minutter siden

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette kort har endnu længere indhold end det første for at vise den samme højde handling.

Sidst opdateret 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 bruger kortgrupper med sidefødder, vil deres indhold automatisk være på linje.

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret for 3 minutter siden

Kortets titel

Dette kort har understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Sidst opdateret for 3 minutter siden

Kortets titel

Sidst opdateret 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>
    </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>

Kortspil

Har du brug for et sæt kort med samme bredde og højde, som ikke er knyttet til hinanden? Brug kortspil.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret for 3 minutter siden

Kortets titel

Dette kort har understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Sidst opdateret for 3 minutter siden

Kortets titel

Sidst opdateret 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>

Ligesom med kortgrupper, vil kortfødder i bunker automatisk stå på linje.

Kortets titel

Dette er et bredere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Sidst opdateret for 3 minutter siden

Kortets titel

Dette kort har understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Sidst opdateret for 3 minutter siden

Kortets titel

Sidst opdateret 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 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>

Gitterkort

Brug Bootstrap-gittersystemet og dets .row-colsklasser til at kontrollere, hvor mange gitterkolonner (viklet rundt om dine kort) du viser pr. række. For eksempel, her .row-cols-1lægger du kortene ud i én kolonne og .row-cols-md-2deler fire kort op til samme bredde på tværs af flere rækker, fra det mellemste brudpunkt og op.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

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

Skift det til, .row-cols-3og du vil se det fjerde kort ombrydes.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

<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 har brug for samme højde, skal du tilføje .h-100til kortene. Hvis du vil have samme højder som standard, kan du indstille $card-height: 100%i Sass.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Kortets titel

Dette er et kort kort.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Kortets titel

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

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

Kort kolonner

Kort kan organiseres i Masonry -lignende kolonner med kun CSS ved at pakke dem ind .card-columns. Kort er bygget med CSS column-egenskaber i stedet for flexbox for lettere justering. Kortene er ordnet fra top til bund og fra venstre mod højre.

Heads up! Dit kilometertal med kortkolonner kan variere. For at forhindre, at kort bryder på tværs af kolonner, skal vi indstille dem til display: inline-block, at column-break-inside: avoiddet ikke er en skudsikker løsning endnu.

Korttitel, der ombrydes til en ny linje

Dette er et længere kort med understøttende tekst nedenfor som en naturlig indledning til yderligere indhold. Dette indhold er lidt længere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

En berømt i Kildetitel

Kortets titel

Dette kort har understøttende tekst nedenfor som en naturlig indledning til yderligere indhold.

Sidst opdateret for 3 minutter siden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat.

En berømt i Kildetitel

Kortets titel

Dette kort har en almindelig titel og et kort tekstafsnit under sig.

Sidst opdateret for 3 minutter siden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

En berømt i Kildetitel

Kortets titel

Dette er endnu et kort med titel og understøttende tekst nedenfor. Dette kort har noget ekstra indhold for at gøre det lidt højere generelt.

Sidst opdateret 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å udvides og tilpasses med noget ekstra kode. Nedenfor er vist en udvidelse af .card-columnsklassen, der bruger den samme CSS, som vi bruger - CSS-kolonner - til at generere et sæt responsive niveauer til ændring af antallet af kolonner.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Kort

Om

Eksempel

Kortets titel

Indholdstyper

Legeme

Titler, tekst og links

Kortets titel

Kort undertekst

Billeder

Liste grupper

Køkkenvask

Kortets titel

Sidehoved og sidefod

Særlig titelbehandling

Udvalgte

Særlig titelbehandling

Særlig titelbehandling

Dimensionering

Brug af grid markup

Særlig titelbehandling

Særlig titelbehandling

Brug af hjælpeprogrammer

Kortets titel

Kortets titel

Brug af tilpasset CSS

Særlig titelbehandling

Tekstjustering

Særlig titelbehandling

Særlig titelbehandling

Særlig titelbehandling

Navigation

Særlig titelbehandling

Særlig titelbehandling

Billeder

Billedhætter

Kortets titel

Kortets titel

Billedoverlejringer

Kortets titel

Vandret

Kortets titel

Kort stilarter

Baggrund og farve

Primær korttitel

Sekundær korttitel

Succeskorttitel

Farekorts titel

Advarselskorts titel

Infokort titel

Light card titel

Mørk kort titel

Formidle mening til hjælpeteknologier

Grænse

Primær korttitel

Sekundær korttitel

Succeskorttitel

Farekorts titel

Advarselskorts titel

Infokort titel

Light card titel

Mørk kort titel

Mixins hjælpeprogrammer

Succeskorttitel

Kort layout

Kortgrupper

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortspil

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Gitterkort