Source

Mga kard

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Itinatampok
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Link ng card Isa pang 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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

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

Isang taong sikat sa Pamagat ng Pinagmulan 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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 
<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 
<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 
<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 
<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 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

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 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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 
<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-top" 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

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

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.

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

Gumamit ng mga text at background utilities upang baguhin ang hitsura ng isang card.

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.

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

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.

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

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 
<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. Ginagamit ng mga grupo ng card display: flex;upang makamit ang kanilang pare-parehong laki.

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

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

Kailangan ng isang hanay ng pantay na lapad at taas na mga card na hindi nakakabit sa isa't isa? Gumamit ng mga card deck.

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.

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

<div class="card-deck">
  <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>
      <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>

Katulad ng sa mga pangkat ng card, awtomatikong pumila ang mga card footer sa mga deck.

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 
<div class="card-deck">
  <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 column ng card

Maaaring ayusin ang mga card sa mga column na tulad ng Masonry.card-columns gamit lamang ang CSS sa pamamagitan ng pagbabalot sa mga ito sa . Ang mga card ay binuo gamit ang CSScolumn gamit ang mga katangian ng CSS sa halip na flexbox para sa mas madaling pagkakahanay. Ang mga card ay inayos mula sa itaas hanggang sa ibaba at kaliwa hanggang kanan.

Heads up! Maaaring mag-iba ang iyong mileage sa mga column ng card. Upang maiwasan ang mga card na masira sa mga column, dapat nating itakda ang mga ito display: inline-blockbilang column-break-inside: avoidhindi pa bulletproof na solusyon.

Placeholder Image cap
Pamagat ng card na bumabalot sa isang bagong linya

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.

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

Isang taong sikat sa Pamagat ng Pinagmulan
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

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

Isang taong sikat sa Pamagat ng Pinagmulan
Pamagat ng card

Ang card na ito ay may regular na pamagat at maikling talata ng teksto sa ibaba nito.

Huling na-update 3 minuto ang nakalipas

Placeholder Card image

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

Isang taong sikat sa Pamagat ng Pinagmulan
Pamagat ng card

Ito ay isa pang card na may pamagat at sumusuportang teksto sa ibaba. Ang card na ito ay may ilang karagdagang nilalaman upang gawin itong bahagyang mas mataas sa pangkalahatan.

Huling na-update 3 minuto ang nakalipas

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img 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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Ang mga column ng card ay maaari ding palawigin at i-customize gamit ang ilang karagdagang code. Ang ipinapakita sa ibaba ay isang extension ng.card-columns klase gamit ang parehong CSS na ginagamit namin—mga CSS column— upang bumuo ng isang hanay ng mga tumutugong tier para sa pagbabago ng bilang ng mga column.

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