Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

Dagiti Kard

Dagiti kard ti Bootstrap ket mangipaay ti nalaka a maibagay ken mapalawa a pagkargaan ti linaon nga addaan kadagiti adu a variante ken pagpilian.

Iti daytoy a panid

Maipapan

Ti kard ket maysa a nalaka a maibagay ken mapalawa a container ti linaon. Daytoy ket mangiraman kadagiti pagpilian para kadagiti ulo ken dagiti footer, nadumaduma a linaon, dagiti kolor ti likudan ti konteksto, ken dagiti nabileg a pagpilian ti panagiparang. No pamiliarkayo iti Bootstrap 3, dagiti kard ti mangsukat kadagiti daan a panel, bubon, ken thumbnail-tayo. Ti kapada a panagusar kadagita a paset ket magun-od a kas dagiti klase ti mangbalbaliw para kadagiti kard.

Pagwadan

Dagiti kard ket naaramid nga addaan iti bassit a markup ken estilo aginggana a mabalin, ngem kaskasdi a makabaelda a mangipaay ti maysa a tonelada a panagtengngel ken panagpasayaat. Naaramidda iti flexbox, mangitukonda iti nalaka a panagtunos ken nasayaat ti panaglaokda kadagiti dadduma a paset ti Bootstrap. Awan dagitoy marginbabaen ti default, isu nga agusar kadagiti spacing utilities no kasapulan.

Iti baba ket maysa a pagarigan ti kangrunaan a kard nga addaan iti naglaok a linaon ken naikeddeng a kalawa. Awan ti naikeddeng a kalawa dagiti kard a pangrugian, isu a natural a punnuenda ti naan-anay a kalawa ti nagannak nga elementona. Nalaka laeng a ma-customize daytoy babaen kadagiti nadumaduma a pagpilianmi iti panagdakkel .

Placeholder Image cap
Titulo ti kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Mapanka iti sadinoman 
<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>

Dagiti kita ti linaon

Suportaran dagiti kard ti nadumaduma a linaon, agraman dagiti ladawan, teksto, grupo ti listaan, silpo, ken dadduma pay. Iti baba ket dagiti pagarigan no ania ti nasuportaran.

Bagi

Ti building block ti maysa a kard ket ti .card-body. Usarem dayta kaanoman a kasapulam ti padded section iti uneg ti kard.

Daytoy ket sumagmamano a teksto iti uneg ti bagi ti kard. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Dagiti paulo, teksto, ken silpo

Mausar dagiti paulo ti kard babaen ti pananginayon .card-titleiti maysa nga <h*>etiketa. Iti isu met laeng a wagas, dagiti silpo ket mainayon ken maikabil iti abay ti tunggal maysa babaen ti pananginayon .card-linkiti maysa nga <a>etiketa.

Mausar dagiti subtitulo babaen ti pananginayon iti .card-subtitlea iti maysa nga <h*>etiketa. No ti .card-titleken dagiti .card-subtitlebanag ket naikabil iti maysa a .card-bodybanag, ti paulo ti kard ken ti subtitulo ket nasayaat ti pannakaitunosda.

Titulo ti kard
Subtitulo ti kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Card link Sabali pay a 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>

Dagiti Ladawan

.card-img-topmangikabil iti ladawan iti ngato ti kard. Babaen .card-textti , mabalin a mainayon ti teksto iti kard. Ti teksto iti uneg .card-textket mabalin pay nga estilo babaen dagiti gagangay nga etiketa ti HTML.

Placeholder Image cap

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

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

Mangaramid kadagiti listaan ​​ti linaon iti maysa a kard nga addaan iti grupo ti listaan ​​ti flush.

  • Maysa a banag
  • Maysa a maikadua a banag
  • Maikatlo a banag
<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>
Naitampok
  • Maysa a banag
  • Maysa a maikadua a banag
  • Maikatlo a banag
<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>
  • Maysa a banag
  • Maysa a maikadua a banag
  • Maikatlo a banag
Kard nga footer 
<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 ti kosina

Paglalaoken ken pagtunos ti adu a kita ti linaon tapno makaaramidka iti kard a kasapulam, wenno ibellengmo ti amin sadiay. Naipakita iti baba dagiti estilo ti ladawan, bloke, estilo ti teksto, ken maysa a grupo ti listaan—amin ket nabalkot iti naikeddeng ti kalawana a kard.

Placeholder Image cap
Titulo ti kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

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

Manginayon ti opsional nga ulo ken/wenno footer iti uneg ti kard.

Naitampok
Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman 
<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>

