Source

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.

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.

Dagiti subtitulo ket mausar babaen ti pananginayon ti .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.

  • Cras laeng nga odio
  • Dapibus ac pasilidad iti
  • Vestibulum iti 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>
Naitampok
  • Cras laeng nga odio
  • Dapibus ac pasilidad iti
  • Vestibulum iti 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 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.

  • Cras laeng nga odio
  • Dapibus ac pasilidad iti
  • Vestibulum iti eros
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">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>

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

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

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

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

Karaman kadagiti kard ti sumagmamano a pagpilian iti panagtrabaho kadagiti ladawan. Pumili manipud iti panangikapet 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-top" 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 a kasapulam wenno saan 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.

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

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

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. Usaren dagiti grupo ti kard display: flex;tapno maragpatda ti uniporme a kadakkelda.

Placeholder Image cap
Titulo ti kard

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

Last updated 3 mins ago

Placeholder Image cap
Card title

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

Last updated 3 mins ago

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

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

When using card groups with footers, their content will automatically line up.

Placeholder Image cap
Card title

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

Last updated 3 mins ago
Placeholder Image cap
Card title

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

Last updated 3 mins ago
Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago 
<div class="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>

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Placeholder Image cap
Card title

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

Last updated 3 mins ago

Placeholder Image cap
Card title

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

Last updated 3 mins ago

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

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

Just like with card groups, card footers in decks will automatically line up.

Placeholder Image cap
Card title

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

Last updated 3 mins ago
Placeholder Image cap
Card title

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

Last updated 3 mins ago
Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago 
<div class="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>

Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Placeholder Image cap
Card title that wraps to a new line

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

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

Someone famous in Source Title
Placeholder Image cap
Card title

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

Naudi a na-update 3 mins ti napalabas

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

Maysa a nalatak iti Source Title
Titulo ti kard

Daytoy a kard ket addaan iti regular a paulo ken ababa a parapo ti teksto iti baba dayta.

Naudi a na-update 3 mins ti napalabas

Placeholder Card image

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

Maysa a nalatak iti Source Title
Titulo ti kard

Daytoy ket sabali pay a kard nga addaan iti paulo ken mangsuporta a teksto iti baba. Daytoy a kard ket addaan iti sumagmamano a kanayonan a linaon tapno agbalin a nataytayag bassit iti pangkaaduan.

Naudi a na-update 3 mins ti napalabas

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

Mabalin met a mapalawa ken mapasayaat dagiti kolum ti kard babaen ti sumagmamano a kanayonan a kodigo. Naipakita iti baba ti maysa a panagpaatiddog ​​ti .card-columnsklase nga agus-usar ti isu met laeng a CSS nga us-usarenmi—dagiti kolum ti CSS— tapno mangpataud ti maysa a grupo dagiti sumungbat a tukad para iti panagbalbaliw ti bilang dagiti kolum.

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