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 .

Umutwe w'amakarita

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Genda ahantu runaka

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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>

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

Bimwe mubyihuta byanditse kugirango wubake 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.

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

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. Herekanwa hepfo nuburyo bwo gushushanya, guhagarika, imiterere yinyandiko, hamwe nitsinda ryurutonde - byose bipfunyitse mukarita yagutse.

Umutwe w'amakarita

Bimwe mubyihuta byanditse kugirango wubake 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 class="card-img-top" src=".../100px180/?text=Image cap" 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>

Umutwe na Umutwe

Ongeraho umutwe utabishaka hamwe na / cyangwa ikirenge mu ikarita.

Ikiranga

Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

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

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

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

Genda ahantu runaka

Kuvura umutwe wihariye

Hamwe ninyandiko ishigikira hepfo nkibisanzwe biganisha kubintu byiyongera.

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

<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

<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

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

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="#">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

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

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.

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

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

Ishusho

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

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 class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>

Imiterere yamakarita

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

Amavu n'amavuko

Koresha inyandiko ninyuma yibikorwa kugirango uhindure isura yikarita.

Umutwe

Umutwe w'ikarita y'ibanze

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Ikarita yicyiciro cya kabiri

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Intsinzi yikarita

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'amakarita y'akaga

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'ikarita yo kuburira

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'amakarita y'amakuru

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'ikarita yoroheje

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'ikarita yijimye

Bimwe mubyihuta byanditse kugirango wubake 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 kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Ikarita yicyiciro cya kabiri

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Intsinzi yikarita

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'amakarita y'akaga

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'ikarita yo kuburira

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'amakarita y'amakuru

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'ikarita yoroheje

Bimwe mubyihuta byanditse kugirango wubake kumutwe wikarita no gukora igice kinini cyibirimo.

Umutwe

Umutwe w'ikarita yijimye

Bimwe mubyihuta byanditse kugirango wubake 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 ukanakuraho background-colorhamwe .bg-transparent.

Umutwe

Intsinzi yikarita

Bimwe mubyihuta byanditse kugirango wubake 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 urukurikirane rw'amakarita. Kugeza magingo aya, amahitamo yimiterere ntabwo aritabira .

Amatsinda yamakarita

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

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 karita ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize

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 class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

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

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 karita ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize

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 class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Ikarita

Ukeneye urutonde rwubugari buringaniye namakarita yuburebure adafatanye? Koresha amakarita.

Umutwe w'amakarita

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

Iheruka kuvugururwa 3 mins ishize

Umutwe w'amakarita

Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize

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 class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

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

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 karita ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.

Iheruka kuvugururwa 3 mins ishize

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 class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

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.

Umutwe w'amakarita uzengurutse umurongo mushya

Iyi ni ikarita ndende ifite inyandiko ishyigikira 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

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

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 class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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;
  }
}

Ikarita

Ibyerekeye

Urugero

Umutwe w'amakarita

Ubwoko bwibirimo

Umubiri

Amazina, inyandiko, hamwe

Umutwe w'amakarita

Ikarita

Amashusho

Andika amatsinda

Igikoni

Umutwe w'amakarita

Umutwe na Umutwe

Kuvura umutwe wihariye

Ikiranga

Kuvura umutwe wihariye

Kuvura umutwe wihariye

Ingano

Gukoresha marike

Kuvura umutwe wihariye

Kuvura umutwe wihariye

Gukoresha ibikorwa byingirakamaro

Umutwe w'amakarita

Umutwe w'amakarita

Ukoresheje CSS yihariye

Kuvura umutwe wihariye

Guhuza inyandiko

Kuvura umutwe wihariye

Kuvura umutwe wihariye

Kuvura umutwe wihariye

Kugenda

Kuvura umutwe wihariye

Kuvura umutwe wihariye

Amashusho

Amashusho

Umutwe w'amakarita

Umutwe w'amakarita

Ishusho

Umutwe w'amakarita

Imiterere yamakarita

Amavu n'amavuko

Umutwe w'ikarita y'ibanze

Ikarita yicyiciro cya kabiri

Intsinzi yikarita

Umutwe w'amakarita y'akaga

Umutwe w'ikarita yo kuburira

Umutwe w'amakarita y'amakuru

Umutwe w'ikarita yoroheje

Umutwe w'ikarita yijimye

Gutanga ibisobanuro kubuhanga bufasha

Imipaka

Umutwe w'ikarita y'ibanze

Ikarita yicyiciro cya kabiri

Intsinzi yikarita

Umutwe w'amakarita y'akaga

Umutwe w'ikarita yo kuburira

Umutwe w'amakarita y'amakuru

Umutwe w'ikarita yoroheje

Umutwe w'ikarita yijimye

Kuvanga ibikorwa byingirakamaro

Intsinzi yikarita

Imiterere y'amakarita

Amatsinda yamakarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Ikarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Umutwe w'amakarita

Inkingi

Umutwe w'amakarita uzengurutse umurongo mushya

Umutwe w'amakarita