Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Kaadi za kaadi

Kaadi za Bootstrap ziwa ekintu ekikyukakyuka era ekigaziyizibwa eky’ebirimu nga kirimu enjawulo n’enkola eziwera.

Ku muko guno

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 marginby default, kale kozesa spacing utilities nga bwekyetaagisa.

Wansi waliwo ekyokulabirako kya kaadi enkulu erimu ebirimu ebitabuddwamu n’obugazi obutakyukakyuka. Kaadi tezirina bugazi bunywevu okutandika, kale mu butonde zijja kujjuza obugazi obujjuvu obw’ekintu kyayo ekizadde. Kino kyangu okulongoosebwa n'engeri zaffe ez'enjawulo ez'okupima obunene .

Placeholder Image cap
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.

Kino kye kimu ku biwandiiko munda mu mubiri gwa 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-titleku <h*>tag. Mu ngeri y’emu, enkolagana zigattibwako ne ziteekebwa okumpi ne ndala nga zigatta .card-linkku <a>tag.

Ebigambo ebitonotono bikozesebwa nga bongerako a .card-subtitleku <h*>tag. Singa the .card-titlen’ebintu .card-subtitlebiteekebwa mu .card-bodykintu, 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-topateeka ekifaananyi waggulu ku kaadi. Nga olina .card-text, ebiwandiiko bisobola okugattibwa ku kaadi. Ebiwandiiko ebiri munda .card-textnabyo bisobola okukolebwako sitayiro n'obubonero bwa HTML obwa bulijjo.

Placeholder Image cap

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>
Ebifulumiziddwa
  • 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
Ekiwandiiko kya kaadi wansi 
<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.

Placeholder Image cap
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
Card link Enkolagana endala 
<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>

Okwongerako omutwe ne/oba wansi ogw'okwesalirawo munda mu kaadi.

Ebifulumiziddwa
Enzijanjaba y’ebyapa eby’enjawulo

Nga kiwandiiko ekiwagira 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-headerku <h*>bintu.

Ebifulumiziddwa
Enzijanjaba y’ebyapa eby’enjawulo

Nga kiwandiiko ekiwagira 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>
Kwoti

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title 
<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>
Ebifulumiziddwa
Enzijanjaba y’ebyapa eby’enjawulo

Nga kiwandiiko ekiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.

Genda awalala
Ennaku 2 eziyise 
<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 widthto start, kale zijja kuba 100% wide 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 kiwandiiko ekiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.

Genda awalala
Enzijanjaba y’ebyapa eby’enjawulo

Nga kiwandiiko ekiwagira 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 kiwandiiko ekiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.

Eppeesa
Omutwe gwa kaadi

Nga kiwandiiko ekiwagira 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 kiwandiiko ekiwagira 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 kiwandiiko ekiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.

Genda awalala
Enzijanjaba y’ebyapa eby’enjawulo

Nga kiwandiiko ekiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.

Genda awalala
Enzijanjaba y’ebyapa eby’enjawulo

Nga kiwandiiko ekiwagira 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>

Okwongerako okutambula okumu ku mutwe gwa kaadi (oba okuziyiza) n'ebitundu bya Bootstrap ebya nav .

Enzijanjaba y’ebyapa eby’enjawulo

Nga kiwandiiko ekiwagira 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">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 kiwandiiko ekiwagira 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">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.

Placeholder Image cap
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

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

Placeholder Card image
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 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>
Weetegereze nti ebirimu tebirina kuba binene okusinga obuwanvu bw’ekifaananyi. Singa ebirimu biba binene okusinga ekifaananyi ebirimu bijja kulagibwa ebweru w’ekifaananyi.

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-0era ne tukozesa .col-md-*kiraasi okufuula kaadi horizontal ku mdbreakpoint. Oyinza okwetaagisa okwongera okutereeza okusinziira ku birimu ku kaadi yo.

Placeholder Image
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
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
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
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
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
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
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
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
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-hiddenkiraasi.

Ensalo

Kozesa border utilities okukyusa just the border-colorya kaadi. Weetegereze nti osobola okuteeka .text-{color}kiraasi ku muzadde .cardoba ekitundu ekitono eky’ebirimu kaadi nga bwe kiragibwa wansi.

Omutwe
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
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
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
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
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
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
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
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-colorne .bg-transparent.

Omutwe
Omutwe gwa kaadi y’obuwanguzi

Ebimu ku biwandiiko eby’ekyokulabirako eby’amangu okuzimba ku mutwe gwa kaadi n’okukola ekitundu ekinene eky’ebirimu kaadi.

Wansi wansi 
<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 smbamenya.

Placeholder Image cap
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

Placeholder Image cap
Omutwe gwa kaadi

Kaadi eno erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.

Yasembyeyo okutereezebwa 3 mins ago

Placeholder Image cap
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.

Placeholder Image cap
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
Placeholder Image cap
Omutwe gwa kaadi

Kaadi eno erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.

Yasembyeyo okutereezebwa 3 mins ago
Placeholder Image cap
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>
    </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-colskiraasi zaayo okufuga empagi za grid mmeka (ezingiddwa ku kaadi zo) z’olaga buli lunyiriri. Okugeza, wuuno .row-cols-1okuteeka kaadi ku mpagi emu, n’okugabanya .row-cols-md-2kaadi nnya ku bugazi obwenkanankana okubuna ennyiriri eziwera, okuva ku kifo eky’okumenya eky’omu makkati okutuuka waggulu.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.

Placeholder Image cap
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-3ojja kulaba nga kizingiriddwa kaadi ey’okuna.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.

Placeholder Image cap
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-100ku kaadi. Bw’oba ​​oyagala obuwanvu obwenkanankana nga bwe kiri, osobola okuteeka $card-height: 100%mu Sass.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala. Ebirimu bino biwanvuko katono.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi nnyimpi.

Placeholder Image cap
Omutwe gwa kaadi

Eno kaadi empanvu ng’erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.

Placeholder Image cap
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 zijja kusimba ennyiriri mu ngeri ey’otoma.

Placeholder Image cap
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
Placeholder Image cap
Omutwe gwa kaadi

Kaadi eno erina ebiwandiiko ebiwagira wansi ng’ekintu eky’obutonde ekikulemberamu ebirimu ebirala.

Yasembyeyo okutereezebwa 3 mins ago
Placeholder Image cap
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="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 v4twakozesa 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-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;