Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Mga kard

Nagbibigay ang mga card ng Bootstrap ng nababaluktot at napapalawak na lalagyan ng nilalaman na may maraming variant at opsyon.

Sa pahinang ito

Tungkol sa

Ang card ay isang flexible at extensible na lalagyan ng content. Kabilang dito ang mga opsyon para sa mga header at footer, isang malawak na iba't ibang nilalaman, mga kulay ng background sa konteksto, at mahusay na mga opsyon sa pagpapakita. Kung pamilyar ka sa Bootstrap 3, pinapalitan ng mga card ang aming mga lumang panel, balon, at thumbnail. Ang katulad na pag-andar sa mga bahaging iyon ay magagamit bilang mga klase ng modifier para sa mga card.

Halimbawa

Binuo ang mga card na may kaunting markup at istilo hangga't maaari, ngunit nakakapaghatid pa rin ng isang toneladang kontrol at pag-customize. Binuo gamit ang flexbox, nag-aalok ang mga ito ng madaling pagkakahanay at pinaghalong mabuti sa iba pang mga bahagi ng Bootstrap. Wala silang bilang margindefault, kaya gumamit ng mga spacing utilities kung kinakailangan.

Nasa ibaba ang isang halimbawa ng isang pangunahing card na may halo-halong nilalaman at isang nakapirming lapad. Ang mga card ay walang nakapirming lapad upang magsimula, kaya natural na pupunuin ng mga ito ang buong lapad ng pangunahing elemento nito. Ito ay madaling na-customize sa aming iba't ibang mga pagpipilian sa pagpapalaki .

Placeholder Image cap
Pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Pumunta sa isang lugar
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 uri ng nilalaman

Sinusuportahan ng mga card ang iba't ibang uri ng nilalaman, kabilang ang mga larawan, teksto, mga pangkat ng listahan, mga link, at higit pa. Nasa ibaba ang mga halimbawa ng kung ano ang sinusuportahan.

Katawan

Ang building block ng isang card ay ang .card-body. Gamitin ito sa tuwing kailangan mo ng may palaman na seksyon sa loob ng isang card.

Ito ay ilang text sa loob ng isang card body.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Mga pamagat, teksto, at mga link

Ginagamit ang mga pamagat ng card sa pamamagitan ng pagdaragdag .card-titlesa isang <h*>tag. Sa parehong paraan, ang mga link ay idinaragdag at inilalagay sa tabi ng isa't isa sa pamamagitan ng pagdaragdag .card-linksa isang <a>tag.

Ginagamit ang mga subtitle sa pamamagitan ng pagdaragdag ng a .card-subtitlesa isang <h*>tag. Kung ang .card-titleat ang mga .card-subtitleitem ay inilagay sa isang .card-bodyitem, ang pamagat ng card at subtitle ay maayos na nakahanay.

Pamagat ng card
Subtitle ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Link ng card Isa pang 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 imahe

.card-img-topnaglalagay ng larawan sa itaas ng card. Gamit .card-textang , maaaring idagdag ang text sa card. Ang teksto sa loob .card-textay maaari ding i-istilo gamit ang mga karaniwang HTML na tag.

Placeholder Image cap

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

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>

Maglista ng mga pangkat

Gumawa ng mga listahan ng content sa isang card na may flush list group.

  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
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>
Itinatampok
  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
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>
  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
Footer ng card
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

Paghaluin at pagtugmain ang maraming uri ng nilalaman upang gawin ang card na kailangan mo, o itapon ang lahat doon. Ipinapakita sa ibaba ang mga istilo ng larawan, mga bloke, mga istilo ng teksto, at isang pangkat ng listahan—lahat ay nakabalot sa isang fixed-width na card.

Placeholder Image cap
Pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

  • Isang bagay
  • Ang pangalawang item
  • Pangatlong item
Link ng card Isa pang 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>

Magdagdag ng opsyonal na header at/o footer sa loob ng isang card.

Itinatampok
Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
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>

Maaaring i-istilo ang mga card header sa pamamagitan ng pagdaragdag .card-headersa <h*>mga elemento.

Itinatampok
Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
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>
Quote

Isang kilalang quote, na nasa isang blockquote na elemento.

Isang taong sikat sa Pamagat ng Pinagmulan
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>
Itinatampok
Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
2 araw ang nakalipas
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>

