Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
in English

Kaardid

Bootstrapi kaardid pakuvad paindlikku ja laiendatavat sisukonteinerit mitme variandi ja valikuga.

Sellel lehel

Umbes

Kaart on paindlik ja pikendatav sisukonteiner. See sisaldab päiste ja jaluste valikuid, laia valikut sisu, kontekstipõhiseid taustavärve ja võimsaid kuvavalikuid. Kui olete Bootstrap 3-ga tuttav, asendavad kaardid meie vanad paneelid, süvendid ja pisipildid. Nende komponentidega sarnane funktsionaalsus on saadaval kaartide modifikaatoriklassidena.

Näide

Kaardid on ehitatud võimalikult väikese märgistuse ja stiilidega, kuid suudavad siiski pakkuda palju juhtimis- ja kohandamisvõimalusi. Flexboxiga ehitatud need pakuvad lihtsat joondamist ja segunevad hästi teiste Bootstrapi komponentidega. Vaikimisi neil puudub margin, seega kasutage vajadusel vaheutiliite .

Allpool on näide segasisu ja fikseeritud laiusega põhikaardist. Kaartidel ei ole alustamiseks fikseeritud laiust, seega täidavad need loomulikult kogu emaelemendi laiuse. Seda on lihtne kohandada meie erinevate suurusvalikutega .

Placeholder Image cap
Kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

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

Sisu tüübid

Kaardid toetavad laia valikut sisu, sealhulgas pilte, teksti, loendirühmi, linke ja palju muud. Allpool on näited selle kohta, mida toetatakse.

Keha

Kaardi ehitusplokk on .card-body. Kasutage seda alati, kui vajate kaardil polsterdatud osa.

See on tekst kaardi kehas. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Pealkirjad, tekst ja lingid

Kaartide pealkirju kasutatakse sildi .card-titlelisamisel . <h*>Samamoodi lisatakse lingid ja asetatakse need kõrvuti sildi .card-linklisamisega .<a>

Subtiitreid kasutatakse märgendile .card-subtitlea lisamisel. <h*>Kui üksused .card-titleja .card-subtitleüksused on üksusesse paigutatud .card-body, on kaardi pealkiri ja alapealkiri kenasti joondatud.

Kaardi pealkiri
Kaardi alapealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Kaardi link Teine link 
<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>

Pildid

.card-img-topasetab pildi kaardi ülaossa. Funktsiooniga .card-textsaab kaardile teksti lisada. Teksti .card-textsaab kujundada ka standardsete HTML-märgendite abil.

Placeholder Image cap

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

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

Loetlege rühmad

Looge kaardil sisuloendeid loputusloendi rühmaga.

  • Asi
  • Teine ese
  • Kolmas ese
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Esiletõstetud
  • Asi
  • Teine ese
  • Kolmas ese
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Asi
  • Teine ese
  • Kolmas ese
Kaardi jalus 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

Köögikraanikauss

Segage ja sobitage mitut tüüpi sisu, et luua vajalik kaart või visake sinna kõik. Allpool on näidatud pildistiilid, plokid, tekstistiilid ja loendirühm – kõik mähitud fikseeritud laiusega kaardile.

Placeholder Image cap
Kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

  • Asi
  • Teine ese
  • Kolmas ese
Kaardi link Teine link 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Lisage kaardile valikuline päis ja/või jalus.

Esiletõstetud
Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

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

Kaardi päiseid saab elementidele .card-headerlisades stiilida.<h*>

Esiletõstetud
Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi 
<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>
Tsiteeri

Tuntud tsitaat, mis sisaldub blockquote elemendis.

Keegi kuulus allika pealkirjas 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Esiletõstetud
Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi
2 päeva tagasi 
<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>

Suuruse määramine

Kaardid eeldavad width, et alustamiseks pole konkreetset, seega on need 100% laiad, kui pole märgitud teisiti. Saate seda vastavalt vajadusele muuta kohandatud CSS-i, ruudustikuklasside, grid Sassi segude või utiliitidega.

Võrgumärgistuse kasutamine

Kasutades ruudustikku, mähkige kaardid vastavalt vajadusele veergudesse ja ridadesse.

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi
Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

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

Kommunaalteenuste kasutamine

Kaardi laiuse kiireks määramiseks kasutage meie käputäis saadaolevaid suuruse määramise utiliite .

Kaardi pealkiri

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Nupp
Kaardi pealkiri

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

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

Kohandatud CSS-i kasutamine

Kasutage kohandatud CSS-i oma stiililehtedel või laiuse määramiseks tekstisiseste stiilidena.

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

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

Teksti joondamine

Meie teksti joondusklasside abil saate kiiresti muuta mis tahes kaardi teksti joondust – tervikuna või teatud osades .

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi
Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi
Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Lisage Bootstrapi navigeerimiskomponentide abil kaardi päisesse (või plokki) navigeerimisvõimalust .

Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

Mine kuhugi 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">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>
Spetsiaalne tiitlitöötlus

Koos alloleva tugitekstiga, mis on loomulik juhatus lisasisu juurde.

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

Pildid

Kaardid sisaldavad mõningaid võimalusi piltidega töötamiseks. Saate valida, kas lisada kaardi mõlemale otsale „pildipealsed”, katta pildid kaardi sisuga või manustada pilt lihtsalt kaardile.

