Kaadi za kaadi
Kaadi za Bootstrap ziwa ekintu ekikyukakyuka era ekigaziyizibwa eky’ebirimu nga kirimu enjawulo n’enkola eziwera.
Ku
Kaadi kye kifo ekitereka ebirimu ekikyukakyuka era ekigaziyizibwa. Mulimu eby’okulondako eby’emitwe n’ebya wansi, ebirimu eby’enjawulo, langi z’emabega ezikwata ku mbeera, n’enkola ez’amaanyi ez’okulaga. Bw’oba omanyidde Bootstrap 3, kaadi zikyusa ebipande byaffe eby’edda, enzizi, n’ebifaananyi ebitonotono. Enkola efaananako n’ebitundu ebyo eriwo nga ebika by’ebikyusa ku kaadi.
Eky'okulabirako
Kaadi zizimbibwa nga zirina markup entono n’emisono nga bwe kisoboka, naye nga zikyasobola okutuusa ttani y’okufuga n’okulongoosa. Zizimbibwa ne flexbox, zikuwa alignment ennyangu era zitabula bulungi n’ebitundu bya Bootstrap ebirala. Tezirina margin
by default, kale kozesa spacing utilities nga bwekyetaagisa.
Wansi waliwo ekyokulabirako kya kaadi enkulu erimu ebirimu ebitabuddwamu n’obugazi obutakyukakyuka. Kaadi tezirina bugazi butebenkevu okutandika, kale mu butonde zijja kujjuza obugazi obujjuvu obw’ekintu kyayo ekizadde. Kino kyangu okulongoosebwa n'engeri zaffe ez'enjawulo ez'okupima obunene .
Omutwe gwa kaadi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Genda awalala<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>
Ebika by’ebirimu
Kaadi ziwagira ebintu eby’enjawulo, omuli ebifaananyi, ebiwandiiko, ebibinja by’olukalala, enkolagana, n’ebirala. Wansi waliwo ebyokulabirako by’ebyo ebiwagirwa.
Omubiri
Ekizimba kaadi ye .card-body
. Kikozese buli lw’oba weetaaga ekitundu ekiriko pad munda mu kaadi.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Emitwe, ebiwandiiko, n’enkolagana
Emitwe gya kaadi gikozesebwa nga bongerako .card-title
ku <h*>
tag. Mu ngeri y’emu, enkolagana zigattibwako ne ziteekebwa okumpi ne ndala nga zigatta .card-link
ku <a>
tag.
Ebigambo ebitonotono bikozesebwa nga bongerako a .card-subtitle
ku <h*>
tag. Singa the .card-title
n’ebintu .card-subtitle
biteekebwa mu .card-body
kintu, omutwe gwa kaadi n’omutwe omutono bikwatagana bulungi.
Omutwe gwa kaadi
Omutwe gwa kaadi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Card link Enkolagana endala<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>
Ebifaananyi
.card-img-top
ateeka ekifaananyi waggulu ku kaadi. Nga olina .card-text
, ebiwandiiko bisobola okugattibwa ku kaadi. Ebiwandiiko ebiri munda .card-text
nabyo bisobola okukolebwako sitayiro n'obubonero bwa HTML obwa bulijjo.
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
<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>
Laga ebibinja
Tonda enkalala z’ebirimu mu kaadi ng’olina ekibinja ky’olukalala lw’okufuumuuka.
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
<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>
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
<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>
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
<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>
Sinki y’omu ffumbiro
Tabula n’okukwataganya ebika by’ebirimu ebiwerako okukola kaadi gy’olina, oba okusuula buli kimu omwo. Wansi waliwo emisono gy’ebifaananyi, ebiziyiza, emisono gy’ebiwandiiko, n’ekibinja ky’olukalala —byona nga bizingiddwa mu kaadi ey’obugazi obutakyukakyuka.
Omutwe gwa kaadi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
- Ekintu
- Ekintu ekyokubiri
- Ekintu eky’okusatu
<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>
Omutwe ne wansi
Okwongerako omutwe ne/oba wansi ogw'okwesalirawo munda mu kaadi.
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<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>
Emitwe gya kaadi gisobola okukolebwako sitayiro nga bongerako .card-header
ku <h*>
bintu.
Ebifulumiziddwa
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<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>
Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.
<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>
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<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>
Okugerageranya obunene
Cards assume no specific width
to start, kale zijja kuba 100% ngazi okuggyako nga kiragiddwa bulala. Kino osobola okukyusa nga bwe kyetaagisa ne CSS eya bulijjo, kiraasi za grid, mixins za grid Sass, oba ebikozesebwa.
Okukozesa grid markup
Ng’okozesa giridi, zizinga kaadi mu mpagi n’ennyiriri nga bwe kyetaagisa.
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalalaEnzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<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>
Okukozesa ebikozesebwa
Kozesa ebikozesebwa byaffe ebitonotono ebiriwo mu kugerageranya obunene okuteeka amangu obugazi bwa kaadi.
Omutwe gwa kaadi
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
EppeesaOmutwe gwa kaadi
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Eppeesa<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>
Okukozesa CSS eya bulijjo
Kozesa CSS eya bulijjo mu sitayiro zo oba nga sitayiro eziri mu layini okuteeka obugazi.
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<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>
Okusengeka ebiwandiiko
Osobola okukyusa amangu ensengeka y’ebiwandiiko bya kaadi yonna —mu bujjuvu oba ebitundu ebitongole —n’ebika byaffe eby’okusengeka ebiwandiiko .
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalalaEnzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalalaEnzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<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>
Okutambulira ku nnyanja
Okwongerako okutambulirako okumu ku mutwe gwa kaadi (oba okuziyiza) n'ebitundu bya Bootstrap ebya nav .
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Enzijanjaba y’ebyapa eby’enjawulo
Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.
Genda awalala<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Ebifaananyi
Kaadi zirimu ebintu ebitonotono eby’okukola n’ebifaananyi. Londa okuva mu kwongerako “ebikopo by’ebifaananyi” ku buli nkomerero ya kaadi, okubikka ebifaananyi ebirimu ebirimu ku kaadi, oba okumala okussa ekifaananyi mu kaadi.
Ebifaananyi ebiriko enkofiira
Okufaananako n’emitwe n’egya wansi, kaadi zisobola okubeeramu “enkoofiira z’ebifaananyi” waggulu ne wansi —ebifaananyi ebiri waggulu oba wansi ku kaadi.
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Yasembyeyo okutereezebwa 3 mins ago
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Yasembyeyo okutereezebwa 3 mins ago
<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>
Ebifaananyi ebibikkiddwako
Fuula ekifaananyi mu mugongo gwa kaadi era obikkeko ebiwandiiko bya kaadi yo. Okusinziira ku kifaananyi, oyinza okwetaaga oba obutakwetaaga sitayiro oba ebikozesebwa ebirala.
<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>
Okwegolola
Nga tukozesa omugatte gwa kiraasi za grid ne utility, kaadi zisobola okukolebwa horizontal mu ngeri ekwatagana n’essimu era eddamu. Mu kyokulabirako wansi, tuggyawo emidumu gya grid ne .g-0
era ne tukozesa .col-md-*
kiraasi okufuula kaadi horizontal ku md
breakpoint. Oyinza okwetaagisa okukola enkyukakyuka endala okusinziira ku birimu ku kaadi yo.
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Yasembyeyo okutereezebwa 3 mins ago
<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>
Emisono gya kaadi
Kaadi zirimu engeri ez’enjawulo ez’okulongoosaamu ennyuma zazo, ensalosalo zazo, ne langi.
Ennyuma ne langi
Kozesa langi y’ebiwandiiko n’ebikozesebwa mu mugongo okukyusa endabika ya kaadi.
Omutwe gwa kaadi ya pulayimale
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi ey’okubiri
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi y’obuwanguzi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi y’akabi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi ey’okulabula
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi ya Info
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi y’ekitangaala
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi enzirugavu
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
<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-dark 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-dark 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-dark 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>
Okutuusa amakulu mu tekinologiya ayamba
Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .visually-hidden
kiraasi.
Ensalo
Kozesa border utilities okukyusa just the border-color
ya kaadi. Weetegereze nti osobola okuteeka .text-{color}
kiraasi ku muzadde .card
oba ekitundu ekitono eky’ebirimu kaadi nga bwe kiragibwa wansi.
Omutwe gwa kaadi ya pulayimale
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi ey’okubiri
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi y’obuwanguzi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi y’akabi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi ey’okulabula
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi ya Info
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi y’ekitangaala
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
Omutwe gwa kaadi enzirugavu
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
<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>
Ebikozesebwa mu kukola Mixins
Osobola n'okukyusa ensalosalo ku mutwe gwa kaadi ne wansi nga bwe kyetaagisa, n'okuggyawo zazo background-color
ne .bg-transparent
.
Omutwe gwa kaadi y’obuwanguzi
Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.
<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>
Ensengeka ya kaadi
Ng’oggyeeko okukola sitayiro ebirimu mu kaadi, Bootstrap erimu engeri ntono ez’okuteekawo omuddirirwa gwa kaadi. Mu kiseera kino, enkola zino ez’ensengeka tezinnaba kuddamu .
Ebibinja bya kaadi
Kozesa ebibinja bya kaadi okulaga kaadi nga ekintu kimu, ekigattibwako nga kirina empagi ez’obugazi n’obuwanvu obwenkanankana. Ebibinja bya kaadi bitandika nga bitumbidde era ne bikozesa display: flex;
okufuuka ebikwatagana n’ebipimo eby’enjawulo ebitandikira ku kifo we sm
bamenya.
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Yasembyeyo okutereezebwa 3 mins ago
Omutwe gwa kaadi
Kaadi eno erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.
Yasembyeyo okutereezebwa 3 mins ago
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Kaadi eno erina ebirimu ebiwanvu n’okusinga esooka okulaga ekikolwa ekyo eky’obuwanvu obwenkanankana.
Yasembyeyo okutereezebwa 3 mins ago
<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>
Bw’oba okozesa ebibinja bya kaadi ebiriko wansi, ebirimu bijja kusimba ennyiriri mu ngeri ey’otoma.
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Omutwe gwa kaadi
Kaadi eno erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Kaadi eno erina ebirimu ebiwanvu n’okusinga esooka okulaga ekikolwa ekyo eky’obuwanvu obwenkanankana.
<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>
Kaadi za giridi
Kozesa enkola ya Bootstrap grid ne .row-cols
kiraasi zaayo okufuga empagi za grid mmeka (ezingiddwa ku kaadi zo) z’olaga buli lunyiriri. Okugeza, wuuno .row-cols-1
okuteeka kaadi ku mpagi emu, n’okugabanya .row-cols-md-2
kaadi nnya ku bugazi obwenkanankana okubuna ennyiriri eziwera, okuva ku kifo eky’okumenya eky’omu makkati okutuuka waggulu.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
<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>
Kikyuse .row-cols-3
ojja kulaba nga kizingiriddwa kaadi ey’okuna.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
<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>
Bw’oba weetaaga obuwanvu obwenkanankana, yongera .h-100
ku kaadi. Bw’oba oyagala obuwanvu obwenkanankana nga bwe kiri, osobola okuteeka $card-height: 100%
mu Sass.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Omutwe gwa kaadi
Eno kaadi nnyimpi.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.
Omutwe gwa kaadi
Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
<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>
Nga bwe kiri ku bibinja bya kaadi, wansi wa kaadi bijja kusimba ennyiriri mu ngeri ey’otoma.
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.
Omutwe gwa kaadi
Kaadi eno erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.
Omutwe gwa kaadi
Eno kaadi egazi ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Kaadi eno erina ebirimu ebiwanvu n’okusinga esooka okulaga ekikolwa ekyo eky’obuwanvu obwenkanankana.
<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>
Okuzimba amayinja
Mu v4
twakozesa enkola ya CSS yokka okukoppa enneeyisa y’empagi eziringa Masonry , naye enkola eno yajja n’ebizibu bingi ebitali birungi . Bw’oba oyagala okuba n’ensengeka y’ekika kino mu v5
, osobola okumala okukozesa Masonry plugin. Masonry temuli mu Bootstrap , naye tukoze ekyokulabirako kya demo okukuyamba okutandika.
Sass nga bwe kiri
Enkyukakyuka ezikyukakyuka
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$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;