Source

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 .

100%x180 nga bwe kiri
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 class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

Enkofiira y'ekifaananyi [100%x180].

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 class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Laga ebibinja

Tonda enkalala z’ebirimu mu kaadi ng’olina ekibinja ky’olukalala lw’okufuumuuka.

  • Cras justo odio nga bwe kiri
  • Dapibus ac ebikozesebwa mu
  • Ekibumbe ekiyitibwa Vestibulum ku eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Ebifulumiziddwa
  • Cras justo odio nga bwe kiri
  • Dapibus ac ebikozesebwa mu
  • Ekibumbe ekiyitibwa Vestibulum ku eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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.

Enkofiira y'ekifaananyi [100%x180].
Omutwe gwa kaadi

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

  • Cras justo odio nga bwe kiri
  • Dapibus ac ebikozesebwa mu
  • Ekibumbe ekiyitibwa Vestibulum ku eros
Card link Enkolagana endala 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Ennamba enzijuvu posuere erat a ante.

Omuntu omututumufu mu Source Title 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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% 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 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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
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="#">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.

100%x180 nga bwe kiri
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

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

100%x270 nga bwe kiri
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 class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

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, ekigattibwako nga kirina empagi ez’obugazi n’obuwanvu obwenkanankana. Ebibinja bya kaadi bikozesa display: flex;okutuuka ku sayizi yaabwe eya yunifoomu.

100%x180 nga bwe kiri
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

100%x180 nga bwe kiri
Omutwe gwa kaadi

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

Yasembyeyo okutereezebwa 3 mins ago

100%x180 nga bwe kiri
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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Bw’oba ​​okozesa ebibinja bya kaadi ebiriko wansi, ebirimu bijja kusimba ennyiriri mu ngeri ey’otoma.

100%x180 nga bwe kiri
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
100%x180 nga bwe kiri
Omutwe gwa kaadi

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

Yasembyeyo okutereezebwa 3 mins ago
100%x180 nga bwe kiri
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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Ebisenge bya kaadi

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

100%x200 nga bwe kiri
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

100%x200 nga bwe kiri
Omutwe gwa kaadi

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

Yasembyeyo okutereezebwa 3 mins ago

100%x200 nga bwe kiri
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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Nga bwe kiri ku bibinja bya kaadi, wansi wa kaadi mu ddeeke zijja kusimba ennyiriri mu ngeri ey’otoma.

100%x180 nga bwe kiri
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
100%x180 nga bwe kiri
Omutwe gwa kaadi

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

Yasembyeyo okutereezebwa 3 mins ago
100%x180 nga bwe kiri
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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

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.

100%x160 nga bwe kiri
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.

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Ennamba enzijuvu posuere erat a ante.

Omuntu omututumufu mu Source Title
100%x160 nga bwe kiri
Omutwe gwa kaadi

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

Yasembyeyo okutereezebwa 3 mins ago

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Namba enzijuvu posuere erat.

Omuntu omututumufu mu Source Title
Omutwe gwa kaadi

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

Yasembyeyo okutereezebwa 3 mins ago

100%x260 nga bwe kiri

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit. Ennamba enzijuvu posuere erat a ante.

Omuntu omututumufu mu Source Title
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is 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>

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