Spil

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

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 .

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

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.

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

Valið

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

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.

Titill korts

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

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

Haus og fótur

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title

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

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 hvers korts – í 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-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>

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" 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 korts, 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ð „myndahúfur“ efst og neðst - myndir efst eða neðst á kortinu.

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

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-top" alt="...">
</div>

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.

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ð .no-guttersog notum .col-md-*flokka til að gera kortið lárétt við mdbrotpunktinn. Frekari lagfæringar gætu verið nauðsynlegar eftir innihaldi kortsins.

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

Kortastíll

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

Bakgrunnur og litur

Notaðu texta- 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-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>

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 í .sr-onlybekknum.

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 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 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 nota display: flex;til að ná samræmdu stærð þeirra.

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

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

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

Titill korts

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>

Kortastokkar

Þarftu sett af jöfnum breidd og hæð kortum sem eru ekki fest við hvert annað? Notaðu spilastokka.

Titill korts

Þetta er lengra 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 spjald hefur 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

Titill korts

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

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

Rétt eins og með kortahópa munu spjaldafótur í stokkum sjálfkrafa raðast upp.

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

Titill korts

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

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

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.

Titill korts

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

Titill korts

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

Titill korts

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

Titill korts

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

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

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

Titill korts

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

Titill korts

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

Titill korts

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

Titill korts

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

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

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

Titill korts

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

Titill korts

Þetta er stutt kort.

Titill korts

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

Titill korts

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

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

Card dálkar

Hægt er að raða spjöldum í múrverkslíka dálka með CSS með því að pakka þeim inn í .card-columns. Kort eru smíðuð með CSS columneiginleika í stað flexbox til að auðvelda röðun. Spilunum er raðað ofan frá og niður og frá vinstri til hægri.

Höfuð upp! Mílufjöldi þinn með kortasúlum getur verið mismunandi. Til að koma í veg fyrir að spjöld brotni yfir dálka verðum við að stilla þau þannig að display: inline-blockþað column-break-inside: avoidsé ekki skotheld lausn ennþá.

Titill spjalds sem rennur inn í nýja línu

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title

Titill korts

Þetta spjald hefur 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

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

Einhver frægur í Source Title

Titill korts

Þetta kort er með venjulegum titli og stuttri textagrein fyrir neðan það.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.

Einhver frægur í Source Title

Titill korts

Þetta er annað kort með titli og stuðningstexta hér að neðan. Þetta kort er með aukaefni til að gera það aðeins hærra í heildina.

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

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

Einnig er hægt að stækka og sérsníða kortadálka með einhverjum viðbótarkóða. Hér að neðan er framlenging á .card-columnsbekknum með því að nota sama CSS og við notum - CSS dálka - til að búa til sett af móttækilegum flokkum til að breyta fjölda dálka.

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

Spil

Um

Dæmi

Titill korts

Efnistegundir

Líkami

Titlar, texti og tenglar

Titill korts

Texti korts

Myndir

Listaðu hópa

Eldhúsvaskur

Titill korts

Haus og fótur

Sérstök titlameðferð

Valið

Sérstök titlameðferð

Sérstök titlameðferð

Stærð

Nota rist merkingu

Sérstök titlameðferð

Sérstök titlameðferð

Að nota tól

Titill korts

Titill korts

Notar sérsniðna CSS

Sérstök titlameðferð

Textajöfnun

Sérstök titlameðferð

Sérstök titlameðferð

Sérstök titlameðferð

Leiðsögn

Sérstök titlameðferð

Sérstök titlameðferð

Myndir

Myndahúfur

Titill korts

Titill korts

Myndyfirlag

Titill korts

Lárétt

Titill korts

Kortastíll

Bakgrunnur og litur

Titill aðalkorts

Heiti aukaspjalds

Titill árangurskorts

Heiti hættukorts

Titill viðvörunarkorts

Titill upplýsingakorts

Titill ljósspjalds

Dökkur nafnspjald

Að miðla merkingu til hjálpartækja

Landamæri

Titill aðalkorts

Heiti aukaspjalds

Titill árangurskorts

Heiti hættukorts

Titill viðvörunarkorts

Titill upplýsingakorts

Titill ljósspjalds

Dökkur nafnspjald

Mixins veitur

Titill árangurskorts

Uppsetning korta

Kortahópar

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Kortastokkar

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Titill korts

Ratkort