Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
in English

Makhadi

Makhadi ya Bootstrap ya nyika xigwitsirisi xa nhundzu lexi cinca-cincaka no andlariwa lexi nga na swihlawulekisi swo tala na swihlawulekisi.

Eka tluka leri

Hi

Khadi i xigwitsirisi xa nhundzu lexi cinca-cincaka ni lexi andlariweke . Yi katsa swihlawulekisi swa tinhloko-mhaka na le hansi, swilo swo hambana-hambana, mihlovo ya le ndzhaku ya mongo, na swihlawulekisi swa matimba swa nkombiso. Loko u tolovelane na Bootstrap 3, makhadi ma siva tiphaneleni ta hina ta khale, swihlovo ni swifaniso leswitsongo. Ntirho lowu fanaka ni wa swiphemu sweswo wu kumeka tanihi titlilasi ta swihundzuluxi swa makhadi.

Xikombiso

Makhadi ya akiwile hi ku fungha kutsongo na switayele hilaha swi nga kotekaka hakona, kambe ya ha kota ku tisa thani ya vulawuri na ku cinca-cinca. Ti akiwile hi flexbox, ti nyika ku ringanana ko olova naswona ti hlangana kahle na swiphemu swin’wana swa Bootstrap. A va na swona marginhi ku tiyimisela, kutani tirhisa switirhisiwa swo hambana -hambana hilaha swi lavekaka hakona.

Laha hansi ku na xikombiso xa khadi ra xisekelo leri nga na swilo leswi pfanganisiweke na ku anama loku nga cinciki. Makhadi a ma na ku anama loku nga cinciki ku sungula, hikwalaho hi ntumbuluko ma ta tata ku anama loku heleleke ka xiaki xa wona xa mutswari. Leswi swi endliwa hi ku olova hi tindlela ta hina to hambana-hambana to pima mpimo .

Placeholder Image cap
Xihloko xa khadi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Yana kun’wana 
<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>

Tinxaka ta swilo leswi nga endzeni

Makhadi ma seketela swilo swo hambana-hambana, ku katsa ni swifaniso, matsalwa, mintlawa ya nxaxamelo, swihlanganisi ni swin’wana. Laha hansi ku na swikombiso swa leswi seketeriwaka.

Miri

Xiaki xa khadi i .card-body. Yi tirhise nkarhi wun’wana ni wun’wana loko u lava xiphemu lexi nga ni swilo swo tala endzeni ka khadi.

Leri i tsalwa rin’wana endzeni ka miri wa khadi. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Swihloko, matsalwa ni swihlanganisi

Swihloko swa makhadi swi tirhisiwa hi ku engetela .card-titleeka <h*>thegi. Hi ndlela leyi fanaka, swihlanganisi swa engeteriwa ni ku vekiwa etlhelo ka xin’wana ni xin’wana hi ku engetela .card-linkeka <a>thegi.

Swihloko leswitsongo swi tirhisiwa hi ku engetela a .card-subtitleeka <h*>thegi. Loko the .card-titlena .card-subtitleswilo swi vekiwile eka .card-bodynchumu wo karhi, nhlokomhaka ya khadi na nhlokomhaka ya le hansi swi ringanisiwa kahle.

Xihloko xa khadi
Xihloko xa khadi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Xihlanganisi xa khadi Xihlanganisi xin’wana 
<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>

Swifaniso

.card-img-topyi veka xifaniso ehenhla ka khadi. Hi .card-text, tsalwa ri nga engeteriwa eka khadi. Tsalwa endzeni .card-textri nga tlhela ri endliwa xitayili hi tithegi ta HTML ta ntolovelo.

Placeholder Image cap

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

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

Xaxameta mintlawa

Endla minxaxamelo ya swilo leswi nga endzeni eka khadi leri nga ni ntlawa wa nxaxamelo wa ku hlantswa.

  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
<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>
Ku kombisiwa
  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
<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>
  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
Xifaniso xa le hansi xa khadi 
<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>

Sinki ya le khixini

Hlanganisa no fambisana na tinxaka to tala ta swilo ku endla khadi leri u ri lavaka, kutani u lahlela hinkwaswo kwalaho. Laha hansi ku kombisiwe switayele swa swifaniso, swibokisana, switayele swa matsalwa ni ntlawa wa nxaxamelo—hinkwaswo swi phutseriwe hi khadi ra ku anama loku nga cinciki.

Placeholder Image cap
Xihloko xa khadi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

  • Nchumu wo karhi
  • Nchumu wa vumbirhi
  • Nchumu wa vunharhu
Xihlanganisi xa khadi Xihlanganisi xin’wana 
<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>

