Source

Makadhi

Makadhi eBootstrap anopa chinochinjika uye chinowedzera chemukati chigadziko chine akawanda akasiyana uye sarudzo.

About

Kadhi igaba rinochinjika uye rinowedzerwa. Inosanganisira sarudzo dzemusoro uye tsoka, zvakasiyana siyana zvemukati, mamiriro emukati mavara, uye ane simba ekuratidzira sarudzo. Kana iwe uchijairana neBootstrap 3, makadhi anotsiva edu ekare mapaneru, matsime, uye zvigunwe. Kuita kwakafanana kune izvo zvikamu zvinowanikwa semakirasi ekugadzirisa emakadhi.

Muenzaniso

Makadhi anovakwa ane madiki markup uye masitaera sezvinobvira, asi achiri kugona kuendesa toni yekutonga uye kugadzirisa. Yakavakwa neflexbox, ivo vanopa kurongeka kuri nyore uye kusanganisa zvakanaka nezvimwe zvinhu zveBootstrap. Ivo havana marginnekusarudzika, saka shandisa nzvimbo dzekushandisa sezvinodiwa.

Pazasi pane muenzaniso wekadhi yekutanga ine zvakasanganiswa zvemukati uye yakasarudzika hupamhi. Makadhi haana hupamhi hwakatarwa kuti atange, saka ivo vanongozadza hupamhi hwakazara hwemubereki chinhu. Izvi zvinogadziriswa zviri nyore nemaitiro edu akasiyana-siyana ekuyera saizi .

100%x180
Kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Enda kune imwe nzvimbo
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Mhando dzemukati

Makadhi anotsigira zvakasiyana-siyana zvemukati, zvinosanganisira mifananidzo, zvinyorwa, rondedzero mapoka, zvinongedzo, nezvimwe. Pazasi pane mienzaniso yezvinotsigirwa.

Muviri

Nzvimbo yekuvaka yekadhi ndiyo .card-body. Ishandise pese paunenge uchida chikamu chakaputirwa mukati mekadhi.

Aya mamwe mavara mukati meboka remakadhi.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Mazita emakadhi anoshandiswa nekuwedzera .card-titlekune <h*>tag. Nenzira imwecheteyo, zvinongedzo zvinowedzerwa uye zvinoiswa padivi peumwe nekuwedzera .card-linkkune <a>tag.

Subtitles anoshandiswa nekuwedzera a .card-subtitlekune <h*>tag. Kana iyo .card-titleuye .card-subtitlezvinhu zvakaiswa .card-bodymuchimwe chinhu, zita rekadhi uye subtitle inowirirana zvakanaka.

Kadhi zita
Kadhi subtitle

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Kadhi link Imwe link
<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>

Images

.card-img-topinoisa mufananidzo kumusoro kwekadhi. Ne .card-text, mavara anogona kuwedzerwa pakadhi. Mavara ari mukati .card-textanogona zvakare kunyorwa neakajairwa HTML tag.

Chivharo chemufananidzo [100%x180]

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Nyora mapoka

Gadzira zvinyorwa zvemukati mukadhi ine flush list group.

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

Kitchen sink

Sanganisa uye sanganisa akawanda emukati mhando kugadzira kadhi raunoda, kana kukanda zvese imomo. Pazasi panoratidzwa masitaera emifananidzo, mabhuroko, masitaera emavara, neboka rerondedzero — zvese zvakaputirwa mukadhi rakafara.

Chivharo chemufananidzo [100%x180]
Kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum uye eros
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

Wedzera zvingasarudzwa musoro uye/kana tsoka mukati mekadhi.

Featured
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<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>

Misoro yemakadhi inogona kunyorwa nekuwedzera .card-headerkune <h*>zvinhu.

Featured
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Mumwe ane mukurumbira muna Source Title
<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>
Featured
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<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>

Kukura

Makadhi haafungi nezvekutanga width, saka anozove akafara 100% kunze kwekunge zvataurwa neimwe nzira. Unogona kushandura izvi sezvinodiwa netsika CSS, makirasi egidhi, grid Sass musanganiswa, kana zvishandiso.

Kushandisa grid markup

Uchishandisa gidhi, putira makadhi mumakoramu nemitsara sezvinodiwa.

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<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>

Kushandisa zvishandiso

Shandisa edu mashoma ezvishandiso zvemasaji kuti akurumidze kuseta hupamhi hwekadhi.

Kadhi zita

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Bhatani
Kadhi zita

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

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

Kushandisa tsika CSS

Shandisa CSS yakajairwa mumashiti ako kana se inline masitaera kuseta hupamhi.

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<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>

Kurongeka kwemavara

Unogona kukurumidza kushandura kurongeka kwemavara echero kadhi-rikazara kana zvikamu zvakati- nemakirasi edu ekugadzirisa zvinyorwa .

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<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>

Wedzera kumwe kufamba kune musoro wekadhi (kana block) neBootstrap's nav components .

Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<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="#">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>
Special title treatment

Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.

