Source

Kadi

Kadi za Bootstrap hutoa kontena ya maudhui inayoweza kunyumbulika na kupanuliwa yenye vibadala na chaguo nyingi.

Kuhusu

Kadi ni chombo cha maudhui kinachoweza kunyumbulika na kupanuka . Inajumuisha chaguo za vichwa na vijachini, aina mbalimbali za maudhui, rangi za mandharinyuma na chaguo thabiti za kuonyesha. Ikiwa unaifahamu Bootstrap 3, kadi hubadilisha paneli, visima na vijipicha vyetu vya zamani. Utendaji sawa na vipengele hivyo unapatikana kama madarasa ya kurekebisha kadi.

Mfano

Kadi zimeundwa kwa alama na mitindo kidogo iwezekanavyo, lakini bado zinaweza kutoa udhibiti na ubinafsishaji mwingi. Imejengwa kwa flexbox, hutoa upatanishi rahisi na kuchanganya vizuri na vijenzi vingine vya Bootstrap. Hawana marginkwa chaguo-msingi, kwa hivyo tumia huduma za kuweka nafasi kama inahitajika.

Chini ni mfano wa kadi ya msingi yenye maudhui mchanganyiko na upana uliowekwa. Kadi hazina upana usiobadilika wa kuanza, kwa hivyo zitajaza upana kamili wa kipengele kikuu chake. Hii imebinafsishwa kwa urahisi na chaguzi zetu mbalimbali za ukubwa .

100%x180
Jina la kadi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Nenda mahali fulani 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." 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>

Aina za maudhui

Kadi hutumia aina mbalimbali za maudhui, ikiwa ni pamoja na picha, maandishi, vikundi vya orodha, viungo na zaidi. Ifuatayo ni mifano ya kile kinachoungwa mkono.

Mwili

Sehemu ya ujenzi wa kadi ni .card-body. Itumie wakati wowote unahitaji sehemu iliyofunikwa ndani ya kadi.

Haya ni baadhi ya maandishi ndani ya kundi la kadi. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Majina, maandishi na viungo

Majina ya kadi hutumiwa kwa kuongeza .card-titlelebo <h*>. Kwa njia hiyo hiyo, viungo vinaongezwa na kuwekwa karibu na kila mmoja kwa kuongeza .card-linkkwenye <a>lebo.

Manukuu hutumiwa kwa kuongeza .card-subtitletagi <h*>. Ikiwa vipengee .card-titlena .card-subtitlevipengee vimewekwa kwenye .card-bodykipengee, kichwa cha kadi na manukuu yatapangiliwa vizuri.

Jina la kadi
Manukuu ya kadi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kiungo cha kadi Kiungo kingine 
<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>

Picha

.card-img-tophuweka picha juu ya kadi. Na .card-text, maandishi yanaweza kuongezwa kwenye kadi. Maandishi ndani .card-textyanaweza pia kutengenezwa kwa kutumia lebo za kawaida za HTML.

Kikomo cha picha [100%x180]

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." 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>

Orodhesha vikundi

Unda orodha za yaliyomo kwenye kadi na kikundi cha orodha ya laini.

  • Cras justo odio
  • Dapibus ac kuwezesha katika
  • Vestibulum na 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>
Iliyoangaziwa
  • Cras justo odio
  • Dapibus ac kuwezesha katika
  • Vestibulum na 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>

Sinki ya jikoni

Changanya na ulinganishe aina nyingi za maudhui ili kuunda kadi unayohitaji, au tupa kila kitu humo. Imeonyeshwa hapa chini ni mitindo ya picha, vizuizi, mitindo ya maandishi, na kikundi cha orodha-yote yakiwa yamefungwa kwenye kadi ya upana usiobadilika.

Kikomo cha picha [100%x180]
Jina la kadi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

  • Cras justo odio
  • Dapibus ac kuwezesha katika
  • Vestibulum na eros
Kiungo cha kadi Kiungo kingine 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." 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>

Ongeza kichwa cha hiari na/au kijachini ndani ya kadi.

Iliyoangaziwa
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani 
<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>

Vichwa vya kadi vinaweza kutengenezwa kwa kuongeza .card-headervipengele <h*>.

Iliyoangaziwa
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani 
<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>
Nukuu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo 
<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>
Iliyoangaziwa
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
siku 2 zilizopita 
<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>

Ukubwa

Kadi hazifikirii mahususi widthza kuanza, kwa hivyo zitakuwa na upana wa 100% isipokuwa kama itaelezwa vinginevyo. Unaweza kubadilisha hii inavyohitajika kwa CSS maalum, madarasa ya gridi ya taifa, michanganyiko ya gridi ya Sass, au huduma.

Kwa kutumia alama ya gridi

Kwa kutumia gridi ya taifa, funga kadi kwenye safu wima na safu kama inavyohitajika.

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani 
<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>

Kutumia huduma

Tumia huduma zetu chache za ukubwa zinazopatikana ili kuweka upana wa kadi haraka.

Jina la kadi

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Kitufe
Jina la kadi

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

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

Kwa kutumia CSS maalum

Tumia CSS maalum katika laha zako za mitindo au kama mitindo ya ndani ili kuweka upana.

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani 
<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>

Mpangilio wa maandishi

Unaweza kubadilisha kwa haraka mpangilio wa maandishi wa kadi yoyote—kwa ukamilifu wake au sehemu mahususi—na madarasa yetu ya kupanga maandishi .

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani 
<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>

Ongeza usogezaji kwa kichwa cha kadi (au zuia) na vipengee vya nav vya Bootstrap .

Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani 
<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>
Matibabu maalum ya kichwa

