Source

Kaardii

Kaartoonni Bootstrap qabduu qabiyyee jijjiiramaa fi babal'ifamuu danda'u kan garaagarummaa fi filannoowwan hedduu qabu ni kennu.

Waa'ee

Kaardii qabduu qabiyyee jijjiiramaa fi babal’ifamuu danda’uudha . Filannoowwan mataduree fi jalaan, qabiyyee adda addaa, halluuwwan duubbee haalata, fi filannoowwan agarsiisaa humna qaban of keessatti qabata. Yoo Bootstrap 3 beektan, kaartoonni paanaalii, boolla, fi suuraa xiqqaa keenya durii bakka bu'u. Hojiin walfakkaataan qaamolee sanaa akka gita fooyyessaa kaardiidhaaf ni argama.

Fakkeenya

Kaartoonni hanga danda'ametti mallattoo fi akkaataa xiqqaadhaan ijaaramaniiru, garuu ammas to'annoo fi dhuunfachiisaa toonii tokko dhiyeessuu danda'u. Flexbox waliin kan ijaaraman, qindaa'ina salphaa kan dhiyeessan yoo ta'u, qaamolee Bootstrap biroo wajjin akka gaariitti makamu. Isaan akka margindurtiitti hin qaban, kanaaf akka barbaachisummaa isaatti faayilii addaan fageenyaa fayyadami.

Armaan gaditti fakkeenya kaardii bu'uuraa qabiyyee walmakaa fi bal'ina dhaabbataa qabuudha. Kaartoonni bal'ina dhaabbataa jalqabuuf hin qaban, kanaafuu uumamaan bal'ina guutuu elementii warra isaa ni guutu. Kunis filannoowwan saayizii adda addaa keenyaan salphaatti kan dhuunfatamudha .

Kaardii suuraa cap
Mata duree kaardii

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Bakka tokko dhaqi 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" 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>

Gosa qabiyyee

Kaartoonni qabiyyee adda addaa deeggaru, fakkiiwwan, barruu, gareewwan tarree, hidhannoowwanii fi kkf dabalatee. Fakkeenyonni waan deeggaraman armaan gaditti dhiyaataniiru.

Qaama

Ijaarsi kaardii tokkoo kan .card-body. Yeroo kaardii keessaa kutaa padded barbaaddu hundatti itti fayyadami.

Kun barruu tokko tokko qaama kaardii keessa jiruudha. 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Mata dureewwan, barruu fi hidhannoowwan

Mata dureewwan kaardii mallattoo .card-titletokkotti dabaluudhaan fayyadama . Haaluma walfakkaatuun hidhannoowwan itti dabalamanii mallattoo tokkotti <h*>dabaluudhaan wal cinaa kaa'amu ..card-link<a>

Mata dureewwan xiqqaa kan fayyadaman mallattoo .card-subtitleirratti a dabaluudhaani . <h*>Yoo .card-titlefi .card-subtitlewantootni wanta tokko keessa kaa'aman .card-body, mata dureen kaardii fi mata dureen xiqqaan akka gaariitti qindaa'u.

Mata duree kaardii
Mata duree xiqqaa kaardii

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Hidhaa kaardii Hidhaa biraa 
<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>

Fakkiiwwan

.card-img-topfakkii tokko gara gubbaa kaardii sanaatti kaa’a. , .card-texttiin barreeffama kaardii irratti dabalamuu danda'a. Barruun keessaa .card-textmallattoolee HTML istaandaardii waliinis akkaataa itti gochuun ni danda'ama.

Kaardii suuraa cap

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Garee tarreessi

Tarreewwan qabiyyee kaardii keessatti garee tarree flush waliin uumi.

  • Cras qofaa odio
  • Dapibus ac haala mijeessuu keessatti
  • Vestibulum at eros jedhama
<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>
Kan mul'ate
  • Cras qofaa odio
  • Dapibus ac haala mijeessuu keessatti
  • Vestibulum at eros jedhama
<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>

Sinqii kushiinaa

Kaardii barbaaddu uumuuf gosoota qabiyyee hedduu walitti makuu fi walsimsiisuu, ykn waan hunda achitti darbadhu. Armaan gaditti kan agarsiifaman akkaataa fakkii, uggura, akkaataa barruu, fi garee tarree-hunduu kaardii bal'ina dhaabbataa keessatti marfamaniidha.

Kaardii suuraa cap
Mata duree kaardii

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

  • Cras qofaa odio
  • Dapibus ac haala mijeessuu keessatti
  • Vestibulum at eros jedhama
