Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
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 .

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.

  • Into
  • Into yesibili
  • Into yesithathu
<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
<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 
<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.

Placeholder Image cap
Isihloko sekhadi

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

  • Into
  • Into yesibili
  • Into yesithathu
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">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>

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

Isicaphuna esaziwayo, esiqukethwe kusici se-blockquote.

Umuntu odumile ku- Source Title 
<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 
<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-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 
<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" 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-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.

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.

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.

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

Sebenzisa umbala wombhalo 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-dark 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-dark 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-dark 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 .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.

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

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>

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.

Placeholder Image cap
Isihloko sekhadi

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

Placeholder Image cap
Isihloko sekhadi

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

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Placeholder Image cap
Isihloko sekhadi

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

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

Placeholder Image cap
Isihloko sekhadi

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

Placeholder Image cap
Isihloko sekhadi

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

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Placeholder Image cap
Isihloko sekhadi

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

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

Placeholder Image cap
Isihloko sekhadi

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

Placeholder Image cap
Isihloko sekhadi

Leli yikhadi elifushane.

Placeholder Image cap
Isihloko sekhadi

Leli ikhadi elide elinombhalo osekelayo ngezansi njengokuholela kokungena kokuqukethwe okwengeziwe.

Placeholder Image cap
Isihloko sekhadi

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

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

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

Sass

Okuguquguqukayo

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;