in English

Amakhadi

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

Kuleli khasi

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 .

Isihloko sekhadi

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

Hamba ndawana thize

html

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

html

<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

html

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

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

html

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

Into
Into yesibili
Into yesithathu

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Okufakiwe

Into
Into yesibili
Into yesithathu

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

Into
Into yesibili
Into yesithathu

Unyaweni wekhadi

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</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.

Isihloko sekhadi

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

Into
Into yesibili
Into yesithathu

Isixhumanisi sekhadi Esinye isixhumanisi

html

<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">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Unhlokweni nonyaweni

Engeza unhlokweni ozikhethela kanye/noma unyaweni ngaphakathi kwekhadi.

Okufakiwe

Ukwelashwa kwesihloko okukhethekile

Ngombhalo osekelayo ongezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Hamba ndawana thize

html

<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

html

<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

Isicaphuna esaziwayo, esiqukethwe kusici se-blockquote.

Umuntu odumile ku- Source Title

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</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

html

<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

html

<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

html

<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

html

<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

html

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

html

<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" aria-current="true" 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">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

html

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

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

html

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

Imbondela yesithombe

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

Isihloko sekhadi

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

Igcine ukubuyekezwa emizuzwini engu-3 edlule

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

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

Evundlile

Ngokusebenzisa inhlanganisela yamakilasi egridi kanye nezinsiza, amakhadi angenziwa avundlile ngendlela esebenziseka kalula futhi esabelayo. Esibonelweni esingezansi, sisusa ama-gutters egridi .g-0futhi sisebenzise .col-md-*amakilasi ukwenza ikhadi livundlile endaweni mdyokuphumula. Ukulungiswa okwengeziwe kungase kudingeke kuye ngokuqukethwe kwekhadi lakho.

Isihloko sekhadi

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

Igcine ukubuyekezwa emizuzwini engu-3 edlule

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <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>
</div>

Izitayela zamakhadi

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

Ingemuva nombala

Kwengezwe ku-v5.2.0

Setha background-coloringaphambili colorelinokuqhathanisa nabasizi bethu.text-bg-{color} . Ngaphambilini bekudingeka ukuthi ubhanqe ukukhetha kwakho .text-{color}kanye .bg-{color}nezinsiza zokwenza isitayela, ongazisebenzisa uma uthanda.

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.

html

<div class="card text-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-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-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-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-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-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 text-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-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 .visually-hiddennekilasi.

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.

html

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

html

<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 aqala estakiwe futhi asebenzise display: flex;ukunamathela ngobukhulu obufanayo obuqala endaweni smyokuphumula.

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 khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

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

html

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

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 khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

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

html

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

Amakhadi egridi

Sebenzisa isistimu yegridi ye-Bootstrap kanye .row-colsnezigaba zayo ukuze ulawule ukuthi mangaki amakholomu egridi (asongwe emakhadini akho) owabonisa umugqa ngamunye. Isibonelo, nakhu .row-cols-1ukwendlala amakhadi kukholamu eyodwa, .row-cols-md-2nokuhlukanisa amakhadi amane abe ububanzi obulinganayo emigqeni eminingi, ukusuka endaweni ephakathi nendawo ukuya phezulu.

Isihloko sekhadi

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

Isihloko sekhadi

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

Isihloko sekhadi

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Isihloko sekhadi

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

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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>
      </div>
    </div>
  </div>
  <div class="col">
    <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>
      </div>
    </div>
  </div>
  <div class="col">
    <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <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>
      </div>
    </div>
  </div>
</div>

Lishintshe libe .row-cols-3futhi uzobona ukugoqa kwekhadi lesine.

Isihloko sekhadi

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

Isihloko sekhadi

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

Isihloko sekhadi

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Isihloko sekhadi

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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>
      </div>
    </div>
  </div>
  <div class="col">
    <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>
      </div>
    </div>
  </div>
  <div class="col">
    <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <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>
      </div>
    </div>
  </div>
</div>

Uma udinga ubude obulinganayo, engeza .h-100emakhadini. Uma ufuna ukuphakama okulinganayo ngokuzenzakalela, ungasetha $card-height: 100%kokuthi Sass.

