Source

Amakhadi

Amakhadi e-Bootstrap ahlinzeka ngesiqukathi sokuqukethwe esiguqukayo nesinwebekayo esinokuhlukahluka okuningi nezinketho.

Mayelana

Ikhadi liyisitsha sokuqukethwe esiguqukayo nesinwebekayo. Ihlanganisa izinketho zezihloko nonyaweni, inhlobonhlobo yokuqukethwe, imibala yengemuva lengqikithi, nezinketho zokubonisa ezinamandla. Uma ujwayelene ne-Bootstrap 3, amakhadi athatha indawo yamaphaneli ethu amadala, imithombo, nezithonjana. Ukusebenza okufanayo kulezo zingxenye kuyatholakala njengamakilasi okulungisa amakhadi.

Isibonelo

Amakhadi akhiwe anomakha nezitayela ezincane ngangokunokwenzeka, kodwa asakwazi ukuletha ithoni yokulawula nokwenza ngendlela oyifisayo. Akhiwe nge-flexbox, anikeza ukuqondana okulula futhi axube kahle nezinye izingxenye ze-Bootstrap. Azikho marginngokuzenzakalelayo, ngakho-ke sebenzisa izinsiza zokuhlukanisa njengoba kudingeka.

Ngezansi kunesibonelo sekhadi eliyisisekelo elinokuqukethwe okuxubile nobubanzi obulungisiwe. Amakhadi akanabo ububanzi obunqunyiwe ukuqalisa, ngakho ngokwemvelo azogcwalisa ububanzi obugcwele bento engumzali. Lokhu kwenziwa ngokwezifiso kalula ngezinketho zethu zokulinganisa ezahlukahlukene .

Placeholder Image cap
Isihloko sekhadi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Hamba ndawana thize 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Izinhlobo zokuqukethwe

Amakhadi asekela inhlobonhlobo yokuqukethwe, okuhlanganisa izithombe, umbhalo, amaqembu ohlu, izixhumanisi, nokuningi. Ngezansi kunezibonelo zalokho okusekelwayo.

Umzimba

Isakhiwo sekhadi yi- .card-body. Yisebenzise noma nini lapho udinga isigaba esinamaphedi ngaphakathi kwekhadi.

Lona umbhalo othile ngaphakathi kwendikimba yekhadi. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Izihloko, umbhalo, nezixhumanisi

Izihloko zamakhadi zisetshenziswa ngokwengeza .card-titlekumaka <h*>. .card-linkNgendlela efanayo, izixhumanisi ziyengezwa futhi zibekwe eduze komunye nomunye ngokungeza <a>kumaki.

Imibhalo engezansi isetshenziswa ngokwengeza u- .card-subtitlea <h*>kumaka. Uma i- .card-titlekanye .card-subtitlenezinto zibekwe .card-bodyentweni, isihloko sekhadi nesihlokwana siqondaniswe kahle.

Isihloko sekhadi
Umbhalo ongezansi wekhadi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Isixhumanisi sekhadi Esinye isixhumanisi 
<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>

Izithombe

.card-img-topubeka isithombe phezulu ekhadini. Nge- .card-text, umbhalo ungangezwa ekhadini. Umbhalo ongaphakathi .card-textungaphinda ufakwe isitayela ngamathegi ajwayelekile e-HTML.

Placeholder Image cap

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Amaqembu ohlwini

Dala uhlu lokuqukethwe ekhadini neqembu lohlu olushaywayo.

  • Cras justo odio
  • I-Dapibus ac facilisis in
  • I-Vestibulum ne-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>
Okufakiwe
  • Cras justo odio
  • I-Dapibus ac facilisis in
  • I-Vestibulum ne-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>

Usinki wekhishi

Hlanganisa futhi ufanise izinhlobo eziningi zokuqukethwe ukuze udale ikhadi olidingayo, noma ujikijele yonke into lapho. Okuboniswe ngezansi izitayela zesithombe, amabhlogo, izitayela zombhalo, neqembu lohlu—konke kusongwe ngekhadi elinobubanzi obugxilile.

Placeholder Image cap
Isihloko sekhadi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

  • Cras justo odio
  • I-Dapibus ac facilisis in
  • I-Vestibulum ne-eros
