Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Kaardii

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

Fuula kana irratti

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 .

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

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.

Placeholder Image cap

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

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

Garee tarreessi

Tarreewwan qabiyyee kaardii keessatti garee tarree flush waliin uumi.

  • Meeshaa tokko
  • Wanti lammaffaan
  • Wanti sadaffaa
<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>
Kan mul'ate
  • Meeshaa tokko
  • Wanti lammaffaan
  • Wanti sadaffaa
<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>
  • Meeshaa tokko
  • Wanti lammaffaan
  • Wanti sadaffaa
Jalqaba kaardii 
<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>

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.

Placeholder Image cap
Mata duree kaardii

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

  • Meeshaa tokko
  • Wanti lammaffaan
  • Wanti sadaffaa
Hidhaa kaardii Hidhaa biraa 
<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>

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

Caqasa beekamaa, elementii caqasa ugguraa keessatti qabame.

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>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>
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 qindeessaa 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-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
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">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.

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

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>

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.

Placeholder Card image
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 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>
Qabiyyeen olka'iinsa fakkii caalu ta'uu akka hin qabne hubadhu. Yoo qabiyyeen fakkii caalaa guddaa ta'e qabiyyeen fakkiin alatti ni mul'ata.

Dalga-galii

Walnyaatinsa gitaa giiridii fi faayidaa fayyadamuun, kaardii karaa mobaayilaaf mijaawaa fi deebii kennuu danda’uun horizontal taasifamuu danda’a. Fakkeenya armaan gadii keessatti, gutters giiridii waliin baasnee gita .g-0fayyadamnee kaardii bakka cabbii irratti horizontal goona . Qabiyyee kaardii keessanii irratti hundaa’uun sirreeffamni dabalataa barbaachisuu danda’a..col-md-*md

Placeholder Image
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 mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Akkaataa kaardii

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

Duubbee fi halluu

Bifa kaardii jijjiiruuf halluu barruu fi faayidaa 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-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
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 .visually-hiddengita 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">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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 tuulamanii jalqabanii fi bakka cabbii display: flex;irraa eegalee safara walfakkaatuun maxxanuuf itti fayyadamu sm.

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

Placeholder Image cap
Mata duree kaardii

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

Yeroo dhumaaf kan fooyya'e 3 mins dura

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

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

Placeholder Image 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
Placeholder Image cap
Mata duree kaardii

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

Yeroo dhumaaf kan fooyya'e 3 mins dura
Placeholder Image 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 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>

Kaardii giiridii

Tarjaa tarjaa meeqa (kaardii kee irratti marfame) tarree tokkoof agarsiiftu to'achuuf sirna tarjaa Bootstrap fi .row-colsgita isaa fayyadami. Fakkeenyaaf, kunoo .row-cols-1kaardii tarjaa tokko irratti diriirsuu, fi .row-cols-md-2kaardii afur gara bal'ina walqixaatti tarreewwan hedduu irratti qooduun, qabxii ciccituu giddugaleessaa irraa gara oliitti.

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

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

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Gara jijjiiri .row-cols-3marfama kaardii afraffaatti ni argita.

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Yeroo olka'iinsa walqixaa barbaaddu, .h-100kaardii irratti dabali. $card-height: 100%Yoo olka'iinsa walqixaa durtii barbaadde, Sass keessatti saaguu dandeessa .

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

Kun kaardii gabaabaa dha.

Placeholder Image cap
Mata duree kaardii

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

Placeholder Image cap
Mata duree kaardii

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

Akkuma gareewwan kaardii, jalaan kaardii ofumaan ni hiriiru.

Placeholder Image 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
Placeholder Image cap
Mata duree kaardii

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

Yeroo dhumaaf kan fooyya'e 3 mins dura
Placeholder Image 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="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry jedhamuun beekama

In nuti amala tarreewwan Masonryv4 fakkaatanii fakkeessuuf mala CSS qofa fayyadamne , garuu tooftaa kun bu'aa cinaa namatti hin tolle baay'ee wajjin dhufe . Yoo gosa qindaa'ina kana keessa qabaachuu barbaadde , Masonry plugin qofa fayyadamuu dandeessa. Masonry Bootstrap keessatti hin hammatamne , garuu akka jalqabdu si gargaaruuf fakkeenya demoo hojjenneerra .v5

Sass jedhama

Jijjiiramoota

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;