Jya ku bintu nyamukuru Jya kuri docs
Check
in English

Ikarita

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

Kuriyi page

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
html 
<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.
html 
<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 bumwe, 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

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

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

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

  • Ikintu
  • Ikintu cya kabiri
  • Ikintu cya gatatu
html 
<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>
Ikiranga
  • Ikintu
  • Ikintu cya kabiri
  • Ikintu cya gatatu
html 
<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>
  • Ikintu
  • Ikintu cya kabiri
  • Ikintu cya gatatu
Ikarita yerekana ikarita
html 
<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>

Igikoni

Kuvanga no guhuza ubwoko bwinshi bwibirimo kugirango ukore ikarita ukeneye, cyangwa uta ibintu byose aho. Herekanwa hepfo nuburyo bwo gushushanya, 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.

  • Ikintu
  • Ikintu cya kabiri
  • Ikintu cya gatatu
Ihuza Ikarita Undi murongo
html 
<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>

Ongeraho umutwe utabishaka hamwe na / cyangwa ikirenge mu ikarita.

Ikiranga
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

Genda ahantu runaka
html 
<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 biganisha kubintu byiyongera.

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

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

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

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

Genda ahantu runaka
Iminsi 2 ishize
html 
<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 biganisha kubintu byiyongera.

Genda ahantu runaka
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

Genda ahantu runaka
html 
<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 biganisha kubintu byiyongera.

Button
Umutwe w'amakarita

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

Button
html 
<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 biganisha kubintu byiyongera.

Genda ahantu runaka
html 
<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 biganisha kubintu byiyongera.

Genda ahantu runaka
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

Genda ahantu runaka
Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

Genda ahantu runaka
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

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

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

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

Amashusho

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

Amashusho

Bisa n'imitwe n'ibirenge, amakarita arashobora gushiramo hejuru no hepfo "ishusho ya caps" - 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
html 
<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>

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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Menya ko ibirimo bitagomba kuba binini kurenza uburebure bwishusho. Niba ibirimo binini kuruta ishusho ibirimo bizerekanwa hanze yishusho.

Uhagaritse

Ukoresheje urusobekerane rwa gride hamwe nibyiciro byingirakamaro, amakarita arashobora gukorwa atambitse muburyo bugendanwa kandi bworoshye. Murugero rukurikira, dukuraho imiyoboro ya gride hamwe .g-0no gukoresha .col-md-*amasomo kugirango dukore ikarita itambitse kumurongo md. Ibindi byahinduwe birashobora gukenerwa bitewe nibikarita yawe.

Placeholder Image
Umutwe w'amakarita

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

Iheruka kuvugururwa 3 mins ishize

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Imiterere yamakarita

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

Amavu n'amavuko

Wongeyeho muri v5.2.0

Shiraho a background-coloritandukaniro ryimbere colorhamwe nabafasha bacu.text-bg-{color} . Mbere byasabwaga guhuza intoki ibyo wahisemo .text-{color}hamwe .bg-{color}nibikorwa bya styling, urashobora gukoresha niba ubishaka.

Umutwe
Umutwe w'amakarita 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.

html 
<div class="card text-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-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-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-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-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-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-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-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 .visually-hiddenn'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'amakarita 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.

html 
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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
html 
<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 atangira gutondekanya no gukoresha display: flex;kugirango ahuze nuburinganire bumwe guhera kumurongo sm.

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

html 
<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
html 
<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 ya gride

Koresha sisitemu ya Bootstrap hamwe .row-colsnamasomo yayo kugirango ugenzure umubare wa grid inkingi (uzengurutse amakarita yawe) werekana kumurongo. Kurugero, hano .row-cols-1dushira amakarita kumurongo umwe, hanyuma .row-cols-md-2ugabanye amakarita ane kugirango ubugari bungana mumirongo myinshi, uhereye kumurongo wo hagati.

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

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

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Hindura .row-cols-3hanyuma uzabona ikarita ya kane ipfunyitse.

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

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

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Mugihe ukeneye uburebure bungana, ongeraho .h-100amakarita. Niba ushaka uburebure bungana muburyo budasanzwe, urashobora gushira $card-height: 100%muri Sass.

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

Iyi ni ikarita ngufi.

Placeholder Image cap
Umutwe w'amakarita

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

Placeholder Image cap
Umutwe w'amakarita

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

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Nka hamwe nitsinda ryamakarita, amakarita yamakarita 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
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

Twifashishije v4tekinike ya CSS gusa twigana imyitwarire yinkingi zimeze nka Masonry , ariko ubu buhanga bwaje bufite ingaruka nyinshi zidashimishije . Niba ushaka kugira ubu bwoko bwimiterere v5, urashobora gukoresha gusa plugin ya Masonry. Masonry ntabwo yashyizwe muri Bootstrap , ariko twakoze urugero rwa demo kugirango tugufashe gutangira.

CSS

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihindagurika CSS ihinduka, amakarita noneho akoresha CSS yaho ihinduka .cardkugirango yongere igihe-cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Ibihinduka bya Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;