Source

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 .

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

Placeholder Image cap

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>

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.

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

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.

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

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

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

Placeholder Image
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 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 .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 bruger display: flex;til at opnå deres ensartede størrelse.

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

Placeholder Image cap
Kortets titel

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

Sidst opdateret for 3 minutter siden

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

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

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

Sidst opdateret for 3 minutter siden
Placeholder Image cap
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>
    </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.

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

Placeholder Image cap
Kortets titel

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

Sidst opdateret for 3 minutter siden

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

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

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

Sidst opdateret for 3 minutter siden
Placeholder Image cap
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-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.

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

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

Placeholder Image cap
Kortets titel

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

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

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

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

Placeholder Image cap
Kortets titel

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

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

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

Placeholder Image cap
Kortets titel

Dette er et kort kort.

Placeholder Image cap
Kortets titel

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

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

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

Placeholder Card image

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