Pildikorgid

Sarnaselt päistele ja jalustele võivad kaardid sisaldada ülemist ja alumist "kujutist" – kujutisi kaardi üla- või alaosas.

Placeholder Image cap
Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

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

Pildi ülekatted

Muutke pilt kaardi taustaks ja katke oma kaardi tekst. Olenevalt pildist võib või ei pruugi te vajada täiendavaid stiile või utiliite.

Placeholder Card image
Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

<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>
Pange tähele, et sisu ei tohiks olla suurem kui pildi kõrgus. Kui sisu on pildist suurem, kuvatakse sisu väljaspool pilti.

Horisontaalne

Kasutades ruudustiku ja kasuliku klasside kombinatsiooni, saab kaardid muuta horisontaalseks mobiilisõbralikul ja reageerimisvõimelisel viisil. Allolevas näites eemaldame ruudustiku vihmaveerennid .g-0ja kasutame klasse, et muuta kaart murdepunktis .col-md-*horisontaalseks . mdOlenevalt teie kaardi sisust võib vaja minna täiendavaid kohandusi.

Placeholder Image
Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Kaardi stiilid

Kaardid sisaldavad erinevaid võimalusi nende tausta, ääriste ja värvi kohandamiseks.

Taust ja värv

Kasutage kaardi välimuse muutmiseks teksti värvi ja tausta utiliite .

Päis
Peamine kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Teisese kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Edukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Ohukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Hoiatuskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Infokaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Valguskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Tume kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Piir

Kasutage piiride utiliite , et muuta ainult border-colorkaardi sisu. Pange tähele, et saate .text-{color}klasse lisada vanemale .cardvõi kaardi sisu alamhulgale, nagu allpool näidatud.

Päis
Peamine kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Teisese kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Edukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Ohukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Hoiatuskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Infokaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Valguskaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

Päis
Tume kaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins kommunaalteenused

Samuti saate vastavalt vajadusele muuta kaardi päise ja jaluse ääriseid ning neid isegi eemaldada background-colornupuga .bg-transparent.

Päis
Edukaardi pealkiri

Mõni kiire näidistekst, mis põhineb kaardi pealkirjal ja moodustab suurema osa kaardi sisust.

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

Kaardi paigutus

Lisaks kaartide sisu kujundamisele sisaldab Bootstrap mõningaid võimalusi kaartide seeriate paigutamiseks. Praegu need paigutusvalikud veel ei reageeri .

Kaardirühmad

Kasutage kaardirühmi, et renderdada kaardid ühe kinnitatud elemendina võrdse laiuse ja kõrgusega veergudega. Kaardirühmad algavad virnastatuna ja display: flex;neid kasutatakse ühtsete mõõtmetega kinnitamiseks alates smkatkestuspunktist.

Placeholder Image cap
Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi

Placeholder Image cap
Kaardi pealkiri

Sellel kaardil on allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi

Placeholder Image cap
Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. Sellel kaardil on isegi pikem sisu kui esimesel, mis näitab seda võrdse kõrgusega tegevust.

Viimati värskendatud 3 minutit tagasi

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

Jalustega kaardirühmade kasutamisel reastub nende sisu automaatselt.

Placeholder Image cap
Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Viimati värskendatud 3 minutit tagasi
Placeholder Image cap
Kaardi pealkiri

Sellel kaardil on allpool toetav tekst, mis on loomuliku lisasisu juurde.

Viimati värskendatud 3 minutit tagasi
Placeholder Image cap
Kaardi pealkiri

See on laiem kaart, mille all on toetav tekst loomuliku lisasisu juurde. Sellel kaardil on isegi pikem sisu kui esimesel, mis näitab seda võrdse kõrgusega tegevust.

Viimati värskendatud 3 minutit tagasi 
<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>

Võrgukaardid

Kasutage Bootstrapi ruudustikusüsteemi ja selle .row-colsklasse , et juhtida, mitu ruudustiku veergu (mis on ümbritsetud teie kaartidega) ühe rea kohta kuvatakse. Näiteks siin on .row-cols-1kaartide paigutamine ühte veergu ja .row-cols-md-2nelja kaardi jagamine võrdseks laiuseks mitme rea vahel, alates keskmisest katkestuspunktist ülespoole.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Muutke see .row-cols-3ja näete neljandat kaardiümbrist.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Kui vajate võrdset kõrgust, lisage .h-100kaartidele. Kui soovite vaikimisi võrdseid kõrgusi, saate määrata $card-height: 100%Sassis.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

Placeholder Image cap
Kaardi pealkiri

See on lühike kaart.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde.

Placeholder Image cap
Kaardi pealkiri

See on pikem kaart, mille all on toetav tekst loomuliku lisasisu juurde. See sisu on veidi pikem.

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Sarnaselt kaardirühmadega joonduvad kaartide jalused automaatselt.

Placeholder Image cap
Kaardi pealkiri

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Placeholder Image cap
Card title

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.

Last updated 3 mins ago 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

In v4 we used a CSS-only technique to mimic the behavior of Masonry-like columns, but this technique came with lots of unpleasant side effects. If you want to have this type of layout in v5, you can just make use of Masonry plugin. Masonry is not included in Bootstrap, but we’ve made a demo example to help you get started.

Sass

Variables

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;