Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Mga kard

Ang mga kard sa Bootstrap naghatag og usa ka flexible ug extensible nga sulud sa sulud nga adunay daghang mga variant ug kapilian.

Niini nga panid

Mahitungod sa

Ang kard usa ka flexible ug extensible nga sulud sa sulud. Naglakip kini sa mga kapilian alang sa mga header ug footer, daghang lainlain nga sulud, kolor sa background sa konteksto, ug kusgan nga mga kapilian sa pagpakita. Kung pamilyar ka sa Bootstrap 3, ang mga kard mopuli sa among daan nga mga panel, atabay, ug mga thumbnail. Ang parehas nga pag-andar sa mga sangkap magamit ingon mga klase sa modifier alang sa mga kard.

Pananglitan

Gitukod ang mga kard nga adunay gamay nga markup ug mga istilo kutob sa mahimo, apan nagdumala gihapon nga maghatag usa ka tonelada nga kontrol ug pag-customize. Gitukod gamit ang flexbox, nagtanyag sila dali nga pag-align ug maayo ang pagsagol sa ubang mga sangkap sa Bootstrap. Wala sila marginpinaagi sa default, busa gamita ang mga gamit sa spacing kung gikinahanglan.

Sa ubos usa ka pananglitan sa usa ka sukaranan nga kard nga adunay managsama nga sulud ug usa ka gitakda nga gilapdon. Ang mga kard walay gitakdang gilapdon sa pagsugod, mao nga natural nilang pun-on ang tibuok gilapdon sa elemento sa ginikanan niini. Kini dali nga ipasibo sa among lainlaing mga kapilian sa pagsukod .

Placeholder Image cap
Titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Lakaw sa usa ka dapit
html 
<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>

Mga tipo sa sulud

Gisuportahan sa mga kard ang daghang lainlain nga sulud, lakip ang mga imahe, teksto, mga grupo sa lista, mga link, ug uban pa. Sa ubos mao ang mga pananglitan sa kung unsa ang gisuportahan.

Lawas

Ang building block sa usa ka kard mao ang .card-body. Gamita kini bisan kanus-a nimo kinahanglan ang usa ka seksyon nga adunay pad sa sulod sa usa ka kard.

Kini usa ka teksto sulod sa usa ka card body.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Mga titulo, teksto, ug mga link

Ang mga titulo sa kard gigamit pinaagi sa pagdugang .card-titlesa usa ka <h*>tag. Sa samang paagi, ang mga link gidugang ug gibutang sunod sa usag usa pinaagi sa pagdugang .card-linksa usa ka <a>tag.

Ang mga subtitle gigamit pinaagi sa pagdugang ug usa .card-subtitleka <h*>tag. Kung ang .card-titleug ang mga .card-subtitleaytem ibutang sa usa ka .card-bodyaytem, ​​ang titulo sa kard ug subtitle maayo nga pagkahan-ay.

Titulo sa kard
Subtitle sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Link sa kard Laing link
html 
<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>

Mga larawan

.card-img-topibutang ang usa ka imahe sa ibabaw sa kard. Uban sa .card-text, ang teksto mahimong idugang sa kard. Ang teksto sa sulod .card-textmahimo usab nga i-istilo gamit ang standard nga mga tag sa HTML.

Placeholder Image cap

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

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

Ilista ang mga grupo

Paghimo og mga lista sa sulod sa usa ka kard nga adunay flush list nga grupo.

  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
html 
<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>
Gipakita
  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
html 
<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>
  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
Footer sa kard
html 
<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>

Lababo sa kusina

Pagsagol ug pagpares sa daghang mga tipo sa sulud aron mahimo ang kard nga imong kinahanglan, o ihulog ang tanan didto. Gipakita sa ubos ang mga istilo sa imahe, mga bloke, mga istilo sa teksto, ug usa ka grupo sa lista-tanan giputos sa usa ka fixed-width nga kard.

Placeholder Image cap
Titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

  • Usa ka butang
  • Ikaduha nga butang
  • Usa ka ikatulo nga butang
Link sa kard Laing link
html 
<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>

Pagdugang og opsyonal nga header ug/o footer sulod sa usa ka card.

Gipakita
Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
html 
<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>

Ang mga ulohan sa kard mahimong i-istilo pinaagi sa pagdugang .card-headersa <h*>mga elemento.

Gipakita
Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
html 
<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>
Kinutlo

Usa ka ilado nga kinutlo, nga anaa sa elemento sa blockquote.