Isixhumanisi sekhadi Esinye isixhumanisi 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Engeza unhlokweni ozikhethela kanye/noma unyaweni ngaphakathi kwekhadi.

Okufakiwe
Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize 
<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>

Izihloko zekhadi zingahlelwa ngokungeza .card-headerkuzakhi <h*>.

Okufakiwe
Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize 
<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>
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

Umuntu odumile ku- 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>
Okufakiwe
Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize
2 izinsuku ezedlule 
<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>

Ukulinganisa

Amakhadi awacabangi widthukuthi azoqala nini, ngakho azoba nobubanzi obungu-100% ngaphandle uma kushiwo ngenye indlela. Ungakwazi ukushintsha lokhu njengoba kudingeka nge-CSS yangokwezifiso, amakilasi egridi, imiksi yegridi ye-Sass, noma izinsiza.

Ukusebenzisa imakhaphu yegridi

Usebenzisa igridi, goqa amakhadi ngamakholomu nemigqa njengoba kudingeka.

Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize
Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize 
<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>

Ukusebenzisa izinsiza

Sebenzisa izinsiza zethu ezimbalwa ezitholakalayo zokulinganisa ukuze usethe ngokushesha ububanzi bekhadi.

Isihloko sekhadi

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Inkinobho
Isihloko sekhadi

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

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

Ukusebenzisa i-CSS yangokwezifiso

Sebenzisa i-CSS yangokwezifiso kumashidi akho esitayela noma njengezitayela ezingaphakathi komugqa ukuze usethe ububanzi.

Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize 
<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>

Ukuqondanisa umbhalo

Ungakwazi ukushintsha ngokushesha ukuqondana kombhalo kwanoma yiliphi ikhadi—lilonke noma izingxenye ezithile— ngamakilasi ethu okuqondanisa umbhalo .

Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize
Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize
Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize 
<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>

Engeza ukuzulazula okuthile kunhlokweni yekhadi (noma vimba) ngezinto ze-Bootstrap's nav .

Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Izithombe

Amakhadi afaka izinketho ezimbalwa zokusebenza ngezithombe. Khetha ekwengezeni "amakepisi wesithombe" ekupheleni kwekhadi, ukumboza izithombe ngokuqukethwe kwekhadi, noma ukumane ushumeke isithombe ekhadini.

Amakepisi wesithombe

Ngokufanayo nhlokweni nonyaweni, amakhadi angafaka “amakepisi wesithombe” aphezulu naphansi—izithombe phezulu noma phansi ekhadini.

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

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

Imbondela yesithombe

Guqula isithombe sibe ingemuva lekhadi bese umboza umbhalo wekhadi lakho. Kuye ngesithombe, ungase udinge noma ungadingi izitayela ezengeziwe noma izinsiza.

Placeholder Card image
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Qaphela ukuthi okuqukethwe akufanele kube kukhulu kunobude besithombe. Uma okuqukethwe kukukhulu kunesithombe okuqukethwe kuzovezwa ngaphandle kwesithombe.

Izitayela zamakhadi

Amakhadi ahlanganisa izinketho ezihlukahlukene zokwenza isizinda sawo ngokwezifiso, imingcele, nombala.

Ingemuva nombala

Sebenzisa umbhalo kanye nezinsiza zasemuva ukuze uguqule ukubukeka kwekhadi.

Unhlokweni
Isihloko sekhadi eliyisisekelo

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lesibili

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lempumelelo

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi eliyingozi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lesixwayiso

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lolwazi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi elikhanyayo

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi elimnyama

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

<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>
Ukudlulisa incazelo kubuchwepheshe obusizayo

Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (isb umbhalo obonakalayo), noma lufakwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-onlynekilasi.

Umngcele

Sebenzisa izinsiza zasemngceleni ukuze ushintshe border-colorikhadi. Qaphela ukuthi ungabeka .text-{color}amakilasi kumzali .cardnoma isethi engaphansi yokuqukethwe kwekhadi njengoba kuboniswe ngezansi.

Unhlokweni
Isihloko sekhadi eliyisisekelo

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lesibili

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lempumelelo

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi eliyingozi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lesixwayiso

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi lolwazi

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi elikhanyayo

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

Unhlokweni
Isihloko sekhadi elimnyama

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

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

Izinsiza ze-Mixins