Isihloko sekhadi

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

Isihloko sekhadi

Leli yikhadi elifushane.

Isihloko sekhadi

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Isihloko sekhadi

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <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>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <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 short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <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>
      </div>
    </div>
  </div>
</div>

Njengamaqembu ekhadi, onyaweni bekhadi bazomugqa ngokuzenzakalelayo.

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 khadi linombhalo osekelayo ngezansi njengendlela engokwemvelo yokuholela kokuqukethwe okwengeziwe.

Igcine ukubuyekezwa emizuzwini engu-3 edlule

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <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>
  <div class="col">
    <div class="card h-100">
      <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>
  <div class="col">
    <div class="card h-100">
      <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>
</div>

I-Masonry

Ngaphakathi v4sisebenzise indlela ye-CSS kuphela ukulingisa ukuziphatha kwamakholomu afana ne- Masonry , kodwa le nqubo ifike nemithelela eminingi engemihle . Uma ufuna ukuba nalolu hlobo lwesakhiwo ku- v5, ungavele usebenzise i-plugin ye-Masonry. I-Masonry ayifakiwe ku-Bootstrap , kodwa senze isibonelo sedemo ukukusiza ukuthi uqalise.

CSS

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka kwe-CSS ye-Bootstrap, amakhadi manje asebenzisa okuguquguqukayo kwasendaweni kwe-CSS .cardukuze enze ngokwezifiso isikhathi sangempela esithuthukisiwe. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Izinguquko ze-Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;

Amakhadi

Mayelana

Isibonelo

Isihloko sekhadi

Izinhlobo zokuqukethwe

Umzimba

Izihloko, umbhalo, nezixhumanisi

Isihloko sekhadi

Umbhalo ongezansi wekhadi

Izithombe

Amaqembu ohlwini

Usinki wekhishi

Isihloko sekhadi

Unhlokweni nonyaweni

Ukwelashwa kwesihloko okukhethekile

Okufakiwe

Ukwelashwa kwesihloko okukhethekile

Ukwelashwa kwesihloko okukhethekile

Ukulinganisa

Ukusebenzisa imakhaphu yegridi

Ukwelashwa kwesihloko okukhethekile

Ukwelashwa kwesihloko okukhethekile

Ukusebenzisa izinsiza

Isihloko sekhadi

Isihloko sekhadi

Ukusebenzisa i-CSS yangokwezifiso

Ukwelashwa kwesihloko okukhethekile

Ukuqondanisa umbhalo

Ukwelashwa kwesihloko okukhethekile

Ukwelashwa kwesihloko okukhethekile

Ukwelashwa kwesihloko okukhethekile

Ukuzulazula

Ukwelashwa kwesihloko okukhethekile

Ukwelashwa kwesihloko okukhethekile

Izithombe

Amakepisi wesithombe

Isihloko sekhadi

Isihloko sekhadi

Imbondela yesithombe

Isihloko sekhadi

Evundlile

Isihloko sekhadi

Izitayela zamakhadi

Ingemuva nombala

Isihloko sekhadi eliyisisekelo

Isihloko sekhadi lesibili

Isihloko sekhadi lempumelelo

Isihloko sekhadi eliyingozi

Isihloko sekhadi lesixwayiso

Isihloko sekhadi lolwazi

Isihloko sekhadi elikhanyayo

Isihloko sekhadi elimnyama

Ukudlulisa incazelo kubuchwepheshe obusizayo

Umngcele

Isihloko sekhadi eliyisisekelo

Isihloko sekhadi lesibili

Isihloko sekhadi lempumelelo

Isihloko sekhadi eliyingozi

Isihloko sekhadi lesixwayiso

Isihloko sekhadi lolwazi

Isihloko sekhadi elikhanyayo

Isihloko sekhadi elimnyama

Izinsiza ze-Mixins

Isihloko sekhadi lempumelelo

Isakhiwo sekhadi

Amaqembu amakhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Amakhadi egridi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi

Isihloko sekhadi