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 .

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

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.

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

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.

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

Kichwa na kijachini

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.

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

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

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.

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

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.

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

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

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

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

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

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

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

Viwanja vya kadi

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

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

Jina la kadi

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

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

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

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

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

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

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.

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

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

Mtu maarufu katika Mada ya Chanzo

Jina la kadi

Kadi hii ina kichwa cha kawaida na aya fupi ya maandishi chini yake.

Ilisasishwa mwisho dakika 3 zilizopita

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

Mtu maarufu katika Mada ya Chanzo

Jina la kadi

Hii ni kadi nyingine iliyo na kichwa na maandishi yanayounga mkono hapa chini. Kadi hii ina maudhui ya ziada ya kuifanya iwe ndefu kidogo kwa ujumla.

Ilisasishwa mwisho dakika 3 zilizopita

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

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

Kadi

Kuhusu

Mfano

Jina la kadi

Aina za maudhui

Mwili

Majina, maandishi na viungo

Jina la kadi

Manukuu ya kadi

Picha

Orodhesha vikundi

Sinki ya jikoni

Jina la kadi

Kichwa na kijachini

Matibabu maalum ya kichwa

Iliyoangaziwa

Matibabu maalum ya kichwa

Matibabu maalum ya kichwa

Ukubwa

Kwa kutumia alama ya gridi

Matibabu maalum ya kichwa

Matibabu maalum ya kichwa

Kutumia huduma

Jina la kadi

Jina la kadi

Kwa kutumia CSS maalum

Matibabu maalum ya kichwa

Mpangilio wa maandishi

Matibabu maalum ya kichwa

Matibabu maalum ya kichwa

Matibabu maalum ya kichwa

Urambazaji

Matibabu maalum ya kichwa

Matibabu maalum ya kichwa

Picha

Vifuniko vya picha

Jina la kadi

Jina la kadi

Viwekelezo vya picha

Jina la kadi

Mitindo ya kadi

Asili na rangi

Jina la kadi ya msingi

Kichwa cha kadi ya sekondari

Jina la kadi ya mafanikio

Jina la kadi ya hatari

Kichwa cha kadi ya onyo

Kichwa cha kadi ya habari

Kichwa cha kadi nyepesi

Kichwa cha kadi nyeusi

Kuwasilisha maana kwa teknolojia za usaidizi

Mpaka

Jina la kadi ya msingi

Kichwa cha kadi ya sekondari

Jina la kadi ya mafanikio

Jina la kadi ya hatari

Kichwa cha kadi ya onyo

Kichwa cha kadi ya habari

Kichwa cha kadi nyepesi

Kichwa cha kadi nyeusi

Mchanganyiko wa huduma

Jina la kadi ya mafanikio

Mpangilio wa kadi

Vikundi vya kadi

Jina la kadi

Jina la kadi

Jina la kadi

Jina la kadi

Jina la kadi

Jina la kadi

Viwanja vya kadi

Jina la kadi

Jina la kadi

Jina la kadi

Jina la kadi

Jina la kadi

Jina la kadi

Safu wima za kadi

Kichwa cha kadi kinachoingia kwenye mstari mpya

Jina la kadi