Kortit

Bootstrapin kortit tarjoavat joustavan ja laajennettavan sisältösäiliön, jossa on useita muunnelmia ja vaihtoehtoja.

Noin

Kortti on joustava ja laajennettava sisältösäiliö. Se sisältää vaihtoehtoja ylä- ja alatunnisteille, laajan valikoiman sisältöä, kontekstuaalisia taustavärejä ja tehokkaita näyttövaihtoehtoja. Jos Bootstrap 3 on sinulle tuttu, kortit korvaavat vanhat paneelimme, kuopat ja pikkukuvamme. Näitä komponentteja vastaavat toiminnot ovat saatavilla korttien modifiointiluokina.

Esimerkki

Kortit on rakennettu mahdollisimman pienellä merkinnällä ja tyyleillä, mutta ne tarjoavat silti paljon hallintaa ja mukauttamista. Ne on rakennettu flexboxilla, ja ne tarjoavat helpon kohdistuksen ja sekoittuvat hyvin muiden Bootstrap-komponenttien kanssa. Niissä ei ole marginoletuksena, joten käytä välilyöntejä tarpeen mukaan.

Alla on esimerkki peruskortista, jossa on sekoitettu sisältö ja kiinteä leveys. Korteilla ei ole kiinteää aloitusleveyttä, joten ne täyttävät luonnollisesti koko pääelementin leveyden. Tämä on helposti räätälöitävissä erilaisilla kokovaihtoehdoillamme .

Kortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Mennä jonnekin

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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>

Sisältötyypit

Kortit tukevat monenlaista sisältöä, kuten kuvia, tekstiä, luetteloryhmiä, linkkejä ja paljon muuta. Alla on esimerkkejä tuetuista asioista.

Runko

Kortin rakennuspalikka on .card-body. Käytä sitä aina, kun tarvitset pehmustetun osan kortissa.

Tämä on tekstiä kortin rungossa.

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

Otsikot, tekstit ja linkit

Korttien otsikoita käytetään lisäämällä .card-titletunnisteeseen <h*>. Samalla tavalla linkit lisätään ja sijoitetaan vierekkäin lisäämällä .card-linktunnisteeseen <a>.

Tekstityksiä käytetään lisäämällä .card-subtitletunnisteeseen <h*>. Jos .card-titleja .card-subtitlekohteet sijoitetaan .card-bodykohteeseen, kortin otsikko ja alaotsikko on kohdistettu kauniisti.

Kortin otsikko

Kortin tekstitys

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Korttilinkki Toinen linkki

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

Kuvat

.card-img-topasettaa kuvan kortin yläosaan. -painikkeella .card-textkorttiin voidaan lisätä tekstiä. Sisäinen teksti .card-textvoidaan myös muotoilla tavallisilla HTML-tageilla.

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Listaa ryhmät

Luo sisältöluetteloita kortille tyhjennysluetteloryhmällä.

Cras justo odio
Dapibus ac facilisis sisään
Vestibulum ja 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>

Esittelyssä

Cras justo odio
Dapibus ac facilisis sisään
Vestibulum ja 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>

Tiskiallas

Yhdistele useita sisältötyyppejä luodaksesi tarvitsemasi kortin tai laita kaikki sinne. Alla näkyvät kuvatyylit, lohkot, tekstityylit ja luetteloryhmä – kaikki käärittynä kiinteän leveyden korttiin.

Kortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Cras justo odio
Dapibus ac facilisis sisään
Vestibulum ja eros

Korttilinkki Toinen linkki

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Ylä-ja alatunniste

Lisää valinnainen ylä- ja/tai alatunniste korttiin.

Esittelyssä

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

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

Kortin otsikoita voidaan muokata lisäämällä .card-headerelementteihin <h*>.

Esittelyssä

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

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

Lainata

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.

Joku kuuluisa lähdeotsikossa

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

Esittelyssä

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

2 päivää sitten

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

Mitoitus

Kortit eivät ole erityisen widthalkavia, joten ne ovat 100 % leveitä, ellei toisin mainita. Voit muuttaa tätä tarpeen mukaan mukautetuilla CSS:illä, grid-luokilla, grid Sass -sekoituksilla tai apuohjelmilla.

Käytä ruudukkomerkintää