Hidhaa kaardii Hidhaa biraa 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" 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>

Kaardii keessaa mataduree fi/ykn jala sarara filannoo dabali.

Kan mul'ate
Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi 
<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>

Mata dureewwan kaardii elementoota .card-headerirratti dabaluudhaan akkaataa itti gochuun ni danda'ama .<h*>

Kan mul'ate
Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi 
<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>
Jechama

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

Mata duree Madda keessatti nama beekamaa 
<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>
Kan mul'ate
Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi
Guyyaa 2 dura 
<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>

Saayizii gochuu

Kaartoonni widthjalqabuuf addaa hin qaban jedhanii fudhatu, kanaaf yoo haala biraatiin ibsame malee 100% bal'aa ta'u. Kana akka barbaachisummaa isaatti CSS amala, gita tarjaa, mixins tarjaa Sass, ykn faayilii wajjin jijjiiruu dandeessa.

Mallattoo tarjaa fayyadamuu

Tarjaa fayyadamuun, kaardii akka barbaachisummaa isaatti tarjaa fi tarreedhaan marsi.

Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi
Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi 
<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>

Faayidaa fayyadamuun

Bal'ina kaardii tokkoo saffisaan saaguuf faayidaa saayizii keenya muraasa jiran fayyadamaa.

Mata duree kaardii

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Furtuu
Mata duree kaardii

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

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

CSS amala fayyadamuun

Bal'ina saaguuf CSS amala waraqaa akkaataa kee keessatti ykn akka akkaataa sarara keessaatti fayyadami.

Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi 
<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>

Hiriirsuu barruu

Hiriirsa barruu kaardii kamiyyuu daftee jijjiiruu dandeessa—guutummaa isaatiin ykn kutaalee murtaa'oodhaan— gitaalee hiriirsa barruu keenyaan .

Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi
Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi
Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi 
<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>

Qaamolee nav Bootstrap waliin gara mataduree kaardii (ykn uggura)tti qajeelcha tokko tokko dabali .

Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi 
<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>
Wal'aansa mata duree addaa

Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.

Bakka tokko dhaqi 
<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>

Fakkiiwwan

Kaartoonni fakkiiwwan waliin hojjechuuf filannoowwan muraasa of keessaa qabu. Fiixee kaardii tokkoo irratti “kopheewwan fakkii” dabaluu, fakkiiwwan qabiyyee kaardiitiin uwwisuu, ykn salphaatti fakkii kaardii keessa galchuu keessaa filadhu.

Kopheewwan suuraa

Mata dureewwanii fi jala jalaatiin wal fakkaatuun, kaartoonni “kopheewwan fakkii” gubbaa fi jalaa—fakkiiwwan kaardii gubbaa ykn jala jiran of keessaa qabaachuu dandaʼu.

Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Kaardii suuraa cap 
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" 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=".../100px180/" alt="Card image cap">
</div>

Fakkiiwwan irra kaa'aman

Fakkii gara duubbee kaardii jijjiiriitii barruu kaardii keetii irra kaa'i. Fakkii irratti hundaa'uun, akkaataa ykn faayidaa dabalataa si barbaachisuu ykn hin barbaachisu.

Fakkii kaardii
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Yeroo dhumaaf kan fooyya'e 3 mins dura

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" 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>

Akkaataa kaardii

Kaartoonni filannoowwan adda addaa duubbee, daangaa fi halluu isaanii dhuunfachuuf gargaaran of keessatti qabatu.

Duubbee fi halluu

Bifa kaardii jijjiiruuf faayidaa barruu fi duubbee fayyadami .

Mata duree
Mata duree kaardii sadarkaa tokkoffaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii sadarkaa lammaffaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii milkaa'inaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii balaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii akeekkachiisaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii info

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii ifaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii dukkanaa'aa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

<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>
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .sr-onlygita waliin dhokatee.

Daangaa

Faayidaa daangaaborder-color fayyadamii kaardii tokkoo qofa jijjiiruuf . .text-{color}Hubadhu akka armaan gadiitti gita warra .cardykn tuuta xiqqaa qabiyyee kaardii irratti kaa'uu dandeessa .

Mata duree
Mata duree kaardii sadarkaa tokkoffaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii sadarkaa lammaffaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii milkaa'inaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii balaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii akeekkachiisaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii info

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii ifaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

Mata duree
Mata duree kaardii dukkanaa'aa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

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

Faayidaa Mixins

Akkasumas daangaawwan mataduree fi jalaan kaardii irratti akka barbaachisummaa isaatti jijjiiruu dandeessa, fi illee isaanii background-colorwajjin haquu dandeessa .bg-transparent.

