Kort

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

På denne side

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

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>

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.

html

<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

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>

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.

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>

Liste grupper

Opret lister over indhold på et kort med en flush-listegruppe.

En genstand
En anden genstand
Et tredje punkt

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>

Udvalgte

En genstand
En anden genstand
Et tredje punkt

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 genstand
En anden genstand
Et tredje punkt

Kortfod

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>

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.

En genstand
En anden genstand
Et tredje punkt

Kortlink Et andet link

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>

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

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

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>

Citere

Et velkendt citat, indeholdt i et blokcitat-element.

En berømt i Kildetitel

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>

Udvalgte

Særlig titelbehandling

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

Gå et sted hen

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

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

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>

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

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>

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

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

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>

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

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>

Særlig titelbehandling

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

Gå et sted hen

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>

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

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>

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

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>

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 .g-0og 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

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>

Kort stilarter

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

Baggrund og farve

Tilføjet i v5.2.0

Sæt en background-colorkontrastfuld forgrund colormed vores .text-bg-{color}hjælpere . Tidligere var det påkrævet manuelt at parre dit valg af .text-{color}og .bg-{color}værktøjer til styling, som du stadig kan bruge, hvis du foretrækker det.

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.

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

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, 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 ekstra tekst skjult i .visually-hiddenklassen.

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.

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

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>

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

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

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>

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.

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>

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.

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

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>

Ligesom med kortgrupper, vil kortfødder automatisk opstilles.

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

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>

Murværk

I v4brugte vi en CSS-kun-teknik til at efterligne opførselen af murværkslignende søjler, men denne teknik kom med mange ubehagelige bivirkninger . Hvis du vil have denne type layout i v5, kan du blot gøre brug af Masonry plugin. Murværk er ikke inkluderet i Bootstrap , men vi har lavet et demo-eksempel for at hjælpe dig i gang.

CSS

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger kort nu lokale CSS-variabler .cardtil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$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 variable

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

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

Gitterkort

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortets titel

Kortets titel