Fara í aðalefni Farðu í skjalaleiðsögn
in English

Spil

Bootstrap kortin bjóða upp á sveigjanlegt og stækkanlegt efnisílát með mörgum afbrigðum og valkostum.

Á þessari síðu

Um

Kort er sveigjanlegt og teygjanlegt efnisílát . Það felur í sér valkosti fyrir hausa og fætur, fjölbreytt úrval af efni, samhengislitum bakgrunni og öfluga skjávalkosti. Ef þú þekkir Bootstrap 3, koma spil í stað gömlu spjaldanna okkar, brunna og smámynda. Svipuð virkni og þessir íhlutir eru fáanlegir sem breytingaflokkar fyrir kort.

Dæmi

Kort eru smíðuð með eins litlu álagi og stílum og mögulegt er, en ná samt að skila miklu af stjórn og sérsniðnum. Þeir eru smíðaðir með flexbox og bjóða upp á auðvelda röðun og blandast vel við aðra Bootstrap íhluti. Þeir hafa engin marginsjálfgefið, svo notaðu biltól eftir þörfum.

Hér að neðan er dæmi um grunnkort með blönduðu efni og fastri breidd. Spjöld hafa enga fasta breidd til að byrja, þannig að þau fylla náttúrulega alla breidd móðureiningarinnar. Þetta er auðvelt að aðlaga með ýmsum stærðarmöguleikum okkar .

Placeholder Image cap
Titill korts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Farðu eitthvert 
<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>

Efnistegundir

Kort styðja margs konar efni, þar á meðal myndir, texta, listahópa, tengla og fleira. Hér að neðan eru dæmi um það sem er stutt.

Líkami

Byggingarreitur korts er .card-body. Notaðu það hvenær sem þú þarft bólstraðan hluta á kortinu.

Þetta er einhver texti í meginmáli korts. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titlar, texti og tenglar

Kortaheiti eru notaðir með því að bæta .card-titlevið <h*>merki. Á sama hátt er hlekkjum bætt við og settir við hliðina á hvern annan með því að bæta .card-linkvið <a>merki.

Texti er notaður með því að bæta a .card-subtitlevið <h*>merki. Ef .card-titleog .card-subtitlehlutirnir eru settir í .card-bodyhlut, eru nafnspjaldið og undirtitillinn samræmdur vel.

Titill korts
Texti korts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Kortatengill Annar hlekkur 
<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>

Myndir

.card-img-topsetur mynd efst á kortinu. Með .card-text, er hægt að bæta texta við kortið. Texta innan .card-texter einnig hægt að stíla með venjulegum HTML merkjum.

Placeholder Image cap

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

<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ðu hópa

Búðu til lista yfir efni á spjaldi með sléttlistahópi.

  • Atriði
  • Annað atriði
  • Þriðja atriðið
<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>
Valið
  • Atriði
  • Annað atriði
  • Þriðja atriðið
<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>
  • Atriði
  • Annað atriði
  • Þriðja atriðið
Kortafótur 
<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>

Eldhúsvaskur

Blandaðu saman mörgum efnistegundum til að búa til kortið sem þú þarft, eða hentu öllu þar inn. Sýnd hér að neðan eru myndstíll, kubbar, textastíll og listahópur - allt vafið inn í spjald með fastri breidd.

Placeholder Image cap
Titill korts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

  • Atriði
  • Annað atriði
  • Þriðja atriðið
Kortatengill Annar hlekkur 
<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>

Bættu við valfrjálsum haus og/eða fót á korti.

Valið
Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert 
<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>

Hægt er að stilla kortahausa með því að bæta .card-headervið <h*>þætti.

Valið
Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert 
<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>
Tilvitnun

Vel þekkt tilvitnun, sem er í blokkatilvitnun.

Einhver frægur í Source Title 
<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>
Valið
Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert
fyrir 2 dögum 
<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>

Stærð

Spilin gera ráð fyrir að ekkert sé ákveðið widthtil að byrja, þannig að þau verða 100% breið nema annað sé tekið fram. Þú getur breytt þessu eftir þörfum með sérsniðnum CSS, grid classes, grid Sass mixins eða tólum.

Nota rist merkingu

Notaðu ristina til að vefja spilum í dálka og raðir eftir þörfum.

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert
Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert 
<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>

Að nota tól

Notaðu handfylli af tiltækum stærðartólum okkar til að stilla fljótt breidd korts.

Titill korts

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Takki
Titill korts

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

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

Notar sérsniðna CSS

Notaðu sérsniðna CSS í stílblöðunum þínum eða sem innbyggða stíla til að stilla breidd.

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert 
<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>

Textajöfnun

Þú getur fljótt breytt textajöfnun hvaða spjalda sem er — í heild sinni eða ákveðnum hlutum — með textajöfnunarflokkunum okkar .

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert
Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert
Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert 
<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>

Bættu smá leiðsögn við haus (eða blokk) korts með stýrihlutum Bootstrap .

Sérstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert 
<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" 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érstök titlameðferð

Með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Farðu eitthvert 
<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>

Myndir

Kort innihalda nokkra möguleika til að vinna með myndir. Veldu á milli þess að setja „myndahúfur“ á hvorum enda kortsins, leggja myndir yfir efni kortsins eða einfaldlega fella myndina inn á kort.

Myndahúfur

Líkt og hausar og síðufætur geta spjöld innihaldið efri og neðri „myndahúfur“—myndir efst eða neðst á korti.

Placeholder Image cap
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

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>

Myndyfirlag