Kääri kortit ruudukon avulla sarakkeisiin ja riveihin tarpeen mukaan.

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

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

Apuohjelmien käyttö

Käytä kourallista käytettävissä olevia mitoitusapuohjelmia asettaaksesi kortin leveyden nopeasti.

Kortin otsikko

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Painike

Kortin otsikko

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Painike

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

Mukautetun CSS:n käyttö

Käytä mukautettua CSS:ää tyylitaulukoissasi tai upotettuina tyyleinä leveyden määrittämiseen.

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

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

Tekstin tasaus

Voit nopeasti muuttaa minkä tahansa kortin tekstin tasausta – kokonaisuudessaan tai tietyissä osissa – tekstin tasausluokillamme .

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

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

Lisää navigointia kortin otsikkoon (tai lohkoon) Bootstrapin navigointikomponenteilla .

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

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

Erityinen otsikkokäsittely

Alla tukiteksti luonnollisena johdatuksena lisäsisältöön.

Mennä jonnekin

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

Kuvat

Kortit sisältävät muutamia vaihtoehtoja kuvien käsittelyyn. Valitse joko "kuvasuojan" lisääminen kortin kumpaankin päähän, kuvien peittäminen kortin sisällön kanssa tai yksinkertaisesti kuvan upottaminen korttiin.

Kuvakorkit

Kuten ylä- ja alatunnisteet, kortit voivat sisältää ylä- ja alareunan "kuvasuojat" eli kuvat kortin ylä- tai alaosassa.

Kortin otsikko

Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Viimeksi päivitetty 3 minuuttia sitten

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

Peittokuvat

Muuta kuva kortin taustaksi ja peitä korttisi teksti. Kuvasta riippuen saatat tarvita tai et tarvitse lisätyylejä tai apuohjelmia.

Kortin otsikko

Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Viimeksi päivitetty 3 minuuttia sitten

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>

Korttityylit

Kortit sisältävät erilaisia vaihtoehtoja taustan, reunusten ja värin mukauttamiseen.

Tausta ja väri

Käytä teksti- ja taustaapuohjelmia muuttaaksesi kortin ulkoasua.

Otsikko

Ensisijainen kortin nimi

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Toissijaisen kortin nimi

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Menestyskortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Vaarakortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Varoituskortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Tietokortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Kevyen kortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Tumman kortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

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

Avustavan tekniikan merkityksen välittäminen

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .sr-onlyluokan mukana piilotettu lisäteksti.

Raja

Käytä raja-apuohjelmia muuttaaksesi vain border-colorkortin muotoa. Huomaa, että voit lisätä .text-{color}luokkia ylätason .cardtai kortin sisällön osajoukkoon alla olevan kuvan mukaisesti.

Otsikko

Ensisijainen kortin nimi

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Toissijaisen kortin nimi

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Menestyskortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Vaarakortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Varoituskortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Tietokortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Kevyen kortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Otsikko

Tumman kortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

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

Voit myös muuttaa kortin ylä- ja alatunnisteen reunoja tarpeen mukaan ja jopa poistaa ne background-color-painikkeella .bg-transparent.

Otsikko

Menestyskortin otsikko

Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.

Alatunniste

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

Kortin asettelu

Korttien sisällön muotoilun lisäksi Bootstrap sisältää muutamia vaihtoehtoja korttisarjan asettamiseen. Toistaiseksi nämä asetteluvaihtoehdot eivät ole vielä reagoivia .

Korttiryhmät

Käytä korttiryhmiä renderöidäksesi kortit yhdeksi liitetyksi elementiksi, jonka sarakkeet ovat yhtä leveitä ja korkeita. Korttiryhmät käyttävät display: flex;saavuttaakseen yhtenäisen kokonsa.

Kortin otsikko

Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tässä kortissa on jopa pidempi sisältö kuin ensimmäisessä, joka näyttää samankorkeuden toiminnon.

Viimeksi päivitetty 3 minuuttia sitten

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Kun käytät alatunnisteilla varustettuja korttiryhmiä, niiden sisältö asettuu automaattisesti riviin.

Kortin otsikko

Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Viimeksi päivitetty 3 minuuttia sitten

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Korttipakat

Tarvitsetko joukon yhtä leveitä ja korkeita kortteja, joita ei ole kiinnitetty toisiinsa? Käytä korttipakkaa.

