Source

Ikarita

Ikarita ya Bootstrap itanga ibintu byoroshye kandi byagutse birimo ibintu byinshi hamwe namahitamo.

Ibyerekeye

Ikarita ni ibintu byoroshye kandi byagutse. Harimo amahitamo kumitwe na footers, ibintu byinshi bitandukanye, ibara ryinyuma yibara, hamwe nuburyo bukomeye bwo kwerekana. Niba umenyereye Bootstrap 3, amakarita asimbuza panne yacu ishaje, amariba, na thumbnail. Imikorere isa nibi bice irahari nkamasomo yo guhindura amakarita.

Urugero

Ikarita yubatswe hamwe na marike ntoya nuburyo bushoboka, ariko iracyashobora gutanga toni yo kugenzura no kwihindura. Yubatswe na flexbox, itanga guhuza byoroshye no kuvanga neza nibindi bikoresho bya Bootstrap. Ntabwo bafite marginmuburyo busanzwe, koresha rero umwanya utandukanye nkuko bikenewe.

Hasi ni urugero rwikarita yibanze irimo ibintu bivanze nubugari buhamye. Ikarita idafite ubugari buhamye bwo gutangira, bityo izuzuza bisanzwe ubugari bwuzuye bwibintu byababyeyi. Ibi biroroshye guhindurwa hamwe nuburyo butandukanye bwo guhitamo .

Placeholder Image cap
Umutwe w'amakarita

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Genda ahantu runaka 
<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>

Ubwoko bwibirimo

Ikarita ishyigikira ibintu byinshi bitandukanye, birimo amashusho, inyandiko, amatsinda y'urutonde, amahuza, nibindi byinshi. Hano hari ingero zibyashyigikiwe.

Umubiri

Inyubako yikarita ni .card-body. Koresha igihe cyose ukeneye igice cya padi mu ikarita.

Iyi ni inyandiko imwe mumubiri wikarita. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Amazina, inyandiko, hamwe

.card-titleAmazina yamakarita akoreshwa mukongeramo <h*>tagi. .card-linkMuri ubwo buryo , amahuza yongeweho kandi ashyirwa kuruhande hagati yongeyeho <a>tagi.

Subtitles zikoreshwa mukongeramo .card-subtitlea <h*>kurirango. Niba i .card-titlehamwe .card-subtitlenibintu byashyizwe .card-bodymubintu, ikarita yumutwe na subtitle bihujwe neza.

Umutwe w'amakarita
Ikarita subtitle

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Ihuza Ikarita Undi murongo 
<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>

Amashusho

.card-img-topshyira ishusho hejuru yikarita. Hamwe .card-text, inyandiko irashobora kongerwaho ikarita. Inyandiko imbere .card-textirashobora kandi kwandikwa hamwe nibisanzwe bya HTML.

Placeholder Image cap

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

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

Andika amatsinda

Kora urutonde rwibirimo mu ikarita hamwe na flush urutonde rwitsinda.

  • Cras justo odio
  • Dapibus ac facilisis muri
  • Vestibulum kuri 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>
Ikiranga
  • Cras justo odio
  • Dapibus ac facilisis muri
  • Vestibulum kuri 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>

Igikoni

Kuvanga no guhuza ubwoko bwinshi bwibirimo kugirango ukore ikarita ukeneye, cyangwa uta ibintu byose aho. Hano herekanwa amashusho yuburyo, guhagarika, imiterere yinyandiko, hamwe nitsinda ryurutonde - byose bipfunyitse mukarita yagutse.

Placeholder Image cap
Umutwe w'amakarita

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

  • Cras justo odio
  • Dapibus ac facilisis muri
  • Vestibulum kuri eros
Ihuza Ikarita Undi murongo 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Ongeraho umutwe utabishaka hamwe na / cyangwa ikirenge mu ikarita.

Ikiranga
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka 
<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>

Imitwe yamakarita irashobora gutunganywa wongeyeho .card-headeribintu <h*>.

Ikiranga
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka 
<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>
Amagambo

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.

Umuntu uzwi muri Source Umutwe 
<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>
Ikiranga
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka
Iminsi 2 ishize 
<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>

Ingano

Ikarita ifata ko idasanzwe widthyo gutangira, bityo izaba yagutse 100% keretse bivuzwe ukundi. Urashobora guhindura ibi nkuko bikenewe hamwe na CSS yihariye, ibyiciro bya grid, grid Sass ivanga, cyangwa ibikorwa.

Gukoresha marike

Ukoresheje gride, funga amakarita mumirongo nimirongo nkuko bikenewe.

Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka 
<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>

Gukoresha ibikorwa byingirakamaro

Koresha intoki zacu ziboneka zingirakamaro kugirango ushireho ubugari bwikarita.

Umutwe w'amakarita

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Button
Umutwe w'amakarita

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

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

Ukoresheje CSS yihariye

Koresha CSS yihariye mumpapuro zawe cyangwa nkuburyo bwo kumurongo kugirango ushire ubugari.

Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka 
<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>

Guhuza inyandiko

Urashobora guhindura byihuse guhuza ikarita iyo ari yo yose - mubice byose cyangwa ibice byihariye - hamwe namasomo yacu ahuza amasomo .

Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka 
<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>

Ongeraho kugendagenda kumutwe wikarita (cyangwa guhagarika) hamwe nibice bya Bootstrap .

Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Genda ahantu runaka 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Amashusho

Ikarita irimo amahitamo make yo gukorana namashusho. Hitamo mugushyiramo "caps caps" kumpera yikarita, gutwikira amashusho hamwe nibikarita, cyangwa gushyiramo ishusho mukarita.

Amashusho

