Kort

Bootstraps kort ger en flexibel och utbyggbar innehållsbehållare med flera varianter och alternativ.

Handla om

Ett kort är en flexibel och utdragbar innehållsbehållare. Den innehåller alternativ för sidhuvuden och sidfötter, ett brett utbud av innehåll, kontextuella bakgrundsfärger och kraftfulla visningsalternativ. Om du är bekant med Bootstrap 3 ersätter kort våra gamla paneler, brunnar och miniatyrer. Liknande funktionalitet som dessa komponenter finns som modifieringsklasser för kort.

Exempel

Kort är byggda med så lite uppmärkning och stilar som möjligt, men lyckas ändå leverera massor av kontroll och anpassning. De är byggda med flexbox och erbjuder enkel inriktning och blandas väl med andra Bootstrap-komponenter. De har inga som marginstandard, så använd avståndsverktyg efter behov.

Nedan är ett exempel på ett grundkort med blandat innehåll och en fast bredd. Korten har ingen fast bredd för att starta, så de kommer naturligtvis att fylla hela bredden av dess överordnade element. Detta anpassas enkelt med våra olika storleksalternativ .

Korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Gå någonstans

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

Innehållstyper

Kort stöder en mängd olika innehåll, inklusive bilder, text, listgrupper, länkar och mer. Nedan finns exempel på vad som stöds.

Kropp

Byggstenen för ett kort är .card-body. Använd den när du behöver en vadderad sektion på ett kort.

Det här är text i en kortkropp.

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

Titlar, text och länkar

Korttitlar används genom att lägga .card-titletill en <h*>tagg. På samma sätt läggs länkar till och placeras bredvid varandra genom att lägga .card-linktill i en <a>tagg.

Undertexter används genom att lägga till a .card-subtitlei en <h*>tagg. Om .card-titleoch .card-subtitleobjekten placeras i ett .card-bodyobjekt, är kortets titel och underrubrik snyggt anpassade.

Korttitel

Kort undertext

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Kortlänk En annan länk

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

Bilder

.card-img-topplacerar en bild överst på kortet. Med .card-textkan text läggas till på kortet. Text inom .card-textkan också formateras med standard HTML-taggar.

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

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

Lista grupper

Skapa listor med innehåll på ett kort med en spollistgrupp.

Cras justo odio
Dapibus ac facilisis in
Vestibulum vid 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>

Utvalda

Cras justo odio
Dapibus ac facilisis in
Vestibulum vid eros

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Cras justo odio
Dapibus ac facilisis in
Vestibulum vid eros

Kortets sidfot

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Diskbänk

Blanda och matcha flera innehållstyper för att skapa det kort du behöver, eller släng allt där. Nedan visas bildstilar, block, textstilar och en listgrupp – alla inslagna i ett kort med fast bredd.

Korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Cras justo odio
Dapibus ac facilisis in
Vestibulum vid eros

Kortlänk En annan länk

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

Sidhuvud och sidfot

Lägg till en valfri sidhuvud och/eller sidfot på ett kort.

Utvalda

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

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

Kortrubriker kan utformas genom att lägga .card-headertill <h*>element.

Utvalda

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

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

Citat

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

Någon känd i källtiteln

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

Utvalda

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

2 dagar sedan

<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

Korten förutsätter ingen specifik widthstart, så de kommer att vara 100 % breda om inget annat anges. Du kan ändra detta efter behov med anpassad CSS, grid-klasser, grid Sass mixins eller verktyg.

Använda rutnätsuppmärkning

Använd rutnätet och slå in korten i kolumner och rader efter behov.

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

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

Använda verktyg

Använd vår handfull tillgängliga storleksverktyg för att snabbt ställa in ett korts bredd.

Korttitel

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Knapp

Korttitel

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Knapp

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

Använder anpassad CSS

Använd anpassad CSS i dina stilmallar eller som inline-stilar för att ställa in en bredd.

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

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

Textjustering

Du kan snabbt ändra textjusteringen för alla kort – i sin helhet eller specifika delar – med våra textjusteringsklasser .

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

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

Lägg till lite navigering till ett korts rubrik (eller block) med Bootstraps nav-komponenter .

Särskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

<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ärskild titelbehandling

Med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Gå någonstans

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

Bilder

Korten innehåller några alternativ för att arbeta med bilder. Välj mellan att lägga till "bildkapslar" i vardera änden av ett kort, lägga över bilder med kortinnehåll eller helt enkelt bädda in bilden på ett kort.

Bildkapslar

I likhet med sidhuvuden och sidfötter kan kort innehålla övre och nedre "bildkapslar" - bilder längst upp eller längst ned på ett kort.

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

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

Bildöverlägg

Förvandla en bild till en kortbakgrund och överlägg ditt korts text. Beroende på bilden kanske du behöver ytterligare stilar eller verktyg.

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

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

Observera att innehållet inte får vara större än bildens höjd. Om innehållet är större än bilden kommer innehållet att visas utanför bilden.

Horisontell

Genom att använda en kombination av rutnät och nyttoklasser kan kort göras horisontella på ett mobilvänligt och lyhört sätt. I exemplet nedan tar vi bort rutrännorna med .no-guttersoch använder .col-md-*klasser för att göra kortet horisontellt vid mdbrytpunkten. Ytterligare justeringar kan behövas beroende på ditt kortinnehåll.

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

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

Korten innehåller olika alternativ för att anpassa deras bakgrunder, kanter och färg.

Bakgrund och färg

Använd text- och bakgrundsverktyg för att ändra utseendet på ett kort.

Rubrik

Primär korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Sekundär korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Titel för framgångskort

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Riskkortstitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Varningskorts titel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Infokorts titel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Ljus kort titel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Mörk korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

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

Förmedla mening till hjälpmedel

Att använda färg för att lägga till mening ger bara en visuell indikation som inte kommer att förmedlas till användare av hjälpmedel – som skärmläsare. Se till att information som betecknas med färgen antingen är uppenbar från själva innehållet (t.ex. den synliga texten), eller är inkluderad på andra sätt, såsom ytterligare text gömd med .sr-onlyklassen.

Gräns

Använd gränsverktyg för att bara ändra på border-colorett kort. Observera att du kan lägga .text-{color}klasser på föräldern .cardeller en delmängd av kortets innehåll som visas nedan.

Rubrik

Primär korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Sekundär korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Titel för framgångskort

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Riskkortstitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Varningskorts titel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Infokorts titel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Ljus kort titel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Rubrik

Mörk korttitel

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

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

Du kan också ändra gränserna på kortets sidhuvud och sidfot efter behov, och till och med ta bort dem background-colormed .bg-transparent.

Rubrik

Titel för framgångskort

Lite snabb exempeltext för att bygga vidare på korttiteln och utgöra huvuddelen av kortets innehåll.

Sidfot

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

Kortlayout

Förutom att styla innehållet på kort, innehåller Bootstrap några alternativ för att lägga ut serier av kort. För närvarande är dessa layoutalternativ inte responsiva ännu .

Kortgrupper

Använd kortgrupper för att återge kort som ett enda, fäst element med samma bredd och höjd kolumner. Kortgrupper börjar staplade och används display: flex;för att fästas med enhetliga dimensioner från smbrytpunkten.

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta kort har stödtext nedan som en naturlig inledning till ytterligare innehåll.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Det här kortet har ännu längre innehåll än det första som visar samma höjd action.

Senast uppdaterad för 3 minuter sedan

<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 använder kortgrupper med sidfot kommer deras innehåll automatiskt att radas upp.

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta kort har stödtext nedan som en naturlig inledning till ytterligare innehåll.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Det här kortet har ännu längre innehåll än det första som visar samma höjd action.

Senast uppdaterad för 3 minuter sedan

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

Kortlekar

Behöver du en uppsättning kort med lika bredd och höjd som inte är fästa vid varandra? Använd kortlekar.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta kort har stödtext nedan som en naturlig inledning till ytterligare innehåll.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Det här kortet har ännu längre innehåll än det första som visar samma höjd action.

Senast uppdaterad för 3 minuter sedan

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

Precis som med kortgrupper kommer kortsidfötter i kortlekar automatiskt att radas upp.

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta kort har stödtext nedan som en naturlig inledning till ytterligare innehåll.