Kortin otsikko

Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Viimeksi päivitetty 3 minuuttia sitten

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

Aivan kuten korttiryhmissä, korttien alatunnisteet asettuvat automaattisesti riviin.

Kortin otsikko

Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.

Viimeksi päivitetty 3 minuuttia sitten

Kortin otsikko

Viimeksi päivitetty 3 minuuttia sitten

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Kortin sarakkeet

Kortit voidaan järjestää muurauksen kaltaisiin sarakkeisiin vain CSS:llä käärimällä ne .card-columns. Kortit on rakennettu CSS column-ominaisuuksilla flexboxin sijaan kohdistamisen helpottamiseksi. Kortit järjestetään ylhäältä alas ja vasemmalta oikealle.

Varoitus! Kilometrimääräsi korttisarakkeilla voi vaihdella. Estäksemme korttien rikkoutumista sarakkeiden yli, meidän on asetettava ne tilaan, display: inline-blockkoska column-break-inside: avoidse ei ole vielä luodinkestävä ratkaisu.

Kortin otsikko, joka rivittyy uudelle riville

Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.

Joku kuuluisa lähdeotsikossa

Kortin otsikko

Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.

Viimeksi päivitetty 3 minuuttia sitten

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

Joku kuuluisa lähdeotsikossa

Kortin otsikko

Tässä kortissa on tavallinen otsikko ja lyhyt tekstikappale sen alla.

Viimeksi päivitetty 3 minuuttia sitten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.

Joku kuuluisa lähdeotsikossa

Kortin otsikko

Tämä on toinen kortti, jonka alla on otsikko ja tukiteksti. Tässä kortissa on lisäsisältöä, joka tekee siitä hieman korkeamman.

Viimeksi päivitetty 3 minuuttia sitten

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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>

Korttisarakkeita voidaan myös laajentaa ja mukauttaa lisäkoodilla. Alla on .card-columnsluokan laajennus, joka käyttää samaa CSS:ää, jota käytämme – CSS-sarakkeita – luomaan joukon responsiivisia tasoja sarakkeiden lukumäärän muuttamista varten.

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

Kortit

Noin

Esimerkki

Kortin otsikko

Sisältötyypit

Runko

Otsikot, tekstit ja linkit

Kortin otsikko

Kortin tekstitys

Kuvat

Listaa ryhmät

Tiskiallas

Kortin otsikko

Ylä-ja alatunniste

Erityinen otsikkokäsittely

Esittelyssä

Erityinen otsikkokäsittely

Erityinen otsikkokäsittely

Mitoitus

Käytä ruudukkomerkintää

Erityinen otsikkokäsittely

Erityinen otsikkokäsittely

Apuohjelmien käyttö

Kortin otsikko

Kortin otsikko

Mukautetun CSS:n käyttö

Erityinen otsikkokäsittely

Tekstin tasaus

Erityinen otsikkokäsittely

Erityinen otsikkokäsittely

Erityinen otsikkokäsittely

Navigointi

Erityinen otsikkokäsittely

Erityinen otsikkokäsittely

Kuvat

Kuvakorkit

Kortin otsikko

Kortin otsikko

Peittokuvat

Kortin otsikko

Korttityylit

Tausta ja väri

Ensisijainen kortin nimi

Toissijaisen kortin nimi

Menestyskortin otsikko

Vaarakortin otsikko

Varoituskortin otsikko

Tietokortin otsikko

Kevyen kortin otsikko

Tumman kortin otsikko

Avustavan tekniikan merkityksen välittäminen

Raja

Ensisijainen kortin nimi

Toissijaisen kortin nimi

Menestyskortin otsikko

Vaarakortin otsikko

Varoituskortin otsikko

Tietokortin otsikko

Kevyen kortin otsikko

Tumman kortin otsikko

Mixins apuohjelmat

Menestyskortin otsikko

Kortin asettelu

Korttiryhmät

Kortin otsikko

Kortin otsikko

Kortin otsikko

Kortin otsikko

Kortin otsikko

Kortin otsikko

Korttipakat

Kortin otsikko

Kortin otsikko

Kortin otsikko

Kortin otsikko

Kortin otsikko

Kortin otsikko

Kortin sarakkeet

Kortin otsikko, joka rivittyy uudelle riville

Kortin otsikko