Usa ka tawo nga bantog sa Source Title
html 
<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>
Gipakita
Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
2 ka adlaw ang milabay
html 
<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>

Pagsukod

Ang mga kard nagtuo nga walay espesipiko widthnga magsugod, mao nga sila mahimong 100% ang gilapdon gawas kung gipahayag. Mahimo nimo kini usbon kung gikinahanglan gamit ang custom CSS, grid classes, grid Sass mixins, o utilities.

Paggamit sa grid markup

Gamit ang grid, iputos ang mga kard sa mga kolum ug mga laray kon gikinahanglan.

Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
html 
<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>

Paggamit sa mga utilities

Gamita ang among pipila ka magamit nga mga kagamitan sa pagsukod aron dali nga mabutang ang gilapdon sa usa ka kard.

Titulo sa kard

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Butang
Titulo sa kard

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

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

Gamit ang custom CSS

Gamita ang custom CSS sa imong mga stylesheet o isip inline nga mga estilo para magbutang ug gilapdon.

Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
html 
<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>

Pag-align sa teksto

Mahimo nimong mabag-o dayon ang pag-align sa teksto sa bisan unsang kard—sa kinatibuk-an o piho nga mga bahin—uban sa among mga klase sa pagpahiangay sa teksto .

Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
html 
<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>

Idugang ang pipila ka nabigasyon sa header (o block) sa usa ka card gamit ang nav component sa Bootstrap .

Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
html 
<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>
Espesyal nga pagtambal sa titulo

Uban sa pagsuporta sa teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Lakaw sa usa ka dapit
html 
<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>

Mga larawan

Ang mga kard naglakip sa pipila ka mga kapilian sa pagtrabaho sa mga imahe. Pagpili gikan sa pagdugang sa "mga takup sa imahe" sa bisan asa nga tumoy sa usa ka kard, pag-overlay sa mga imahe nga adunay sulud sa kard, o yano nga pag-embed sa imahe sa usa ka kard.

Mga takup sa imahe

Sama sa mga header ug footer, ang mga card mahimong maglakip sa ibabaw ug ubos nga "mga takup sa imahe" -mga hulagway sa ibabaw o ubos sa usa ka kard.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Katapusang gi-update 3 ka minuto ang milabay

Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Katapusang gi-update 3 ka minuto ang milabay

Placeholder Image cap
html 
<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>

Mga overlay sa imahe

Himoang background sa kard ang imahe ug i-overlay ang teksto sa imong kard. Depende sa imahe, mahimo nimo o dili kinahanglan ang dugang nga mga istilo o kagamitan.

Placeholder Card image
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Katapusang gi-update 3 ka minuto ang milabay

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Timan-i nga ang sulod kinahanglang dili mas dako kay sa gitas-on sa hulagway. Kung ang sulud mas dako kaysa sa imahe ang sulud ipakita sa gawas sa imahe.

Pahigda

Gamit ang kombinasyon sa grid ug utility nga mga klase, ang mga kard mahimong himoong pinahigda sa mobile-friendly ug responsive nga paagi. Sa panig-ingnan sa ubos, among gitangtang ang grid gutters .g-0ug gigamit ang .col-md-*mga klase aron himuon nga pinahigda ang kard sa mdbreakpoint. Mahimong gikinahanglan ang dugang nga mga kausaban depende sa sulod sa imong card.

Placeholder Image
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Katapusang gi-update 3 ka minuto ang milabay

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

Mga estilo sa kard

Ang mga kard naglakip sa lainlaing mga kapilian alang sa pag-customize sa ilang mga background, mga utlanan, ug kolor.

Background ug kolor

Gidugang sa v5.2.0

Pagbutang og usa background-colornga adunay kalainan sa atubangan colorsa among mga .text-bg-{color}katabang . Kaniadto gikinahanglan nga mano-mano nga ipares ang imong gipili .text-{color}ug mga .bg-{color}gamit alang sa pag-istilo, nga mahimo nimong gamiton kung gusto nimo.

Ulohan
Panguna nga titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Ikaduha nga titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Ang titulo sa kard sa kalampusan

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa kard sa peligro

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa warning card

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa info card

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa light card

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa itom nga kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

html 
<div class="card text-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-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-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-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-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-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-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-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>
Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

Border

Gamita ang mga gamit sa utlanan aron mabag-o lang ang border-colorusa ka kard. Timan-i nga mahimo nimong ibutang ang .text-{color}mga klase sa ginikanan .cardo usa ka subset sa mga sulud sa kard sama sa gipakita sa ubos.