Enda kune imwe nzvimbo
<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="#">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>

Images

Makadhi anosanganisira mashoma sarudzo dzekushanda nemifananidzo. Sarudza kubva pakuwedzera "makepisi emifananidzo" kune chero kumagumo kwekadhi, kuvhara mifananidzo ine kadhi zvirimo, kana kungoisa mufananidzo wacho mukadhi.

Image caps

Zvakafanana nemusoro uye tsoka, makadhi anogona kusanganisira kumusoro uye pasi "mapikicha emifananidzo" - mifananidzo iri kumusoro kana pasi pekadhi.

100%x180
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

100%x180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

Mifananidzo yakavharwa

Shandura mufananidzo kuseri kwekadhi uye wovharira zvinyorwa zvekadhi rako. Zvichienderana nemufananidzo, unogona kana kusada mamwe masitaera kana zvishandiso.

100%x270
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

Zvitaera zvekadhi

Makadhi anosanganisira akasiyana sarudzo dzekugadzirisa mabviro avo, miganhu, uye ruvara.

Background uye ruvara

Shandisa zvinyorwa uye zvemashure zvinoshandiswa kuti uchinje kutaridzika kwekadhi.

Header
Musoro wekadhi rekutanga

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Sekondari kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Kubudirira kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Danger card title

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Yambiro kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Info kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Chiedza kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Musoro wekadhi rakasviba

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

<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>
Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .sr-onlynekirasi.

Border

Shandisa bhodha utilities kuchinja chete border-colorkadhi. Ziva kuti unogona kuisa .text-{color}makirasi kumubereki .cardkana chikamu chidiki chezviri mukati mekadhi sezvakaratidzwa pasi apa.

Header
Musoro wekadhi rekutanga

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Sekondari kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Kubudirira kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Danger card title

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Yambiro kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Info kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Chiedza kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

Header
Musoro wekadhi rakasviba

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

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

Iwe unogona zvakare kushandura miganhu pane kadhi musoro uye tsoka sezvinodiwa, uye kunyange kubvisa yavo background-colorne .bg-transparent.

Header
Kubudirira kadhi zita

Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.

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

Kadhi marongerwo

Pamusoro pekugadzira zviri mukati memakadhi, Bootstrap inosanganisira mashoma sarudzo yekuisa kunze nhevedzano yemakadhi. Parizvino, sarudzo dzemarongerwo idzi hadzisati dzapindura .

Mapoka emakadhi

Shandisa mapoka emakadhi kupa makadhi sechinhu chimwe chete, chakabatanidzwa chine hupamhi hwakaenzana uye kureba kwembiru. Mapoka emakadhi anoshandisa display: flex;kuzadzisa saizi yavo yakafanana.

100%x180
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

100%x180
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

100%x180
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Paunenge uchishandisa mapoka emakadhi ane tsoka, izvo zvirimo zvinongoerekana zvamira.

100%x180
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

100%x180
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

100%x180
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Kadhi dhizaini

Unoda seti yehupamhi hwakaenzana uye makadhi akareba asina kubatanidzwa kune mumwe? Shandisa mapepa emakadhi.

100%x200
Kadhi zita

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

100%x200
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

100%x200
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Sezvakangoita nemapoka emakadhi, ma footer emakadhi mumadhishi anozongoerekana asimuka.

100%x180
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

100%x180
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

100%x180
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

Makadhi columns

Makadhi anogona kurongeka kuita Masonry -senge makoramu ane CSS chete nekuaputira mu .card-columns. Makadhi anovakwa ane CSS columnzvivakwa panzvimbo yeflexbox kuitira kurongeka kuri nyore. Makadhi anoodha kubva kumusoro kusvika pasi uye kuruboshwe kuenda kurudyi.

Musoro! Mileage yako nemakoramu emakadhi inogona kusiyana. Kuti makadhi asatyoke pamakoramu, tinofanira kuamisa kuti display: inline-blockave sezvo column-break-inside: avoidasati apedza bulletproof.

100%x160
Musoro wekadhi unopeta kumutsara mutsva

Iri ikaradhi refu rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Mumwe ane mukurumbira muna Source Title
100%x160
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Mumwe ane mukurumbira muna Source Title
Kadhi zita

Iri kadhi rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

100%x260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Mumwe ane mukurumbira muna Source Title
Kadhi zita

Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakatokareba kupfuura rekutanga kuratidza kuti yakaenzana urefu chiito.

Yakapedzisira kugadziridzwa maminetsi matatu apfuura

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

Makolamu emakadhi anogonawo kuwedzerwa uye kugadziridzwa neimwe kodhi yekuwedzera. Inoratidzwa pazasi ndeyekuwedzera .card-columnskwekirasi tichishandisa iyo yakafanana CSS yatinoshandisa-CSS makolamu- kugadzira seti yeanoteerera tiers yekushandura nhamba yemakoramu.

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