Spring til hovedindhold Spring til dokumentnavigation
in English

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 .

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.

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

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

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

Et velkendt citat, indeholdt i et blokcitat-element.

En berømt i Kildetitel 
<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 
<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-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 
<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 
<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.

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

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

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

Brug tekstfarve- 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-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Formidle mening til 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.

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

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>

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

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

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

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

Sass

Variabler

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$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;