Breyttu mynd í kortabakgrunn og leggðu texta kortsins yfir. Það fer eftir myndinni, þú gætir þurft viðbótarstíl eða tól eða ekki.

Placeholder Card image
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

<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>
Athugaðu að innihald ætti ekki að vera stærra en hæð myndarinnar. Ef efnið er stærra en myndin birtist efnið utan myndarinnar.

Lárétt

Með því að nota blöndu af rist og gagnsemi flokkum er hægt að gera kort lárétt á farsímavænan og móttækilegan hátt. Í dæminu hér að neðan fjarlægjum við ristrennurnar með .g-0og notum .col-md-*flokka til að gera kortið lárétt við mdbrotpunktinn. Frekari lagfæringar gætu verið nauðsynlegar eftir innihaldi kortsins.

Placeholder Image
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

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

Kortastíll

Kort innihalda ýmsa möguleika til að sérsníða bakgrunn þeirra, ramma og lit.

Bakgrunnur og litur

Notaðu textalit og bakgrunnsforrit til að breyta útliti korts.

Fyrirsögn
Titill aðalkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Heiti aukaspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill árangurskorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Heiti hættukorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill viðvörunarkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill upplýsingakorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill ljósspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Dökkur nafnspjald

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

<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>
Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .visually-hiddenbekknum.

Landamæri

Notaðu landamæraforrit til að breyta aðeins border-colorkorti. Athugaðu að þú getur sett .text-{color}námskeið á foreldri .cardeða hlutmengi af innihaldi kortsins eins og sýnt er hér að neðan.

Fyrirsögn
Titill aðalkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Heiti aukaspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill árangurskorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Heiti hættukorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill viðvörunarkorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill upplýsingakorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Titill ljósspjalds

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fyrirsögn
Dökkur nafnspjald

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

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

Þú getur líka breytt rammanum á haus- og fæti kortsins eftir þörfum og jafnvel fjarlægt þau background-colormeð .bg-transparent.

Fyrirsögn
Titill árangurskorts

Einhver fljótur dæmigerður texti til að byggja á nafni kortsins og mynda megnið af innihaldi kortsins.

Fótur 
<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>

Uppsetning korta

Auk þess að stíla innihaldið á kortum, inniheldur Bootstrap nokkra möguleika til að setja upp röð af kortum. Í bili eru þessir útlitsvalkostir ekki móttækilegir enn .

Kortahópar

Notaðu kortahópa til að birta spilin sem einn, festan þátt með jafnbreiðum og hæðardálkum. Kortahópar byrja staflað og nota display: flex;til að festast með samræmdum víddum sem byrja á smbrotastað.

Placeholder Image cap
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum

Placeholder Image cap
Titill korts

Þetta spjald er með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Síðast uppfært fyrir 3 mínútum

Placeholder Image cap
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta kort hefur jafnvel lengra innihald en það fyrsta sem sýnir sömu hæðaraðgerðina.

Síðast uppfært fyrir 3 mínútum

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

Þegar kortahópar eru notaðir með fótum mun innihald þeirra sjálfkrafa vera í röð.

Placeholder Image cap
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum
Placeholder Image cap
Titill korts

Þetta spjald er með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Síðast uppfært fyrir 3 mínútum
Placeholder Image cap
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta kort hefur jafnvel lengra innihald en það fyrsta sem sýnir sömu hæðaraðgerðina.

Síðast uppfært fyrir 3 mínútum 
<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>

Ratkort

Notaðu Bootstrap grid kerfið og .row-colsflokka þess til að stjórna því hversu marga grid dálka (vafinn utan um spilin þín) þú sýnir í hverri röð. Til dæmis, hér er .row-cols-1að setja spilin út á einn dálk og .row-cols-md-2skipta fjórum spilum í jafn breidd yfir margar raðir, frá miðlungs broti og upp.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

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

Breyttu því í .row-cols-3og ​​þú munt sjá fjórða spilið.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

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

Þegar þú þarft jafna hæð skaltu bæta .h-100við spilin. Ef þú vilt jafna hæð sjálfgefið geturðu stillt $card-height: 100%í Sass.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

Placeholder Image cap
Titill korts

Þetta er stutt kort.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni.

Placeholder Image cap
Titill korts

Þetta er lengra spjald með stuðningstexta hér að neðan sem eðlileg leið að viðbótarefni. Þetta efni er aðeins lengra.

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

Rétt eins og með kortahópa munu fætur korta sjálfkrafa raðast upp.

Placeholder Image cap
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta efni er aðeins lengra.

Síðast uppfært fyrir 3 mínútum
Placeholder Image cap
Titill korts

Þetta spjald er með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni.

Síðast uppfært fyrir 3 mínútum
Placeholder Image cap
Titill korts

Þetta er breiðara spjald með stuðningstexta hér að neðan sem náttúrulega leið að viðbótarefni. Þetta kort hefur jafnvel lengra innihald en það fyrsta sem sýnir sömu hæðaraðgerðina.

Síðast uppfært fyrir 3 mínútum 
<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>

Múrverk

Í v4við notuðum aðeins CSS tækni til að líkja eftir hegðun múrsteinslíkra dálka, en þessari tækni fylgdi fullt af óþægilegum aukaverkunum . Ef þú vilt hafa þessa tegund af skipulagi í v5, geturðu bara notað Masonry viðbótina. Múrverk er ekki innifalið í Bootstrap , en við höfum gert sýnidæmi til að hjálpa þér að byrja.

Sass

Breytur

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