Source

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 .

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
  <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.

Myndalok [100%x180]

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 class="card-img-top" src="..." alt="Card image cap">
  <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.

Myndalok [100%x180]
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 class="card-img-top" src="..." alt="Card image cap">
  <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>

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

100%x180
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

100%x180 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</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.

100%x270
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 class="card-img" src="..." alt="Card image">
  <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>

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.

100%x180
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

100%x180
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

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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öð.

100%x180
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
100%x180
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
100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x200
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.

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

100%x200
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

100%x200
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x180
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
100%x180
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
100%x180
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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

100%x160
Titill spjalds sem rennur inn í nýja línu

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

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

Einhver frægur í Source Title
100%x160
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

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

Einhver frægur í Source Title
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

100%x260

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

Einhver frægur í Source Title
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

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