Engetela nhlokomhaka leyi nga hlawuriwa na/kumbe nhlokomhaka ya le hansi endzeni ka khadi.

Ku kombisiwa
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<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>

Tinhlokomhaka ta makhadi ti nga endliwa xitayili hi ku engetela .card-headereka <h*>swiaki.

Ku kombisiwa
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<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>
Ntshaho

Xitlhokovetselo lexi tivekaka swinene, lexi nga eka elemente ya blockquote.

Munhu loyi a dumeke eka 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>
Ku kombisiwa
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
2 wa masiku lama hundzeke 
<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>

Ku pima mpimo

Makhadi ya teka ku nga ri na ku kongoma widthku sungula, kutani ya ta va ya anama hi 100% handle ka loko swi boxiwile hi ndlela yin’wana. U nga cinca leswi tanihilaha swi lavekaka hakona hi CSS ya ntolovelo, titlilasi ta gridi, mixins ya grid Sass, kumbe switirhisiwa.

Hi ku tirhisa grid markup

Hi ku tirhisa gridi, phutsela makhadi hi tikholomu ni tilayini loko swi laveka.

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<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>

Ku tirhisa switirhisiwa swa vukorhokeri

Tirhisa switirhisiwa swa hina swi nga ri swingani swa ku pima mpimo leswi nga kona leswaku u hatlisa u veka ku anama ka khadi.

Xihloko xa khadi

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Konopa
Xihloko xa khadi

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

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

Ku tirhisa CSS ya ntolovelo

Tirhisa CSS ya ntolovelo eka switayele swa wena kumbe tanihi switayele swa le ndzeni ka layini ku veka ku anama.

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<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>

Ku ringanisa matsalwa

U nga cinca hi ku hatlisa ku ringanisa matsalwa ya khadi rihi na rihi—hi ku helela kumbe swiphemu swo karhi—hi titlilasi ta hina to ringanisa matsalwa .

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<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>

Engetela ku famba-famba ko karhi eka nhloko-mhaka ya khadi (kumbe xibokisana) hi swiphemu swa nav swa Bootstrap .

Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<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>
Vutshunguri byo hlawuleka bya xihloko

Hi tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Yana kun’wana 
<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>

Swifaniso

Makhadi ma katsa tindlela ti nga ri tingani to tirha hi swifaniso. Hlawula eka ku engetela “swiphepherhele swa swifaniso” emakumu hamambirhi ya khadi, ku funengeta swifaniso hi leswi nga endzeni ka khadi kumbe ku nghenisa ntsena xifaniso eka khadi.

Swifunengeto swa swifaniso

Ku fana ni tinhloko-mhaka ni le hansi, makhadi ma nga ha katsa “swiphepherhele swa swifaniso” swa le henhla ni swa le hansi—swifaniso leswi nga ehenhla kumbe ehansi ka khadi.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

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>

Swifunengeto swa swifaniso

Pfuxeta xifaniso xi va ndzhaku ka khadi ivi u funengeta tsalwa ra khadi ra wena. Ku ya hi xifaniso, u nga ha lava kumbe u nga lavi switayele leswi engetelekeke kumbe switirhisiwa.

Placeholder Card image
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

<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>
Xiya leswaku leswi nga endzeni a swi fanelanga swi va swikulu ku tlula ku leha ka xifaniso. Loko nhundzu yi ri yikulu ku tlula xifaniso nhundzu yi ta kombisiwa ehandle ka xifaniso.

Ololoka

Hi ku tirhisa nhlanganelo wa titlilasi ta gridi ni ta vukorhokeri, makhadi ma nga endliwa ma va lama nga etlhelo hi ndlela leyi nga ni xinghana eka tiselfoni ni ku hlamula. Eka xikombiso lexi nga laha hansi, hi susa ti grid gutters na .g-0na ku tirhisa .col-md-*titlilasi ku endla khadi ri ri horizontal eka mdbreakpoint. Ku nga ha laveka mindzulamiso yin’wana hi ku ya hi leswi nga eka khadi ra wena.

Placeholder Image
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

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

Switayili swa makhadi

Makhadi ma katsa tindlela to hambana-hambana to cinca-cinca swifaniso swa wona swa le ndzhaku, mindzilakano ni muvala wa wona.

Ndzandzelelano na muvala

Tirhisa switirhisiwa swa muvala wa tsalwa ni swa le ndzhaku leswaku u cinca ndlela leyi khadi ri langutekaka ha yona.

Nhlokomhaka
Nhlokomhaka ya khadi ra le hansi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra vumbirhi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra ku humelela

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra khombo

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Nhlokomhaka ya khadi ra xilemukiso

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra info

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ro voninga

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra munyama

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

