in English

Makhadi

Makhadi a Bootstrap amapereka chidebe chosinthika komanso chokulirapo chokhala ndi mitundu ingapo ndi zosankha.

Za

Khadi ndi chotengera chosinthika komanso chowonjezera. Zimaphatikizapo zosankha zapamutu ndi m'munsi, zinthu zosiyanasiyana, mitundu yakumbuyo, ndi zosankha zamphamvu zowonetsera. Ngati mumadziwa Bootstrap 3, makhadi amalowetsa mapanelo athu akale, zitsime, ndi tizithunzi. Zofanana ndi zigawozi zimapezeka ngati makalasi osinthira makadi.

Chitsanzo

Makhadi amapangidwa ndi mawonekedwe ochepa komanso masitayelo momwe angathere, komabe amatha kuwongolera ndikusintha mwamakonda. Omangidwa ndi flexbox, amapereka kuwongolera kosavuta ndikusakanikirana bwino ndi zida zina za Bootstrap. Alibe marginmwachisawawa, choncho gwiritsani ntchito malo ochezera ngati pakufunika.

Pansipa pali chitsanzo cha khadi yoyambira yokhala ndi zinthu zosakanikirana komanso m'lifupi mwake. Makhadi alibe m'lifupi mwake kuti ayambike, kotero amadzaza m'lifupi mwake monse mwamakolo ake. Izi zimasinthidwa mosavuta ndi zosankha zathu zosiyanasiyana .

Placeholder Image cap
Mutu wakhadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

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

Mitundu yazinthu

Makhadi amathandiza zinthu zosiyanasiyana, kuphatikizapo zithunzi, malemba, magulu a mndandanda, maulalo, ndi zina. M'munsimu muli zitsanzo za zomwe zimathandizidwa.

Thupi

Chomangira cha khadi ndi .card-body. Igwiritseni ntchito nthawi iliyonse mukafuna gawo lopindika mkati mwa khadi.

Awa ndi mawu ena mkati mwa khadi. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Mitu, mawu, ndi maulalo

Mitu yamakhadi imagwiritsidwa ntchito powonjezera .card-titlepa <h*>tag. Momwemonso, maulalo amawonjezeredwa ndikuyikidwa pafupi ndi mnzake powonjezera .card-linkku <a>tag.

.card-subtitleMa subtitles amagwiritsidwa ntchito powonjezera <h*>tag. Ngati .card-titlendi .card-subtitlezinthuzo zayikidwa mu .card-bodychinthu, mutu wa khadi ndi mawu ang'onoang'ono zimagwirizana bwino.

Mutu wakhadi
Mawu omasulira a khadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Khadi ulalo Ulalo wina 
<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>

Zithunzi

.card-img-topamaika chithunzi pamwamba pa khadi. Ndi .card-text, malemba akhoza kuwonjezeredwa ku khadi. Zolemba mkati .card-textzimathanso kulembedwa ndi ma tag amtundu wa HTML.

Placeholder Image cap

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

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

Lembani magulu

Pangani ndandanda wa zinthu mu khadi ndi flush mndandanda gulu.

  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
<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>
Zowonetsedwa
  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
<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>
  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
Khadi pansi 
<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>

Kitchen sinki

Sakanizani ndikugwirizanitsa mitundu ingapo kuti mupange khadi yomwe mukufuna, kapena ponyani chilichonse mmenemo. Pansipa pali masitayelo azithunzi, midadada, masitayelo a zolemba, ndi gulu la mndandanda-zonse zitakulungidwa ndi khadi lofikira.

Placeholder Image cap
Mutu wakhadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

  • Chinthu
  • Chinthu chachiwiri
  • Chinthu chachitatu
Khadi ulalo Ulalo wina 
<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>

Onjezani mutu wamutu ndi/kapena pansi pa khadi.

Zowonetsedwa
Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

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

Mitu yamakhadi imatha kusinthidwa powonjezera .card-headerzinthu <h*>.

Zowonetsedwa
Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake 
<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>
Mawu

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu 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>
Zowonetsedwa
Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake
2 masiku apitawo 
<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>

Kukula

Makhadi saganiza widthkuti ayambire, kotero adzakhala 100% m'lifupi pokhapokha atanenedwa mwanjira ina. Mutha kusintha izi ngati pakufunika ndi CSS, makalasi a gridi, zosakaniza za grid Sass, kapena zofunikira.

Kugwiritsa ntchito grid markup

Pogwiritsa ntchito gridi, kulungani makhadi m'mizere ndi mizere ngati pakufunika.

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake
Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

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