Bisa n'imitwe n'ibirenge, amakarita arashobora gushiramo hejuru no hepfo "ishusho yerekana amashusho" - amashusho hejuru cyangwa hepfo yikarita.

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.

Iheruka kuvugururwa 3 mins ishize

Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.

Iheruka kuvugururwa 3 mins ishize

Placeholder Image cap 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-top" alt="...">
</div>

Ishusho

Hindura ishusho mumakarita hanyuma ushireho inyandiko yikarita yawe. Ukurikije ishusho, urashobora cyangwa udakeneye ubundi buryo cyangwa ibikorwa byingirakamaro.

Placeholder Card image
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.

Iheruka kuvugururwa 3 mins ishize

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

Menya ko ibirimo bitagomba kuba binini kurenza uburebure bwishusho. Niba ibirimo binini kuruta ishusho ibirimo bizerekanwa hanze yishusho.

Imiterere yamakarita

Ikarita ikubiyemo amahitamo atandukanye yo gutandukanya imiterere yabo, imipaka, n'ibara.

Amavu n'amavuko

Koresha inyandiko ninyuma yibikorwa kugirango uhindure isura yikarita.

Umutwe
Umutwe w'ikarita y'ibanze

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Ikarita yicyiciro cya kabiri

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Intsinzi yikarita

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'amakarita y'akaga

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'ikarita yo kuburira

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'amakarita y'amakuru

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'ikarita yoroheje

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'ikarita yijimye

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

<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>
Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .sr-onlyn'ishuri.

Imipaka

Koresha imipaka ikoreshwa kugirango uhindure gusa border-colorikarita. Menya ko ushobora gushyira .text-{color}amasomo kubabyeyi .cardcyangwa agace k'ibikarita nkuko bigaragara hano hepfo.

Umutwe
Umutwe w'ikarita y'ibanze

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Ikarita yicyiciro cya kabiri

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Intsinzi yikarita

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'amakarita y'akaga

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'ikarita yo kuburira

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'amakarita y'amakuru

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'ikarita yoroheje

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe
Umutwe w'ikarita yijimye

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

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

Kuvanga ibikorwa byingirakamaro

Urashobora kandi guhindura imipaka kumutwe wikarita na footer nkuko bikenewe, ndetse background-colorukanakuraho .bg-transparent.

Umutwe
Intsinzi yikarita

Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.

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

Imiterere y'amakarita

Usibye gutunganya ibiri mu makarita, Bootstrap ikubiyemo amahitamo make yo gushiraho amakarita. Kugeza magingo aya, amahitamo yimiterere ntabwo aritabira .

Amatsinda yamakarita

Koresha amatsinda yamakarita kugirango utange amakarita nkimwe, ifatanye nibintu bifite ubugari bungana nuburebure bwinkingi. Amatsinda yamakarita akoresha display: flex;kugirango agere ku bunini bumwe.

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.

Iheruka kuvugururwa 3 mins ishize

Placeholder Image cap
Umutwe w'amakarita

Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.

Iheruka kuvugururwa 3 mins ishize

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

Iyo ukoresheje amakarita yamakarita afite ibirenge, ibiyirimo bizahita bitonda umurongo.

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.

Iheruka kuvugururwa 3 mins ishize
Placeholder Image cap
Umutwe w'amakarita

Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize
Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.

Iheruka kuvugururwa 3 mins ishize 
<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>

Ikarita

Ukeneye urutonde rwubugari buringaniye namakarita yuburebure adafatanye? Koresha amakarita.

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.

Iheruka kuvugururwa 3 mins ishize

Placeholder Image cap
Umutwe w'amakarita

Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.

Iheruka kuvugururwa 3 mins ishize

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

Nka hamwe nitsinda ryamakarita, amakarita yikarita mumagorofa azahita atonda umurongo.

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.

Iheruka kuvugururwa 3 mins ishize
Placeholder Image cap
Umutwe w'amakarita

Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize
Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.

Iheruka kuvugururwa 3 mins ishize 
<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>

Inkingi

Ikarita irashobora gutondekwa muburyo bwa Masonry busa na CSS gusa ubiziritse .card-columns. Ikarita yubatswe hamwe na CSS columnaho kuba flexbox kugirango byoroshye guhuza. Ikarita yatumijwe kuva hejuru kugeza hasi hanyuma ibumoso ugana iburyo.

Umutwe! Mileage yawe hamwe namakarita yinkingi irashobora gutandukana. Kugirango wirinde amakarita kumena inkingi, tugomba kuyashyiraho display: inline-blocknkuko column-break-inside: avoidatari igisubizo cyamasasu.

Placeholder Image cap
Umutwe w'amakarita uzengurutse umurongo mushya

Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.

Umuntu uzwi muri Source Umutwe
Placeholder Image cap
Umutwe w'amakarita

Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat.

Umuntu uzwi muri Source Umutwe
Umutwe w'amakarita

Iyi karita ifite umutwe usanzwe hamwe na paragraphe ngufi yinyandiko munsi yacyo.

Iheruka kuvugururwa 3 mins ishize

Placeholder Card image

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.

Umuntu uzwi muri Source Umutwe
Umutwe w'amakarita

Iyi ni indi karita ifite umutwe hamwe ninyandiko ishyigikira hepfo. Iyi karita ifite ibintu byongeweho kugirango birebire gato muri rusange.

Iheruka kuvugururwa 3 mins ishize

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Inkingi yamakarita irashobora kandi kwagurwa no gutegekwa hamwe na kode yinyongera. Iyerekanwa hepfo .card-columnsniyagurwa ryishuri dukoresheje CSS imwe dukoresha-Inkingi ya CSS - kugirango tubyare urutonde rwibisubizo kugirango duhindure umubare winkingi.

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