Ungakwazi futhi ukushintsha imingcele kunhlokweni nonyaweni wekhadi njengoba kudingeka, futhi ususe ngisho nemingcele yawo background-colornge- .bg-transparent.

Unhlokweni
Isihloko sekhadi lempumelelo

Umbhalo othile oyisibonelo esisheshayo wokwakha esihlokweni sekhadi futhi wenze ingxenye enkulu yokuqukethwe ekhadini.

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

Isakhiwo sekhadi

Ngokungeziwe ekwenzeni isitayela okuqukethwe ngaphakathi kwamakhadi, i-Bootstrap ifaka phakathi izinketho ezimbalwa zokubeka uchungechunge lwamakhadi. Okwamanje, lezi zinketho zesakhiwo azikaphenduli .

Amaqembu amakhadi

Sebenzisa amaqembu amakhadi ukuze unikeze amakhadi njengento eyodwa, enamathiselwe enobubanzi obulinganayo namakholomu obude. Amaqembu amakhadi asebenzisa display: flex;ukufeza usayizi wawo ofanayo.

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

Placeholder Image cap
Isihloko sekhadi

Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Leli khadi linokuqukethwe okude kunelokuqala ukubonisa leso senzo sobude obulinganayo.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Uma usebenzisa amaqembu amakhadi anamanyaweni, okuqukethwe kwawo kuzolandelana ngokuzenzakalelayo.

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Igcine ukubuyekezwa emizuzwini engu-3 edlule
Placeholder Image cap
Isihloko sekhadi

Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule
Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Leli khadi linokuqukethwe okude kunelokuqala ukubonisa leso senzo sobude obulinganayo.

Igcine ukubuyekezwa emizuzwini engu-3 edlule 
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Izitezi zamakhadi

Udinga isethi yobubanzi obulinganayo nobude amakhadi anganamathiselwe elinye kwelinye? Sebenzisa amadekhi amakhadi.

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

Placeholder Image cap
Isihloko sekhadi

Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Leli khadi linokuqukethwe okude kunelokuqala ukubonisa leso senzo sobude obulinganayo.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Njengamaqembu ekhadi, onyaweni bamakhadi kumadekhi bazokleliswa ngokuzenzakalelayo.

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Igcine ukubuyekezwa emizuzwini engu-3 edlule
Placeholder Image cap
Isihloko sekhadi

Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule
Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elibanzi elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Leli khadi linokuqukethwe okude kunelokuqala ukubonisa leso senzo sobude obulinganayo.

Igcine ukubuyekezwa emizuzwini engu-3 edlule 
<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Amakholomu ekhadi

Amakhadi angahlelwa abe amakholomu afana ne- Masonry nge-CSS nje ngokuwagoqa ku- .card-columns. Amakhadi akhiwe ngezinto columnze-CSS esikhundleni se-flexbox ukuze aqondaniswe kalula. Amakhadi a-odwa ukusuka phezulu kuya phansi futhi kwesokunxele kuya kwesokudla.

Amakhanda phezulu! Ibanga lakho elinamakholomu ekhadi lingahluka. Ukuvimbela amakhadi ukwephula amakholomu, kufanele siwasethe display: inline-blockukuthi column-break-inside: avoidangakabi yisixazululo sokuvikela amabhulethi okwamanje.

Placeholder Image cap
Isihloko sekhadi esigoqa emugqeni omusha

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe. Lokhu okuqukethwe yinde kancane.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

Umuntu odumile ku- Source Title
Placeholder Image cap
Isihloko sekhadi

Leli khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inombolo ephelele ye-posuere erat.

Umuntu odumile ku- Source Title
Isihloko sekhadi

Leli khadi linesihloko esivamile kanye nendima emfushane yombhalo ngaphansi kwalo.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.

Umuntu odumile ku- Source Title
Isihloko sekhadi

Leli elinye ikhadi elinesihloko nombhalo osekelayo ngezansi. Leli khadi linokuqukethwe okwengeziwe okulenza libe lide kancane lilonke.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Amakholomu ekhadi anganwetshwa futhi enziwe ngendlela oyifisayo ngekhodi ethile eyengeziwe. Okuboniswe ngezansi isandiso .card-columnssekilasi sisebenzisa i-CSS efanayo esiyisebenzisayo—amakholomu e-CSS— ukuze sikhiqize isethi yezigaba ezisabelayo zokushintsha inani lamakholomu.

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