<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>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hiddentlilasi.

Ndzilekano

Tirhisa switirhisiwa swa ndzilakano ku cinca ntsena border-colorya khadi. Xiya leswaku u nga veka .text-{color}titlilasi eka mutswari .cardkumbe ntlawa lowutsongo wa leswi nga endzeni ka khadi hilaha swi kombisiweke hakona laha hansi.

Nhlokomhaka
Nhlokomhaka ya khadi ra le hansi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra vumbirhi

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra ku humelela

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra khombo

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Nhlokomhaka ya khadi ra xilemukiso

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra info

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ro voninga

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Nhlokomhaka
Xihloko xa khadi ra munyama

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

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

Switirhisiwa swa mixins

U nga ha tlhela u cinca mindzilakano eka nhloko ya khadi ni le hansi loko swi laveka, hambi ku ri ku susa ya yona background-colorhi .bg-transparent.

Nhlokomhaka
Xihloko xa khadi ra ku humelela

Tsalwa rin’wana ra xikombiso xa xihatla ro aka eka nhloko-mhaka ya khadi ni ku endla xiphemu lexikulu xa leswi nga endzeni ka khadi.

Xiphemu xa le hansi 
<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>

Xivumbeko xa khadi

Ku engetela eka ku endla switayele leswi nga endzeni ka makhadi, Bootstrap yi katsa swihlawulekisi swi nga ri swingani swo veka nxaxamelo wa makhadi. Hi nkarhi wa sweswi, swihlawulekisi leswi swa layout a swi si hlamula .

Mintlawa ya makhadi

Tirhisa mintlawa ya makhadi ku hundzuluxela makhadi tanihi xiaki xin’we, lexi khomanisiweke lexi nga ni tikholomu to anama ni ku tlakuka loku ringanaka. Mintlawa ya makhadi yi sungula yi hlanganisiwile naswona yi tirhisa display: flex;ku va yi namarhela hi tidimenxini leti fanaka ku sukela eka ndhawu smyo wisa.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago

Placeholder Image cap
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago

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

Loko u tirhisa mintlawa ya makhadi leyi nga ni swifaniso swa le hansi, leswi nga endzeni ka yona swi ta layini hi ku tisungulela.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago
Placeholder Image cap
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago
Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago 
<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>

Makhadi ya gridi

Tirhisa sisiteme ya giridi ya Bootstrap na .row-colstitlilasi ta yona ku lawula leswaku u kombisa tikholomu tingani ta gridi (ti phutseriwe hi makhadi ya wena) hi layini. Xikombiso, laha i .row-cols-1ku veka makhadi eka kholomo yin’we, na ku .row-cols-md-2avanyisa makhadi ya mune ku ya hi ku anama loku ringanaka ku tsemakanya tilayini to tala, ku suka eka ndhawu yo tshoveka ya le xikarhi ku ya ehenhla.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

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

Yi cince yi va .row-cols-3kutani u ta vona ku phutsela ka khadi ra vumune.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

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

Loko u lava ku leha loku ringanaka, engetela .h-100eka makhadi. Loko u lava ku tlakuka loku ringanaka hi ku tiyimisela, u nga veka $card-height: 100%eka Sass.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro koma.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro leha leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

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

Ku fana ni mintlawa ya makhadi, swifaniso swa le hansi swa makhadi swi ta layini hi swoxe.

Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Nhundzu leyi yi lehe nyana.

Ku hetelela ku pfuxetiwa 3 mins ago
Placeholder Image cap
Xihloko xa khadi

Khadi leri ri na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela.

Ku hetelela ku pfuxetiwa 3 mins ago
Placeholder Image cap
Xihloko xa khadi

Leri i khadi ro anama leri nga na tsalwa ro seketela laha hansi tanihi xiletelo xa ntumbuluko eka nhundzu yo engetela. Khadi leri ri na nhundzu yo leha swinene ku tlula yo sungula ku kombisa xiendlo xexo xa ku leha loku ringanaka.

Ku hetelela ku pfuxetiwa 3 mins ago 
<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>

Ku endliwa ka maribye

Eka v4hi tirhise endlelo ra CSS ntsena ku tekelela mahanyelo ya tikholomu to fana na Masonry , kambe endlelo leri ri tile na switandzhaku swo tala leswi nga tsakisiki . Loko u lava ku va na muxaka lowu wa layout eka v5, u nga ha tirhisa ntsena Masonry plugin. Masonry a yi katsiwanga eka Bootstrap , kambe hi endle xikombiso xa demo ku ku pfuna ku sungula.

Sass

Swilo leswi cinca-cincaka

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