Kugwiritsa ntchito zida

Gwiritsani ntchito zida zathu zochepa zomwe zilipo kuti mukhazikitse kukula kwa khadi mwachangu.

Mutu wakhadi

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Batani
Mutu wakhadi

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

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

Kugwiritsa ntchito CSS yokhazikika

Gwiritsani ntchito CSS yokhazikika pamapepala anu kapena ngati masitayelo apakatikati kuti mukhazikitse m'lifupi.

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

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

Kuyanjanitsa mawu

Mutha kusintha msanga kamvekedwe ka mawu pa khadi iliyonse—yathunthu kapena mbali zake zenizeni—ndi makalasi athu ogwirizana ndi mawu .

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake
Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake
Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

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

Onjezani mayendedwe pamutu wa khadi (kapena chipika) chokhala ndi zida za nav za Bootstrap .

Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

Pitani kwinakwake 
<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">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>
Chithandizo chapadera chamutu

Ndi mawu othandizira omwe ali pansipa ngati chitsogozo chachilengedwe kuzinthu zowonjezera.

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

Zithunzi

Makhadi ali ndi njira zingapo zogwirira ntchito ndi zithunzi. Sankhani kuchokera pa kuwonjezera "zipewa zazithunzi" kumapeto kwa khadi, ndikukuta zithunzi ndi zomwe zili pamakhadi, kapena kungoyika chithunzicho pakhadi.

Makapu azithunzi

Mofanana ndi mitu ndi m'munsi, makadi angakhale pamwamba ndi pansi "zipewa zazithunzi" -zithunzi pamwamba kapena pansi pa khadi.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

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>

Zithunzi zokutira

Sinthani chithunzi kukhala maziko a khadi ndikuphimba mawu a khadi lanu. Kutengera ndi chithunzi, mungafunike kapena simungafune masitayelo owonjezera kapena zofunikira.

Placeholder Card image
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

<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>
Zindikirani kuti zomwe zili siziyenera kukhala zazikulu kuposa kutalika kwa chithunzi. Ngati zomwe zili ndi zazikulu kuposa chithunzicho, zomwe zikuwonetsedwa zidzawonetsedwa kunja kwa chithunzicho.

Chopingasa

Pogwiritsa ntchito magulu ophatikizika a gridi ndi zofunikira, makhadi amatha kupangidwa kukhala opingasa m'njira yosavuta komanso yomvera. Muchitsanzo chomwe chili pansipa, timachotsa ma gutters a gridi .no-guttersndikugwiritsa ntchito .col-md-*makalasi kuti khadiyo ikhale yopingasa panthawi mdyopuma. Kusintha kwina kungafunike kutengera zomwe zili pakhadi lanu.

Placeholder Image
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

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

Makadi masitayilo

Makhadi ali ndi zosankha zosiyanasiyana zosinthira makonda awo, malire, ndi mtundu wawo.

Mbiri ndi mtundu

Gwiritsani ntchito zolemba ndi zakumbuyo kuti musinthe mawonekedwe a khadi.

Mutu
Mutu wa kirediti kadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wakhadi lachiwiri

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wamakhadi opambana

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wa khadi langozi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Chenjezo la khadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wakhadi lazidziwitso

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Khadi lowala mutu

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wakhadi lakuda

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

<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>
Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-onlykalasi.

Border

Gwiritsani ntchito zida zam'malire kuti musinthe border-colorkhadi. Dziwani kuti mutha kuyika .text-{color}makalasi pa kholo .cardkapena kagawo kakang'ono ka zomwe zili m'khadi monga momwe zilili pansipa.

Mutu
Mutu wa kirediti kadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wakhadi lachiwiri

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wamakhadi opambana

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wa khadi langozi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Chenjezo la khadi

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wakhadi lazidziwitso

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Khadi lowala mutu

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

Mutu
Mutu wakhadi lakuda

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

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

Mukhozanso kusintha malire pa mutu khadi ndi footer ngati pakufunika, ndipo ngakhale kuchotsa awo background-colorndi .bg-transparent.

Mutu
Mutu wamakhadi opambana

Malemba ena achitsanzo ofulumira kuti amange pamutu wamakhadi ndikupanga zambiri zamakhadiwo.

M'munsi 
<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>

Kapangidwe ka khadi

Kuphatikiza pa kukongoletsa zomwe zili mkati mwa makhadi, Bootstrap imaphatikizaponso zosankha zingapo zoyika makhadi angapo. Pakadali pano, zosankha za masanjidwewa sizinayankhebe .

Magulu a makadi

