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 margin
muburyo 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 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.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Amazina, inyandiko, hamwe
.card-title
Amazina yamakarita akoreshwa mukongeramo <h*>
tagi. .card-link
Muri ubwo buryo bumwe, amahuza yongeweho kandi ashyirwa kuruhande hagati yongeyeho <a>
tagi.
Subtitles zikoreshwa mukongeramo .card-subtitle
a <h*>
kurirango. Niba i .card-title
hamwe .card-subtitle
nibintu byashyizwe .card-body
mubintu, 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-top
shyira ishusho hejuru yikarita. Hamwe .card-text
, inyandiko irashobora kongerwaho ikarita. Inyandiko imbere .card-text
irashobora kandi kwandikwa hamwe nibisanzwe bya HTML.
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.
- Ikintu
- Ikintu cya kabiri
- Ikintu cya gatatu
<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>
- Ikintu
- Ikintu cya kabiri
- Ikintu cya gatatu
<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
<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. Hano herekanwa amashusho yuburyo, guhagarika, imiterere yinyandiko, hamwe nitsinda ryurutonde - byose bipfunyitse mukarita yagutse.
Umutwe w'amakarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
- Ikintu
- Ikintu cya kabiri
- Ikintu cya gatatu
<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>
Umutwe na Umutwe
Ongeraho umutwe utabishaka hamwe na / cyangwa ikirenge mu ikarita.
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-header
ibintu <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 azwi cyane, akubiye mubintu byahagaritswe.
<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>
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka<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 width
yo 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 runakaKuvura 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.
<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 runakaKuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runakaKuvura 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>
Kugenda
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">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">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 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.
<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>
Uhagaritse
Ukoresheje urusobekerane rwa gride hamwe nibyiciro byingirakamaro, amakarita arashobora gukorwa atambitse muburyo bugendanwa kandi bworoshye. Murugero rukurikira, dukuraho imiyoboro ya gride hamwe .no-gutters
no gukoresha .col-md-*
amasomo kugirango dukore ikarita itambitse kumurongo md
. Ibindi byahinduwe birashobora gukenerwa bitewe nibikarita yawe.
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" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
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 w'ikarita y'ibanze
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Ikarita yicyiciro cya kabiri
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Intsinzi yikarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'akaga
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yo kuburira
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'amakuru
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yoroheje
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
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-only
n'ishuri.
Imipaka
Koresha imipaka ikoreshwa kugirango uhindure gusa border-color
ikarita. Menya ko ushobora gushyira .text-{color}
amasomo kubabyeyi .card
cyangwa agace k'ibikarita nkuko bigaragara hano hepfo.
Umutwe w'ikarita y'ibanze
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Ikarita yicyiciro cya kabiri
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Intsinzi yikarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'akaga
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yo kuburira
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'amakuru
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yoroheje
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
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-color
ukanakuraho .bg-transparent
.
Intsinzi yikarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
<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
.
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 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.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
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.
<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.
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 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.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
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.
<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>
Ikarita ya gride
Koresha sisitemu ya Bootstrap hamwe .row-cols
namasomo yayo kugirango ugenzure umubare wa grid inkingi (uzengurutse amakarita yawe) werekana kumurongo. Kurugero, hano .row-cols-1
dushira amakarita kumurongo umwe, hanyuma .row-cols-md-2
ugabanye amakarita ane kugirango ubugari bungana kumurongo myinshi, uhereye kumurongo wo hagati.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Hindura .row-cols-3
hanyuma uzabona ikarita ya kane ipfunyitse.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Mugihe ukeneye uburebure bungana, ongeraho .h-100
amakarita. Niba ushaka uburebure bungana muburyo budasanzwe, urashobora gushira $card-height: 100%
muri Sass.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ngufi.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Inkingi
Ikarita irashobora gutondekwa muburyo bwa Masonry busa na CSS gusa uyiziritse .card-columns
. Ikarita yubatswe hamwe na CSS column
aho 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 kumeneka inkingi, tugomba kuyashyiraho display: inline-block
nkuko column-break-inside: avoid
atari igisubizo cyamasasu.
Umutwe w'amakarita uzengurutse umurongo mushya
Iyi ni ikarita ndende ifite inyandiko ishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Amagambo azwi cyane, akubiye mubintu byahagaritswe.
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Iheruka kuvugururwa 3 mins ishize
Amagambo azwi cyane, akubiye mubintu byahagaritswe.
Umutwe w'amakarita
Iyi karita ifite umutwe usanzwe hamwe na paragraphe ngufi yinyandiko munsi.
Iheruka kuvugururwa 3 mins ishize
Amagambo azwi cyane, akubiye mubintu byahagaritswe.
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>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Inkingi yamakarita irashobora kandi kwagurwa no gutegurwa hamwe na kode yinyongera. Iyerekanwa hepfo .card-columns
niyagurwa 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;
}
}