Source

Amakhadi

Amakhadi e-Bootstrap abonelela ngesikhongozeli somxholo esiguquguqukayo kunye nesandisiweyo esinezinto ezininzi ezahlukeneyo kunye neenketho.

Malunga

Ikhadi sisikhongozeli somxholo esibhetyebhetye kwaye esandisiweyo . Ibandakanya iinketho zemibhalo engasentla kwekhasi kunye nemibhalo engezantsi, uluhlu olubanzi lomxholo, imibala yangasemva yomxholo, kunye nokhetho olunamandla lokubonisa. Ukuba uqhelene neBootstrap 3, amakhadi athatha indawo yeepaneli zethu ezindala, amaqula, kunye ne-thumbnails. Ukusebenza okufanayo naloo macandelo kuyafumaneka njengeeklasi zesilungisi samakhadi.

Umzekelo

Amakhadi akhiwe ngophawu oluncinci kunye nezitayile kangangoko kunokwenzeka, kodwa asakwazi ukuhambisa itoni yolawulo kunye nokwenza ngokwezifiso. Yakhelwe nge-flexbox, inikezela ngolungelelwaniso olulula kwaye ixube kakuhle namanye amacandelo e-Bootstrap. Abanayo marginngokungagqibekanga, ngoko ke sebenzisa izixhobo zokubeka izithuba njengoko kufuneka.

Ngezantsi umzekelo wekhadi elisisiseko elinomxholo oxubileyo kunye nobubanzi obusisigxina. Amakhadi akanalo ububanzi obumiselweyo ukuqala, ngoko baya kugcwalisa ububanzi obupheleleyo bento yomzali wayo. Oku kulungelelaniswa ngokulula ngeendlela zethu ezahlukeneyo zokulinganisa .

Placeholder Image cap
Isihloko sekhadi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Yiya kwenye indawo 
<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>

Iintlobo zomxholo

Amakhadi axhasa uluhlu olubanzi lomxholo, kubandakanywa imifanekiso, umbhalo, amaqela oluhlu, amakhonkco, kunye nokunye. Apha ngezantsi kukho imizekelo yezinto ezixhaswayo.

Umzimba

Ibhloko yokwakha yekhadi yi .card-body. Yisebenzise nanini na ufuna icandelo elikhuselweyo ngaphakathi kwekhadi.

Le yenye isicatshulwa ngaphakathi kumzimba wekhadi. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Izihloko, umbhalo, kunye namakhonkco

.card-titleIzihloko zekhadi zisetyenziswa ngokudibanisa <h*>kwithegi. Ngendlela efanayo, amakhonkco ongezwa kwaye abekwe ecaleni komnye nomnye ngokudibanisa .card-linkkwithegi <a>.

Imibhalo engezantsi isetyenziswa ngokongeza .card-subtitleu-a <h*>kwithegi. Ukuba i .card-titlekunye .card-subtitlenezinto zifakwe .card-bodykwinto, isihloko sekhadi kunye nesihlokwana zilungelelaniswe kakuhle.

Isihloko sekhadi
Isihlokwana sekhadi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Ikhonkco lekhadi Enye ikhonkco 
<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>

Imifanekiso

.card-img-topibeka umfanekiso phezulu ekhadini. Nge .card-text, okubhaliweyo kunokongezwa kwikhadi. Okubhaliweyo ngaphakathi .card-textkungenziwa kwakhona ngeendlela eziqhelekileyo zeethegi zeHTML.

Placeholder Image cap

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

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

Dwelisa amaqela

Yenza uluhlu lwesiqulatho kwikhadi kunye neqela loluhlu olugungxulwayo.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum kunye 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>
Ibonisiwe
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum kunye 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>

Isinki yekhitshi

Hlanganisa kwaye utshatise iintlobo ezininzi zomxholo ukwenza ikhadi olifunayo, okanye ulahle yonke into apho. Kuboniswe ngezantsi izimbo zemifanekiso, iibhloko, izimbo zokubhaliweyo, kunye neqela loluhlu-zonke zisongelwe kwikhadi elinobubanzi obusisigxina.

Placeholder Image cap
Isihloko sekhadi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum kunye eros
Ikhonkco lekhadi Enye ikhonkco 
<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>

Yongeza iheader ozikhethelayo kunye/okanye ifooter ngaphakathi kwekhadi.

Ibonisiwe
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo 
<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>

Iintloko zekhadi zinokubhalwa ngokongeza .card-headerkwizinto <h*>.

Ibonisiwe
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo 
<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>
Caphula

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

Umntu odumileyo kwiSihloko soMthombo 
<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>
Ibonisiwe
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
kwiintsuku ezi-2 ezidlulileyo 
<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>

Ubungakanani

