in English

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

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

Olukalala lw’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 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-headerku <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>
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 waliwo ebiwandiiko ebiwagira 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 waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.

Genda awalala
Enzijanjaba 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.

Eppeesa
Omutwe 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 awalala
Enzijanjaba y’ebyapa eby’enjawulo

Nga waliwo ebiwandiiko ebiwagira wansi nga eky’obutonde ekikulemberamu ebirimu eby’okwongerako.

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

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

Okwongerako okutambula 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" 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 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">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 .no-guttersera ne tukozesa .col-md-*kiraasi okufuula kaadi horizontal ku mdbreakpoint. Oyinza okwetaagisa okukola enkyukakyuka endala 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 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>

Emisono gya kaadi

Kaadi zirimu engeri ez’enjawulo ez’okulongoosaamu ennyuma zazo, ensalosalo zazo, ne langi.

Ennyuma ne langi

Kozesa ebikozesebwa mu biwandiiko n’eby’emabega 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-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>
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 .sr-onlykiraasi.

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

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, ekiyungiddwako nga kiriko 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>

Ebisenge bya kaadi

Oyagala seti ya kaadi ez’obugazi n’obuwanvu obwenkanankana ezitagattibwa ku ndala? Kozesa ddeeke za kaadi.

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.

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

Nga bwe kiri ku bibinja bya kaadi, wansi wa kaadi mu ddeeke 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="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>

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

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

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

Ennyiriri za kaadi

Kaadi zisobola okusengekebwa mu mpagi eziringa eza Masonry.card-columns nga zirina CSS yokka nga zizingira mu . Kaadi zizimbibwa n’ebintu bya CSS columnmu kifo kya flexbox okusobola okwanguyirwa okulaganya. Kaadi ziragirwa okuva waggulu okudda wansi ate okuva ku kkono okudda ku ddyo.

Emitwe waggulu! Mayiro zo ng’olina empagi za kaadi ziyinza okwawukana. Okuziyiza kaadi okumenya okubuna empagi, tulina okuziteeka ku display: inline-blocknga column-break-inside: avoidisn’t a bulletproof solution yet.

Placeholder Image cap
Omutwe gwa kaadi oguzinga ku layini empya

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

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title
Placeholder Image cap
Omutwe gwa kaadi

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

Yasembyeyo okutereezebwa 3 mins ago

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title
Omutwe gwa kaadi

Kaadi eno erina omutwe ogwa bulijjo n’akatundu akampi ak’ebiwandiiko wansi waayo.

Yasembyeyo okutereezebwa 3 mins ago

Placeholder Card image

Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.

Omuntu omututumufu mu Source Title
Omutwe gwa kaadi

Eno ye kaadi endala eriko omutwe n’ebiwandiiko ebiwagira wansi. Kaadi eno erina ebisingawo okugifuula empanvu katono okutwalira awamu.

Yasembyeyo okutereezebwa 3 mins ago

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

Ennyiriri za kaadi nazo zisobola okugaziwa n’okulongoosebwa nga zirina koodi endala ezimu. Wansi eragiddwa okugaziya kwa .card-columnskiraasi nga tukozesa CSS y’emu gye tukozesa—ennyiriri za CSS— okukola ekibinja ky’emitendera egy’okuddamu okukyusa omuwendo gw’ennyiriri.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}