Mabalin nga estilo dagiti ulo ti kard babaen ti pananginayon .card-headerkadagiti <h*>elemento.

Naitampok
Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman 
<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>
Adawen

Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.

Maysa a nalatak iti Source Title 
<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>
Naitampok
Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman
2 nga aldaw ti napalabas 
<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>

Panag-sizing

Ipagarup dagiti kard nga awan ti espesipiko widtha pangrugian, isu a 100% ti kalawana malaksid no adda sabali a naibaga. Mabalinmo a baliwan daytoy no kasapulan babaen ti kostumbre a CSS, dagiti klase ti grid, dagiti grid Sass mixins, wenno dagiti utilidad.

Babaen ti panangusar iti grid markup

Babaen ti grid, baluten dagiti kard kadagiti adigi ken hilera no kasapulan.

Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman
Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman 
<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>

Panangusar kadagiti utilidad

Usarem ti sumagmamano a magun-odan a sizing utilities -tayo tapno napartak nga i-set ti kalawa ti maysa a kard.

Titulo ti kard

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Buton
Titulo ti kard

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

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

Babaen ti panangusar iti kostumbre a CSS

Usaren ti kostumbre a CSS kadagiti stylesheet-mo wenno kas dagiti inline nga estilo tapno mangikeddeng ti kalawa.

Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman 
<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>

Panagtunos ti teksto

Mabalinmo a dagus a baliwan ti panagtunos ti teksto ti ania man a kard—iti intero wenno dagiti espesipiko a pasetna—babaen dagiti klasemi iti panagtunos ti teksto .

Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman
Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman
Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman 
<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>

Inayon ti sumagmamano a nabigasion iti ulo (wenno bloke) ti maysa a kard babaen dagiti paset ti nav ti Bootstrap .

Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman 
<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" 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>
Espesial a panangtrato iti titulo

Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Mapanka iti sadinoman 
<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>

Dagiti Ladawan

Iraman dagiti kard ti sumagmamano a pagpilian iti panagtrabaho kadagiti ladawan. Pumili manipud iti panangikabil kadagiti “image cap” iti agsumbangir a pungto ti kard, panangikapet kadagiti ladawan iti linaon ti kard, wenno panangikabil laeng iti ladawan iti kard.

Dagiti kape ti ladawan

Kas iti header ken footer, mabalin nga iraman dagiti kard ti ngato ken baba a “image cap” —dagiti ladawan iti ngato wenno baba ti maysa a kard.

Placeholder Image cap
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Naudi a na-update 3 mins ti napalabas

Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Naudi a na-update 3 mins ti napalabas

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

Dagiti overlay ti ladawan

Pagbalinem ti maysa a ladawan iti background ti kard ken i-overlaymo ti teksto ti kardmo. Depende iti ladawan, mabalin wenno saan a kasapulam dagiti kanayonan nga estilo wenno utilidad.

Placeholder Card image
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Naudi a na-update 3 mins ti napalabas

<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>
Paliiwenyo a ti linaon ket saan koma a dakdakkel ngem ti kangato ti ladawan. No dakdakkel ti linaon ngem ti ladawan ti linaon ket maiparang iti ruar ti ladawan.

Paidda

Babaen ti panangusar iti kombinasion dagiti klase ti grid ken utility, mabalin a maaramid dagiti kard a horizontal iti wagas a makaay-ayo ken makasungbat iti mobile. Iti pagarigan iti baba, ikkatenmi dagiti grid gutters nga addaan .g-0ken agusar .col-md-*kadagiti klase tapno pagbalinen ti kard a horizontal iti mdbreakpoint. Mabalin a kasapulan ti kanayonan a panagbalbaliw depende iti linaon ti kardmo.

Placeholder Image
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Naudi a na-update 3 mins ti napalabas

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

Dagiti estilo ti kard

Karaman kadagiti kard ti nadumaduma a pagpilian a mangpasayaat kadagiti background, border, ken kolorda.

Background ken kolor

Usaren dagiti utilidad ti kolor ti teksto ken background tapno mabaliwan ti langa ti kard.

Ulo ti ulo
Titulo ti kard ti primaria

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti segundario a kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti balligi

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti peggad

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti pakdaar

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti info

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti lawag

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Nasipnget a titulo ti kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

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

Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .visually-hiddenklase.

Beddeng

Usaren dagiti border utilities tapno baliwan laeng ti border-colorti maysa a kard. Imutektekanyo a mabalinyo nga ikabil .text-{color}dagiti klase iti nagannak .cardwenno maysa a subset ti linaon ti kard kas naipakita iti baba.