Mata duree
Mata duree kaardii milkaa'inaa

Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.

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

Haala kaardii

Qabiyyee kaardii keessaa akkaataa itti gochuu malees, Bootstrap filannoowwan muraasa kaardii walduraa duubaan diriirsuu of keessatti qabata. Yeroodhaaf, filannoowwan haalata kun ammallee deebii hin kennan .

Garee kaardii

Gareewwan kaardii fayyadamii kaardii akka qaama tokkootti, maxxanfamee tarjaawwan bal'inaafi olka'iinsa walqixa qabanitti agarsiisi. Gareen kaardii display: flex;safara walfakkaataa isaanii galmaan ga’uuf itti fayyadamu.

Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Kaardii suuraa cap
Mata duree kaardii

Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Kaardii kun gocha olka'iinsa walqixaa sana agarsiisuuf qabiyyee isa jalqabaa caalaa illee dheeraa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Yeroo gareewwan kaardii jalaqaba qaban fayyadamtu, qabiyyeen isaanii ofumaan ni sararama.

Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Yeroo dhumaaf kan fooyya'e 3 mins dura
Kaardii suuraa cap
Mata duree kaardii

Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura
Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Kaardii kun gocha olka'iinsa walqixaa sana agarsiisuuf qabiyyee isa jalqabaa caalaa illee dheeraa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Deekii kaardii

Tuuta kaardii bal'inaafi olka'iinsa walqixa ta'e kan walitti hin maxxanne barbaadduu? Deekii kaardii fayyadamuu.

Kaardii suuraa cap
Mata duree kaardii

Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Kaardii suuraa cap
Mata duree kaardii

Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Kaardii kun gocha olka'iinsa walqixaa sana agarsiisuuf qabiyyee isa jalqabaa caalaa illee dheeraa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" 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=".../100px200/" 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=".../100px200/" 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>

Akkuma gareewwan kaardii, jalaan kaardii deekii keessatti ofumaan ni sararamu.

Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Yeroo dhumaaf kan fooyya'e 3 mins dura
Kaardii suuraa cap
Mata duree kaardii

Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura
Kaardii suuraa cap
Mata duree kaardii

Kun kaardii bal'aa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Kaardii kun gocha olka'iinsa walqixaa sana agarsiisuuf qabiyyee isa jalqabaa caalaa illee dheeraa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" 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=".../100px180/" 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=".../100px180/" 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>

Tarreewwan kaardii

Kaardii gara tarjaa Masonry fakkaatutti CSS qofaan gurmaa'uu danda'u .card-columns. columnKaartoonni salphaatti qindaa'uuf bakka flexbox amaloota CSS waliin ijaaramu . Kaardii gubbaa hanga jalaa fi bitaa gara mirgaatti ajajama.

Mataa ol qaba! Maayilii tarjaa kaardii wajjin gootu garaagarummaa qabaachuu danda’a. Kaartoonni tarjaa qaxxaamuranii akka hin cabneef, display: inline-blockakka column-break-inside: avoidammatti furmaata rasaasa hin dandeenyetti saaguu qabna.

Kaardii suuraa cap
Mata duree kaardii sarara haaraatti marfamu

Kun kaardii dheeraa barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'eedha. Qabiyyeen kun xiqqoo dheerata.

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

Mata duree Madda keessatti nama beekamaa
Kaardii suuraa cap
Mata duree kaardii

Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat.

Mata duree Madda keessatti nama beekamaa
Mata duree kaardii

Kaardii kun mata duree idilee fi barreeffama keeyyata gabaabaa isa jalatti qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura

Fakkii kaardii

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.

Mata duree Madda keessatti nama beekamaa
Mata duree kaardii

Kun kaardii biraa mata duree fi barreeffama deeggarsaa armaan gadii qabudha. Kaardii kun akka waliigalaatti xiqqoo dheeratu gochuuf qabiyyee dabalataa tokko tokko qaba.

Yeroo dhumaaf kan fooyya'e 3 mins dura

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" 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=".../100px160/" 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 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 class="card-img" src=".../100px260/" 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 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>

Tarjaawwan kaardii koodii dabalataa tokko tokkoon dheerachuu fi dhuunfachuus ni danda'ama. Armaan gaditti kan agarsiifame dheerina .card-columnsgitaa CSS walfakkaataa nuti fayyadamnu fayyadamuun—tarjaawwan CSS— tuuta sadarkaa deebii kennuu lakkoofsa tarjaa jijjiiruuf uumuuf.

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