Na maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Nenda mahali fulani 
<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>

Picha

Kadi ni pamoja na chaguzi chache za kufanya kazi na picha. Chagua kutoka kwa kuambatisha "vifuniko vya picha" kwenye mwisho wa kadi, kuweka picha juu ya maudhui ya kadi, au kupachika tu picha kwenye kadi.

Vifuniko vya picha

Sawa na vichwa na kijachini, kadi zinaweza kujumuisha "vifuniko vya picha" juu na chini - picha zilizo juu au chini ya kadi.

100%x180
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

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

Viwekelezo vya picha

Geuza picha kuwa usuli wa kadi na uweke juu maandishi ya kadi yako. Kulingana na picha, unaweza au usihitaji mitindo ya ziada au huduma.

100%x270
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

<div class="card bg-dark text-white">
  <img class="card-img" src="..." 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>

Mitindo ya kadi

Kadi zinajumuisha chaguo mbalimbali za kubinafsisha asili, mipaka na rangi zao.

Asili na rangi

Tumia maandishi na huduma za usuli kubadilisha mwonekano wa kadi.

Kijajuu
Jina la kadi ya msingi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya sekondari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya mafanikio

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya hatari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya onyo

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya habari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyepesi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyeusi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

<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>
Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .sr-onlydarasa.

Mpaka

Tumia huduma za mpaka kubadilisha tu border-colorkadi. Kumbuka kuwa unaweza kuweka .text-{color}madarasa kwa mzazi .cardau sehemu ndogo ya yaliyomo kwenye kadi kama inavyoonyeshwa hapa chini.

Kijajuu
Jina la kadi ya msingi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya sekondari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya mafanikio

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Jina la kadi ya hatari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya onyo

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi ya habari

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyepesi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

Kijajuu
Kichwa cha kadi nyeusi

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

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

Mchanganyiko wa huduma

Unaweza pia kubadilisha mipaka kwenye kichwa cha kadi na kijachini inavyohitajika, na hata kuondoa yao background-colorna .bg-transparent.

Kijajuu
Jina la kadi ya mafanikio

Baadhi ya maandishi ya mfano wa haraka wa kuunda kwenye kichwa cha kadi na kuunda sehemu kubwa ya maudhui ya kadi.

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

Mpangilio wa kadi

Mbali na kupanga yaliyomo ndani ya kadi, Bootstrap inajumuisha chaguzi chache za kuweka safu za kadi. Kwa sasa, chaguo hizi za mpangilio bado hazijafanya kazi .

Vikundi vya kadi

Tumia vikundi vya kadi kutoa kadi kama kipengele kimoja, kilichoambatishwa chenye upana na urefu wa safu wima. Vikundi vya kadi hutumia display: flex;kufikia ukubwa wao sawa.

100%x180
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

100%x180
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita

100%x180
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Unapotumia vikundi vya kadi vilivyo na kijachini, maudhui yao yatajipanga kiotomatiki.

100%x180
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita
100%x180
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita
100%x180
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Viwanja vya kadi

Je, unahitaji kadi za upana na urefu sawa ambazo hazijaunganishwa? Tumia safu za kadi.

100%x200
Jina la kadi

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita

100%x200
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita

100%x200
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Kama ilivyo kwa vikundi vya kadi, kijachini cha kadi kwenye sitaha kitapangwa kiotomatiki.

100%x180
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Ilisasishwa mwisho dakika 3 zilizopita
100%x180
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita
100%x180
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Safu wima za kadi

Kadi zinaweza kupangwa katika safu wima kama za Uashi na CSS tu kwa kuzifunga kwenye .card-columns. Kadi zimejengwa kwa sifa za CSS columnbadala ya flexbox kwa upangaji rahisi. Kadi zimeagizwa kutoka juu hadi chini na kushoto kwenda kulia.

Vichwa juu! Umbali wako ulio na safu wima za kadi unaweza kutofautiana. Ili kuzuia kadi kukatika safu wima, ni lazima tuziweke kwa display: inline-blockkuwa column-break-inside: avoidbado hazijaweza kuzuia risasi.

100%x160
Kichwa cha kadi kinachoingia kwenye mstari mpya

Hii ni kadi ndefu iliyo na maandishi yanayoauni hapa chini kama njia ya asili ya kuingia kwa maudhui ya ziada. Maudhui haya ni marefu kidogo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo
100%x160
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kiwango kamili cha posuere.

Mtu maarufu katika Mada ya Chanzo
Jina la kadi

Kadi hii ina maandishi yanayosaidia hapa chini kama mwongozo wa asili kwa maudhui ya ziada.

Ilisasishwa mwisho dakika 3 zilizopita

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nambari kamili imesababisha ante.

Mtu maarufu katika Mada ya Chanzo
Jina la kadi

Hii ni kadi pana iliyo na maandishi yanayosaidia hapa chini kama mwongozo wa asili wa maudhui ya ziada. Kadi hii ina maudhui marefu zaidi kuliko ya kwanza kuonyesha kitendo hicho cha urefu sawa.

Ilisasishwa mwisho dakika 3 zilizopita

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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 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" src="..." 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 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>

Safu wima za kadi pia zinaweza kupanuliwa na kubinafsishwa kwa kutumia msimbo wa ziada. Kinachoonyeshwa hapa chini ni kiendelezi cha .card-columnsdarasa kwa kutumia CSS ile ile tunayotumia—safu wima za CSS— ili kutoa seti ya viwango vinavyoitikia kwa kubadilisha idadi ya safu wima.

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