Pagsusukat

Ipinapalagay ng mga card na walang tiyak widthna magsisimula, kaya magiging 100% ang lapad ng mga ito maliban kung iba ang nakasaad. Mababago mo ito kung kinakailangan gamit ang custom na CSS, mga grid class, grid Sass mixin, o mga utility.

Gamit ang grid markup

Gamit ang grid, balutin ang mga card sa mga column at row kung kinakailangan.

Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
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 ng mga utility

Gamitin ang aming kaunting magagamit na mga kagamitan sa pagpapalaki upang mabilis na maitakda ang lapad ng isang card.

Pamagat ng card

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pindutan
Pamagat ng card

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pindutan
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 na CSS

Gumamit ng custom na CSS sa iyong mga stylesheet o bilang mga inline na istilo upang magtakda ng lapad.

Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
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 ng teksto

Mabilis mong mababago ang text alignment ng anumang card—sa kabuuan o partikular na bahagi nito—sa aming mga text align classes .

Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
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>

Magdagdag ng ilang nabigasyon sa header (o block) ng isang card na may mga bahagi ng nav ng Bootstrap .

Espesyal na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
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 na paggamot sa pamagat

Gamit ang pagsuporta sa text sa ibaba bilang natural na lead-in sa karagdagang content.

Pumunta sa isang lugar
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 imahe

Kasama sa mga card ang ilang mga opsyon para sa pagtatrabaho sa mga larawan. Pumili mula sa pagdaragdag ng "mga cap ng larawan" sa magkabilang dulo ng isang card, pag-overlay ng mga larawan na may nilalaman ng card, o pag-embed lamang ng larawan sa isang card.

Mga cap ng larawan

Katulad ng mga header at footer, maaaring magsama ang mga card sa itaas at ibaba ng "mga cap ng larawan"—mga larawan sa itaas o ibaba ng isang card.

Placeholder Image cap
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.

Huling na-update 3 minuto ang nakalipas

Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.

Huling na-update 3 minuto ang nakalipas

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

Gawing background ng card ang isang larawan at i-overlay ang text ng iyong card. Depende sa larawan, maaaring kailanganin mo o hindi ang mga karagdagang istilo o kagamitan.

Placeholder Card image
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.

Huling na-update 3 minuto ang nakalipas

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>
Tandaan na ang nilalaman ay hindi dapat mas malaki kaysa sa taas ng larawan. Kung ang nilalaman ay mas malaki kaysa sa larawan ang nilalaman ay ipapakita sa labas ng larawan.

Pahalang

Gamit ang kumbinasyon ng mga klase ng grid at utility, maaaring gawing pahalang ang mga card sa isang mobile-friendly at tumutugon na paraan. Sa halimbawa sa ibaba, tinatanggal namin ang mga grid gutters .g-0at ginagamit namin ang mga .col-md-*klase para gawing pahalang ang card sa mdbreakpoint. Maaaring kailanganin ang mga karagdagang pagsasaayos depende sa nilalaman ng iyong card.

Placeholder Image
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.

Huling na-update 3 minuto ang nakalipas

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 istilo ng card

Kasama sa mga card ang iba't ibang opsyon para sa pag-customize ng kanilang mga background, hangganan, at kulay.

Background at kulay

Idinagdag sa v5.2.0

Magtakda ng isang background-colormay contrasting foreground colorsa aming .text-bg-{color}mga katulong . Noong nakaraan, kinakailangan na manu-manong ipares ang iyong pinili .text-{color}at mga .bg-{color}kagamitan para sa pag-istilo, na maaari mo pa ring gamitin kung gusto mo.

Header
Pamagat ng pangunahing card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pangalawang pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng card ng tagumpay

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng danger card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng card ng babala

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng info card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Banayad na pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Madilim na pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

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>
Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hiddenklase.

Border

Gumamit ng mga kagamitan sa hangganan upang baguhin lamang ang border-colorisang card. Tandaan na maaari kang maglagay .text-{color}ng mga klase sa magulang .cardo isang subset ng mga nilalaman ng card tulad ng ipinapakita sa ibaba.

Header
Pamagat ng pangunahing card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pangalawang pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng card ng tagumpay

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng danger card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng card ng babala

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Pamagat ng info card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Banayad na pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

