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 .

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 class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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.

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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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.

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 class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Header ken footer

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="#">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="#">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.

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

<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</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.

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 class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

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.

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

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 addaan pay ketdi iti at-atiddog a linaon 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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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.

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

Titulo ti kard

Naudi a na-update 3 mins ti napalabas

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 deck ti kard

Kasapulan kadi ti maysa a set ti agpapada a kalawa ken kangato a kard a saan a naikapet iti maysa ken maysa? Agusar kadagiti card deck.

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.

Naudi a na-update 3 mins ti napalabas

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

Titulo ti kard

Naudi a na-update 3 mins ti napalabas

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

Kas met laeng kadagiti grupo ti kard, dagiti footer ti kard kadagiti deck ket automatiko nga aglinya.

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

Titulo ti kard

Naudi a na-update 3 mins ti napalabas

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 kolum ti kard

Mabalin nga organisaren dagiti kard kadagiti kasla Masonry a kolum nga addaan laeng iti CSS babaen ti panangbalkot kadagitoy iti .card-columns. Dagiti kard ket naibangon babaen dagiti columntagikua ti CSS imbes a ti flexbox para iti nalaklaka a panagtunos. Maorder dagiti kard manipud ngato agingga iti baba ken kannigid nga agpakannawan.

Ulo nga agpangato! Mabalin nga agduduma ti mileage-yo kadagiti kolum ti kard. Tapno malapdan ti panagburak dagiti kard iti ballasiw dagiti adigi, masapul nga ikeddengtayo dagitoy iti display: inline-blockkas column-break-inside: avoidsaan pay a bulletproof a solusion.

Titulo ti kard a mangbalkot iti baro a linia

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.

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

Maysa a nalatak iti Source Title

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

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

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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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">
        <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 class="card-img" src=".../100px260/" alt="Card image">
  </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;
  }
}

Dagiti Kard

Maipapan

Pagwadan

Titulo ti kard

Dagiti kita ti linaon

Bagi

Dagiti paulo, teksto, ken silpo

Titulo ti kard

Subtitulo ti kard

Dagiti Ladawan

Ilista dagiti grupo

Lababo ti kosina

Titulo ti kard

Header ken footer

Espesial a panangtrato iti titulo

Naitampok

Espesial a panangtrato iti titulo

Espesial a panangtrato iti titulo

Panag-sizing

Babaen ti panangusar iti grid markup

Espesial a panangtrato iti titulo

Espesial a panangtrato iti titulo

Panangusar kadagiti utilidad

Titulo ti kard

Titulo ti kard

Babaen ti panangusar iti kostumbre a CSS

Espesial a panangtrato iti titulo

Panagtunos ti teksto

Espesial a panangtrato iti titulo

Espesial a panangtrato iti titulo

Espesial a panangtrato iti titulo

Panaglayag

Espesial a panangtrato iti titulo

Espesial a panangtrato iti titulo

Dagiti Ladawan

Dagiti kape ti ladawan

Titulo ti kard

Titulo ti kard

Dagiti overlay ti ladawan

Titulo ti kard

Dagiti estilo ti kard

Background ken kolor

Titulo ti kard ti primaria

Titulo ti segundario a kard

Titulo ti kard ti balligi

Titulo ti kard ti peggad

Titulo ti kard ti pakdaar

Titulo ti kard ti info

Titulo ti kard ti lawag

Nasipnget a titulo ti kard

Panangipaay ti kaipapanan kadagiti makatulong a teknolohia

Beddeng

Titulo ti kard ti primaria

Titulo ti segundario a kard

Titulo ti kard ti balligi

Titulo ti kard ti peggad

Titulo ti kard ti pakdaar

Titulo ti kard ti info

Titulo ti kard ti lawag

Nasipnget a titulo ti kard

Mixins nga utilidad

Titulo ti kard ti balligi

Layout ti kard

Dagiti grupo ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Dagiti deck ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Titulo ti kard

Dagiti kolum ti kard

Titulo ti kard a mangbalkot iti baro a linia

Titulo ti kard