Gwiritsani ntchito magulu a makhadi kuti apereke makhadi ngati chinthu chimodzi, chomata ndi mizere yofanana m'lifupi ndi kutalika. Magulu a makadi amayamba ataunikidwa ndikugwiritsidwa ntchito display: flex;kuti agwirizane ndi miyeso yofanana kuyambira pa smbreakpoint.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Placeholder Image cap
Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yotalikirapo kuposa yoyamba yosonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

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

Mukamagwiritsa ntchito magulu a makadi okhala ndi pansi, zomwe zili m'munsimu zidzakhazikika.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo
Placeholder Image cap
Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo
Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yotalikirapo kuposa yoyamba yosonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo 
<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 a makadi

Mukufuna makadi ofanana m'lifupi ndi kutalika omwe samalumikizidwa? Gwiritsani ntchito makadi.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo

Placeholder Image cap
Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yotalikirapo kuposa yoyamba yosonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo

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

Monga momwe zilili ndi magulu a makadi, mapepala apansi pa makadi m'madeki amangopanga mzere.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Izi ndizotalikirapo pang'ono.

Zasinthidwa komaliza mphindi 3 zapitazo
Placeholder Image cap
Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo
Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalikulu lomwe lili ndi mawu omwe ali pansipa ngati chitsogozo chachilengedwe pazowonjezera. Khadi ili ndi nthawi yotalikirapo kuposa yoyamba yosonyeza kutalika kofanana.

Zasinthidwa komaliza mphindi 3 zapitazo 
<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>

Makhadi a Gridi

Gwiritsani ntchito gridi ya Bootstrap ndi .row-colsmakalasi ake kuti muzitha kuwongolera kuchuluka kwa mizere ya gridi (yokutidwa mozungulira makhadi anu) yomwe mumawonetsa pamzere uliwonse. Mwachitsanzo, apa .row-cols-1ndikuyala makhadi pa ndime imodzi, .row-cols-md-2ndikugawa makadi anayi m'lifupi mwake molingana ndi mizere ingapo, kuyambira pomwe pali pakati.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

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

Kusintha kwa .row-cols-3ndipo muwona chachinayi khadi kukulunga.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

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

Mukafuna kutalika kofanana, onjezerani .h-100makhadi. Ngati mukufuna kutalika kofanana mwachisawawa, mutha kukhazikitsa $card-height: 100%Sass.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalifupi.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Placeholder Image cap
Mutu wakhadi

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

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

Mizati yamakhadi

Makhadi amatha kukonzedwa kukhala mizati ya Masonry -ngati ndi CSS pongowakulunga mu .card-columns. Makhadi amamangidwa ndi CSS columnkatundu m'malo mwa flexbox kuti agwirizane mosavuta. Makhadi amalamulidwa kuchokera pamwamba mpaka pansi ndi kumanzere kupita kumanja.

Mungodziwiratu! Makilomita anu okhala ndi mapepala a makadi akhoza kusiyana. Kuti tipewe makhadi kusweka m'mipingo, tiyenera kuwakhazikitsa display: inline-blockngati column-break-inside: avoidnjira yotsekera zipolopolo.

Placeholder Image cap
Mutu wa khadi womwe umafika pamzere watsopano

Ili ndi khadi lalitali lomwe lili ndi mawu omwe ali pansipa ngati njira yachilengedwe yolowera pazowonjezera. Izi ndizotalikirapo pang'ono.

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title
Placeholder Image cap
Mutu wakhadi

Khadi ili lili ndi mawu ochirikizira pansipa ngati njira yachilengedwe yolowera pazowonjezera.

Zasinthidwa komaliza mphindi 3 zapitazo

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title
Mutu wakhadi

Khadi ili ndi mutu wanthawi zonse ndi ndime yaifupi ya mawu pansi pake.

Zasinthidwa komaliza mphindi 3 zapitazo

Placeholder Card image

Mawu odziwika bwino, omwe ali mu blockquote element.

Wina wotchuka mu Source Title
Mutu wakhadi

Ili ndi khadi lina lomwe lili ndi mutu ndi mawu othandizira pansipa. Khadi ili lili ndi zina zowonjezera kuti likhale lalitali pang'ono ponseponse.

Zasinthidwa komaliza mphindi 3 zapitazo

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

Mizati yamakhadi imathanso kukulitsidwa ndikusinthidwa makonda ndi ma code ena owonjezera. Zomwe zili pansipa ndizowonjezera .card-columnskalasi pogwiritsa ntchito CSS yomwe timagwiritsa ntchito - CSS columns - kupanga magulu omvera kuti asinthe kuchuluka kwa magawo.

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