Amakhadi athatheli ngqalelo widthukuba aqale, ngoko ke aya kuba 100% ububanzi ngaphandle kokuba kuchazwe ngenye indlela. Ungatshintsha oku njengoko kufuneka ngeCSS yesiko, iiklasi zegridi, imixube yegridi yeSass, okanye izinto eziluncedo.

Ukusebenzisa uphawu lwegridi

Usebenzisa igridi, songela amakhadi ngokweekholamu kunye nemiqolo njengoko kufuneka.

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo 
<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 izinto eziluncedo

Sebenzisa izixhobo zethu ezimbalwa ezifumanekayo zokulinganisa ukuseta ngokukhawuleza ububanzi bekhadi.

Isihloko sekhadi

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Iqhosha
Isihloko sekhadi

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

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

Sebenzisa i-CSS yesiko kushiti lwakho lwesimbo okanye njengezimbo ezingaphakathi ukuseta ububanzi.

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo 
<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>

Ulungelelwaniso lombhalo

Ungatshintsha ngokukhawuleza ulungelelwaniso lombhalo lwalo naliphi na ikhadi—liphelele okanye lilonke okanye iindawo ezithile—kunye neeklasi zethu zokulungelelanisa okubhaliweyo .

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo 
<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>

Yongeza ukukhangela kwiheda yekhadi (okanye ibhlokhi) enezixhobo ze-Bootstrap ze- nav .

Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo 
<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>
Unyango lwesihloko esikhethekileyo

Ngesicatshulwa esixhasayo esingezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Yiya kwenye indawo 
<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>

Imifanekiso

Amakhadi abandakanya iinketho ezimbalwa zokusebenza ngemifanekiso. Khetha ekuhlomeleni "iminqwazi yomfanekiso" nakweyiphi na isiphelo sekhadi, ugqume imifanekiso enomxholo wekhadi, okanye ubethelele nje umfanekiso ekhadini.

Iminqwazi yomfanekiso

Ngokufana neeheader kunye neefooter, amakhadi anokubandakanya phezulu nangaphantsi "ii-image caps" -imifanekiso engaphezulu okanye ephantsi kwekhadi.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

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>

Ukwaleka kwemifanekiso

Guqula umfanekiso ube ngasemva kwekhadi kwaye waleke isicatshulwa sekhadi lakho. Ngokuxhomekeke kumfanekiso, unokufuna okanye ungadingi izitayile ezongezelelweyo okanye izinto eziluncedo.

Placeholder Card image
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

<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 ukuba umxholo akufuneki ube mkhulu kunobude bomfanekiso. Ukuba umxholo mkhulu kunomfanekiso umxholo uya kuboniswa ngaphandle komfanekiso.

Ukuthe tye

Ukusebenzisa udibaniso lwegridi kunye neeklasi eziluncedo, amakhadi anokwenziwa axwesileyo ngendlela ehambelana neselula kunye nokuphendula. Kulo mzekelo ungezantsi, sisusa iigutter zegridi kunye .no-guttersnokusebenzisa .col-md-*iiklasi ukwenza ikhadi lithe tyaba kwindawo mdyokuphumla. Olunye uhlengahlengiso lunokufuneka ngokuxhomekeke kwisiqulatho sekhadi lakho.

Placeholder Image
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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>

Izimbo zamakhadi

Amakhadi abandakanya iindlela ezahlukeneyo zokukhetha ukwenza imvelaphi yabo, imida kunye nombala.

Imvelaphi kunye nombala

Sebenzisa okubhaliweyo kunye nezinto ezingasemva ukuze utshintshe inkangeleko yekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lokuqala

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesibini

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lempumelelo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lengozi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesilumkiso

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lolwazi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elikhanyayo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elimnyama

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

<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>
Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .sr-onlyeklasini.

Umda

Sebenzisa izinto eziluncedo kumda ukutshintsha nje border-colorikhadi. Qaphela ukuba ungabeka .text-{color}iiklasi kumzali .cardokanye iseti esezantsi yeziqulatho zekhadi njengoko kubonisiwe ngezantsi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lokuqala

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesibini

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lempumelelo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lengozi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lesilumkiso

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lolwazi

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elikhanyayo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi elimnyama

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

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

Mixins eziluncedo

Unako kwakhona ukutshintsha imida kwiheader yekhadi kunye ne footer njengoko kufuneka, kwaye nokuba ukususa zabo background-colornge .bg-transparent.

Okubhalwe ngasentla kwekhasi
Isihloko sekhadi lempumelelo

Omnye umzekelo okhawulezayo wombhalo wokwakha kwisihloko sekhadi kwaye wenze isambuku somxholo wekhadi.

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

Uyilo lwekhadi