Ulo ti ulo
Titulo ti kard ti primaria

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti segundario a kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti balligi

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti peggad

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti pakdaar

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti info

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Titulo ti kard ti lawag

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Ulo ti ulo
Nasipnget a titulo ti kard

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

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

Mixins nga utilidad

Mabalinmo pay a baliwan dagiti beddeng iti card header ken footer no kasapulan, ken uray pay ikkaten ti background-colorwith .bg-transparent.

Ulo ti ulo
Titulo ti kard ti balligi

Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.

Footer nga 
<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 ti kard

Malaksid iti estilo ti linaon iti uneg dagiti kard, ti Bootstrap ket mangiraman ti sumagmamano a pagpilian para iti panangiplastar kadagiti serye dagiti kard. Iti agdama, dagitoy a pagpilian iti layout ket saan pay a makasungbat .

Dagiti grupo ti kard

Usaren dagiti grupo ti kard tapno mangiparang kadagiti kard a kas maymaysa, naikapet nga elemento nga addaan kadagiti agpapada a kalawa ken kangato nga adigi. Mangrugi dagiti grupo ti kard a naurnong ken agusar display: flex;nga agbalin a naikapet nga addaan kadagiti agpapada a rukod a mangrugi iti smbreakpoint.

Placeholder Image cap
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Naudi a na-update 3 mins ti napalabas

Placeholder Image cap
Titulo ti kard

Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Naudi a na-update 3 mins ti napalabas

Placeholder Image cap
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. Daytoy a kard ket at-atiddog ​​pay ti linaonna ngem ti immuna a mangipakita iti dayta agpapada a kangato nga aramid.

Naudi a na-update 3 mins ti napalabas

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

No agusar kadagiti grupo ti kard nga addaan kadagiti footer, automatiko nga aglinya ti linaonda.

Placeholder Image cap
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Naudi a na-update 3 mins ti napalabas
Placeholder Image cap
Titulo ti kard

Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Naudi a na-update 3 mins ti napalabas
Placeholder Image cap
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. Daytoy a kard ket at-atiddog ​​pay ti linaonna ngem ti immuna a mangipakita iti dayta agpapada a kangato nga aramid.

Naudi a na-update 3 mins ti napalabas 
<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>

Dagiti kard ti grid

Usaren ti sistema ti grid ti Bootstrap ken dagiti .row-colsklasena tapno makontrol no mano a kolum ti grid (nabalkot kadagiti kardmo) nga ipakitam iti tunggal linia. Kas pagarigan, ditoy ti .row-cols-1panangiplastar kadagiti kard iti maysa a kolum, ken .row-cols-md-2panangbingay kadagiti uppat a kard iti agpapada a kalawa iti ballasiw ti adu a hilera, manipud iti kalalainganna a breakpoint nga agpangato.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

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

Baliwam dayta iti .row-cols-3ket makitam ti maikapat a card wrap.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

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

No kasapulam ti agpapada a katayag, inayonmo .h-100kadagiti kard. No kayatmo dagiti agpapada a kangato babaen ti default, mabalinmo nga ikeddeng $card-height: 100%iti Sass.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Placeholder Image cap
Titulo ti kard

Ababa daytoy a kard.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon.

Placeholder Image cap
Titulo ti kard

Daytoy ket at-atiddog ​​a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

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

Kas met laeng kadagiti grupo ti kard, automatiko nga agpila dagiti footer ti kard.

Placeholder Image cap
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog ​​bassit daytoy a linaon.

Naudi a na-update 3 mins ti napalabas
Placeholder Image cap
Titulo ti kard

Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.

Naudi a na-update 3 mins ti napalabas
Placeholder Image cap
Titulo ti kard

Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. Daytoy a kard ket at-atiddog ​​pay ti linaonna ngem ti immuna a mangipakita iti dayta agpapada a kangato nga aramid.

Naudi a na-update 3 mins ti napalabas 
<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>

Masoneria

Iti v4nagusarkami iti CSS-laeng a teknik tapno matulad ti kababalin dagiti kasla Masonry a kolum, ngem daytoy a teknik ket dimteng nga addaan iti adu a di makaay-ayo nga epekto . No kayatmo ti maaddaan iti daytoy a kita ti layout iti v5, mabalinmo laeng nga usaren ti Masonry plugin. Saan a nairaman ti masoneria iti Bootstrap , ngem nangaramidkami iti pagarigan ti demo tapno matulongannaka a mangrugi.

Sass nga

Dagiti Variable

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;