Senast uppdaterad för 3 minuter sedan

Korttitel

Detta är ett bredare kort med stödjande text nedan som en naturlig inledning till ytterligare innehåll. Det här kortet har ännu längre innehåll än det första som visar samma höjd action.

Senast uppdaterad för 3 minuter sedan

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

Rutnätskort

Använd Bootstrap-rutnätssystemet och dess .row-colsklasser för att kontrollera hur många rutnätskolumner (lindade runt dina kort) du visar per rad. Till exempel, här .row-cols-1lägger du ut korten i en kolumn och .row-cols-md-2delar upp fyra kort till samma bredd över flera rader, från medelhög brytpunkt och upp.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

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

Ändra det till .row-cols-3så ser du det fjärde kortet.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

<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 behöver lika höjd, lägg .h-100till korten. Om du vill ha lika höjder som standard kan du ställa $card-height: 100%in i Sass.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

Korttitel

Detta är ett kort kort.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll.

Korttitel

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

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

Kortkolumner

Kort kan organiseras i Masonry -liknande kolumner med bara CSS genom att slå in dem i .card-columns. Kort är byggda med CSS column-egenskaper istället för flexbox för enklare justering. Korten är beställda uppifrån och ner och från vänster till höger.

Se upp! Din körsträcka med kortkolumner kan variera. För att förhindra att kort går sönder över kolumner måste vi ställa in dem på att de display: inline-blockinte column-break-inside: avoidär en skottsäker lösning ännu.

Korttitel som lindas till en ny rad

Detta är ett längre kort med stödtext nedan som en naturlig inledning till ytterligare innehåll. Detta innehåll är lite längre.

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

Någon känd i källtiteln

Korttitel

Detta kort har stödtext nedan som en naturlig inledning till ytterligare innehåll.

Senast uppdaterad för 3 minuter sedan

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

Någon känd i källtiteln

Korttitel

Detta kort har en vanlig titel och ett kort stycke med text under sig.

Senast uppdaterad för 3 minuter sedan

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

Någon känd i källtiteln

Korttitel

Detta är ytterligare ett kort med titel och stödtext nedan. Detta kort har lite extra innehåll för att göra det något högre totalt sett.

Senast uppdaterad för 3 minuter sedan

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

Kortkolumner kan också utökas och anpassas med extra kod. Nedan visas en förlängning av .card-columnsklassen som använder samma CSS som vi använder – CSS-kolumner – för att generera en uppsättning responsiva nivåer för att ändra antalet kolumner.

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

Kort

Handla om

Exempel

Korttitel

Innehållstyper

Kropp

Titlar, text och länkar

Korttitel

Kort undertext

Bilder

Lista grupper

Diskbänk

Korttitel

Sidhuvud och sidfot

Särskild titelbehandling

Utvalda

Särskild titelbehandling

Särskild titelbehandling

Dimensionering

Använda rutnätsuppmärkning

Särskild titelbehandling

Särskild titelbehandling

Använda verktyg

Korttitel

Korttitel

Använder anpassad CSS

Särskild titelbehandling

Textjustering

Särskild titelbehandling

Särskild titelbehandling

Särskild titelbehandling

Navigering

Särskild titelbehandling

Särskild titelbehandling

Bilder

Bildkapslar

Korttitel

Korttitel

Bildöverlägg

Korttitel

Horisontell

Korttitel

Kort stilar

Bakgrund och färg

Primär korttitel

Sekundär korttitel

Titel för framgångskort

Riskkortstitel

Varningskorts titel

Infokorts titel

Ljus kort titel

Mörk korttitel

Förmedla mening till hjälpmedel

Gräns

Primär korttitel

Sekundär korttitel

Titel för framgångskort

Riskkortstitel

Varningskorts titel

Infokorts titel

Ljus kort titel

Mörk korttitel

Mixins verktyg

Titel för framgångskort

Kortlayout

Kortgrupper

Korttitel

Korttitel

Korttitel

Korttitel

Korttitel

Korttitel

Kortlekar

Korttitel

Korttitel

Korttitel

Korttitel

Korttitel

Korttitel

Rutnätskort