Ukongeza kwisitayile somxholo ngaphakathi kwamakhadi, iBootstrap ibandakanya iinketho ezimbalwa zokubeka uluhlu lwamakhadi. Okwangoku , olu khetho loyilo alukaphenduli .

Amaqela amakhadi

Sebenzisa amaqela amakhadi ukunika amakhadi njengento enye, encanyathiselweyo enobubanzi obulinganayo nobude bekholamu. Amaqela amakhadi asebenzisa display: flex;ukuphumeza ubungakanani bawo obufanayo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Eli khadi linomxholo omde ngakumbi kunowokuqala ukubonisa ukuba isenzo sobude obulinganayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

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

Xa usebenzisa amaqela amakhadi anamazantsi, umxholo wabo uya kufola ngokuzenzekelayo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Eli khadi linomxholo omde ngakumbi kunowokuqala ukubonisa ukuba isenzo sobude obulinganayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo 
<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>

Iidekhi zekhadi

Ngaba ufuna isethi yobubanzi obulinganayo kunye namakhadi obude angadityaniswanga enye kwenye? Sebenzisa iidekhi zamakhadi.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Eli khadi linomxholo omde ngakumbi kunowokuqala ukubonisa ukuba isenzo sobude obulinganayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

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

Njengamaqela amakhadi, iifooter zamakhadi kwidesika ziya kufola ngokuzenzekelayo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo
Placeholder Image cap
Isihloko sekhadi

Eli likhadi elibanzi elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Eli khadi linomxholo omde ngakumbi kunowokuqala ukubonisa ukuba isenzo sobude obulinganayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo 
<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>

Amakhadi egridi

Sebenzisa inkqubo yegridi yeBootstrap kunye .row-colsneeklasi zayo ukulawula ukuba zingaphi iikholamu zegridi (ezisongelwe kumakhadi akho) oyibonisayo kumqolo ngamnye. Umzekelo, nanku .row-cols-1ukubeka amakhadi kwikholamu enye, kwaye .row-cols-md-2ukwahlula amakhadi amane ukuya kububanzi obulinganayo kwimiqolo emininzi, ukusuka kwindawo ephakathi ukuya phezulu.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Yitshintshe .row-cols-3kwaye uza kubona ikhadi lesine lokusonga.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Xa ufuna ubude obulinganayo, yongeza .h-100kumakhadi. Ukuba ufuna ubude obulinganayo ngokungagqibekanga, ungacwangcisa $card-height: 100%kwiSass.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elifutshane.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Placeholder Image cap
Isihloko sekhadi

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Iikholamu zekhadi

Amakhadi anokuthi alungelelaniswe kwiikholamu zeMasonry -ezifana neCSS nje ngokuzisonga .card-columns. Amakhadi akhiwe ngeempawu ze-CSS columnendaweni ye-flexbox ukwenzela ukulungelelaniswa okulula. Amakhadi a-odolwe ukusuka phezulu ukuya ezantsi kwaye ukusuka ekhohlo ukuya ekunene.

Iintloko phezulu! Imayile yakho eneentsika zekhadi isenokwahluka. Ukunqanda ukuba amakhadi aqhawuke kwiikholamu, kufuneka siwasethe display: inline-blocknjengengekasisisombululo column-break-inside: avoidsokukhusela iimbumbulu.

Placeholder Image cap
Isihloko sekhadi esonga kumgca omtsha

Eli likhadi elide elinombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo. Lo mxholo umde kancinane.

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

Umntu odumileyo kwiSihloko soMthombo
Placeholder Image cap
Isihloko sekhadi

Eli khadi linombhalo oxhasayo ongezantsi njengento ekhokelela kwindalo kumxholo owongezelelweyo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat.

Umntu odumileyo kwiSihloko soMthombo
Isihloko sekhadi

Eli khadi linesihloko esiqhelekileyo kunye nomhlathi omfutshane wesicatshulwa ngaphantsi kwayo.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

Placeholder Card image

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

Umntu odumileyo kwiSihloko soMthombo
Isihloko sekhadi

Eli lelinye ikhadi elinesihloko kunye nesicatshulwa esixhasayo ngezantsi. Eli khadi linomxholo owongezelelweyo wokulenza libe lide kancinane xa lilonke.

Igqityelwe ukuvuselelwa kwimizuzu emi-3 edluleyo

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

Iikholomu zekhadi nazo zingandiswa kwaye zenziwe ngokwezifiso kunye nekhowudi eyongezelelweyo. Okuboniswe ngezantsi kukwandiswa .card-columnskweklasi kusetyenziswa i-CSS efanayo esiyisebenzisayo-iikholamu ze-CSS-ukuvelisa isethi yamanqanaba aphendulayo okutshintsha inani leekholomu.

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