Ulohan
Panguna nga titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Ikaduha nga titulo sa kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Ang titulo sa kard sa kalampusan

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa kard sa peligro

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa warning card

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa info card

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa light card

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

Ulohan
Titulo sa itom nga kard

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

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

Mga gamit sa Mixins

Mahimo usab nimo nga usbon ang mga utlanan sa header ug footer sa kard kung gikinahanglan, ug bisan pa tangtangon kini background-colorsa .bg-transparent.

Ulohan
Ang titulo sa kard sa kalampusan

Pipila ka dali nga pananglitan nga teksto aron matukod sa titulo sa kard ug maghimo sa kadaghanan sa sulud sa kard.

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

Layout sa kard

Dugang sa pag-istilo sa sulod sulod sa mga kard, ang Bootstrap naglakip sa pipila ka mga kapilian sa pagpahimutang sa mga serye sa mga kard. Sa pagkakaron, kini nga mga kapilian sa layout dili pa mosanong .

Mga grupo sa kard

Gamita ang mga grupo sa kard aron i-render ang mga kard isip usa ka elemento nga adunay managsama nga gilapdon ug gitas-on nga mga kolum. Ang mga grupo sa kard nagsugod sa pag-stack ug gigamit display: flex;aron madugtong sa uniporme nga mga sukat sugod sa smbreakpoint.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Katapusang gi-update 3 ka minuto ang milabay

Placeholder Image cap
Titulo sa kard

Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Katapusang gi-update 3 ka minuto ang milabay

Placeholder Image cap
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga kard adunay mas taas nga sulud kaysa sa una nga nagpakita sa parehas nga gitas-on nga aksyon.

Katapusang gi-update 3 ka minuto ang milabay

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

Kung mogamit mga grupo sa kard nga adunay mga footer, ang ilang sulud awtomatiko nga maglinya.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Katapusang gi-update 3 ka minuto ang milabay
Placeholder Image cap
Titulo sa kard

Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Katapusang gi-update 3 ka minuto ang milabay
Placeholder Image cap
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga kard adunay mas taas nga sulud kaysa sa una nga nagpakita sa parehas nga gitas-on nga aksyon.

Katapusang gi-update 3 ka minuto ang milabay
html 
<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>

Mga kard sa grid

Gamita ang Bootstrap grid system ug ang mga .row-colsklase niini aron makontrol kung pila ka grid column (giputos sa imong mga kard) ang imong gipakita kada laray. Pananglitan, ania ang .row-cols-1pagbutang sa mga kard sa usa ka kolum, ug .row-cols-md-2pagbahin sa upat ka mga kard sa parehas nga gilapdon sa daghang mga laray, gikan sa medium nga breakpoint pataas.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

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

Usba kini .row-cols-3ug imong makita ang ikaupat nga balot sa kard.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

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

Kung kinahanglan nimo ang parehas nga gitas-on, idugang .h-100sa mga kard. Kung gusto nimo ang parehas nga gitas-on pinaagi sa default, mahimo nimong ibutang $card-height: 100%sa Sass.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Placeholder Image cap
Titulo sa kard

Kini usa ka mubo nga kard.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas taas nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

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

Sama sa mga grupo sa kard, ang mga footer sa kard awtomatikong maglinya.

Placeholder Image cap
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga sulod mas taas og gamay.

Katapusang gi-update 3 ka minuto ang milabay
Placeholder Image cap
Titulo sa kard

Kini nga kard adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud.

Katapusang gi-update 3 ka minuto ang milabay
Placeholder Image cap
Titulo sa kard

Kini usa ka mas lapad nga kard nga adunay suporta nga teksto sa ubos ingon usa ka natural nga lead-in sa dugang nga sulud. Kini nga kard adunay mas taas nga sulud kaysa sa una nga nagpakita sa parehas nga gitas-on nga aksyon.

Katapusang gi-update 3 ka minuto ang milabay
html 
<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

Sa v4among gigamit ang usa ka CSS-only nga teknik sa pagsundog sa kinaiya sa Masonry - like columns, apan kini nga teknik adunay daghang dili maayo nga epekto . Kung gusto nimo nga adunay kini nga klase sa layout sa v5, mahimo nimo gamiton ang Masonry plugin. Ang Masonry wala gilakip sa Bootstrap , apan naghimo kami usa ka pananglitan sa demo aron matabangan ka nga makasugod.

CSS

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga card karon naggamit sa lokal nga CSS variables .cardalang sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass variables

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;