Header
Madilim na pamagat ng card

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

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 utility ng Mixins

Maaari mo ring baguhin ang mga hangganan sa card header at footer kung kinakailangan, at kahit na alisin ang mga ito gamit background-colorang .bg-transparent.

Header
Pamagat ng card ng tagumpay

Ilang mabilis na halimbawa ng text na ibubuo sa pamagat ng card at bubuo sa karamihan ng nilalaman ng card.

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

Bilang karagdagan sa pag-istilo ng nilalaman sa loob ng mga card, ang Bootstrap ay may kasamang ilang mga opsyon para sa paglalagay ng mga serye ng mga card. Sa ngayon , ang mga pagpipilian sa layout na ito ay hindi pa tumutugon .

Mga grupo ng card

Gumamit ng mga pangkat ng card upang i-render ang mga card bilang isang solong, naka-attach na elemento na may pantay na lapad at taas na mga column. Ang mga grupo ng card ay nagsisimulang nakasalansan at ginagamit display: flex;upang maging magkakabit na may magkakatulad na dimensyon simula sa smbreakpoint.

Placeholder Image cap
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.

Huling na-update 3 minuto ang nakalipas

Placeholder Image cap
Pamagat ng card

Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.

Huling na-update 3 minuto ang nakalipas

Placeholder Image cap
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Ang card na ito ay may mas mahabang content kaysa sa unang nagpakita ng pantay na taas na pagkilos.

Huling na-update 3 minuto ang nakalipas

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>

Kapag gumagamit ng mga pangkat ng card na may mga footer, awtomatikong malilinya ang kanilang nilalaman.

Placeholder Image cap
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.

Huling na-update 3 minuto ang nakalipas
Placeholder Image cap
Pamagat ng card

Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.

Huling na-update 3 minuto ang nakalipas
Placeholder Image cap
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Ang card na ito ay may mas mahabang content kaysa sa unang nagpakita ng pantay na taas na pagkilos.

Huling na-update 3 minuto ang nakalipas
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 grid card

Gamitin ang Bootstrap grid system at ang mga .row-colsklase nito para kontrolin kung gaano karaming grid column (nakabalot sa iyong mga card) ang ipinapakita mo sa bawat row. Halimbawa, narito ang .row-cols-1paglalagay ng mga card sa isang column, at .row-cols-md-2paghahati ng apat na card sa pantay na lapad sa maraming row, mula sa medium breakpoint pataas.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

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>

Palitan ito .row-cols-3at makikita mo ang ikaapat na balot ng card.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

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>

Kapag kailangan mo ng pantay na taas, idagdag .h-100sa mga card. Kung gusto mo ng pantay na taas bilang default, maaari mong itakda $card-height: 100%sa Sass.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

Placeholder Image cap
Pamagat ng card

Ito ay isang maikling card.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content.

Placeholder Image cap
Pamagat ng card

Ito ay mas mahabang card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang content. Medyo mas mahaba ang nilalamang ito.

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>

Katulad ng sa mga pangkat ng card, awtomatikong lilinya ang mga footer ng card.

Placeholder Image cap
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Medyo mas mahaba ang nilalamang ito.

Huling na-update 3 minuto ang nakalipas
Placeholder Image cap
Pamagat ng card

Ang card na ito ay may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman.

Huling na-update 3 minuto ang nakalipas
Placeholder Image cap
Pamagat ng card

Ito ay isang mas malawak na card na may sumusuportang text sa ibaba bilang natural na lead-in sa karagdagang nilalaman. Ang card na ito ay may mas mahabang content kaysa sa unang nagpakita ng pantay na taas na pagkilos.

Huling na-update 3 minuto ang nakalipas
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>

Pagmamason

v4Gumamit kami ng diskarteng CSS-only upang gayahin ang gawi ng mga column na mala- Masonry , ngunit ang diskarteng ito ay may kasamang maraming hindi kasiya-siyang epekto . Kung gusto mong magkaroon ng ganitong uri ng layout sa v5, maaari mo lang gamitin ang Masonry plugin. Ang pagmamason ay hindi kasama sa Bootstrap , ngunit gumawa kami ng halimbawa ng demo upang matulungan kang makapagsimula.

CSS

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na diskarte sa mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga card ang mga lokal na variable ng CSS .cardpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

  --#{$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 variable

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