SourceKaardii
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 margin
durtiitti 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
Koppii gochuu
<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.
Koppii gochuu
<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-title
tokkotti 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-subtitle
irratti a dabaluudhaani . <h*>
Yoo .card-title
fi .card-subtitle
wantootni 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
Koppii gochuu
<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-top
fakkii tokko gara gubbaa kaardii sanaatti kaa’a. , .card-text
tiin barreeffama kaardii irratti dabalamuu danda'a. Barruun keessaa .card-text
mallattoolee 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.
Koppii gochuu
<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.
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Vestibulum at eros jedhama
Koppii gochuu
<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>
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Vestibulum at eros jedhama
Koppii gochuu
<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.
Placeholder
Image 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
Koppii gochuu
<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" > 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.
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi
Koppii gochuu
<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-header
irratti dabaluudhaan akkaataa itti gochuun ni danda'ama .<h*>
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi
Koppii gochuu
<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>
Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.
Koppii gochuu
<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>
Wal'aansa mata duree addaa
Barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa ta'ee wajjin.
Bakka tokko dhaqi
Koppii gochuu
<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 width
jalqabuuf 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
Koppii gochuu
<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
Koppii gochuu
<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
Koppii gochuu
<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
Koppii gochuu
<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>
Navigeeshinii
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
Koppii gochuu
<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= "#" tabindex= "-1" aria-disabled= "true" > 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
Koppii gochuu
<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= "#" tabindex= "-1" aria-disabled= "true" > 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
Koppii gochuu
<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-top" 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
Koppii gochuu
<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 .no-gutters
fayyadamnee 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
Koppii gochuu
<div class= "card mb-3" style= "max-width: 540px;" >
<div class= "row no-gutters" >
<div class= "col-md-4" >
<img src= "..." class= "card-img" 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 faayidaa barruu fi duubbee fayyadami .
Mata duree kaardii sadarkaa tokkoffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii sadarkaa lammaffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii milkaa'inaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii balaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii akeekkachiisaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii info
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii ifaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii dukkanaa'aa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Koppii gochuu
<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-only
gita waliin dhokatee.
Daangaa
Faayidaa daangaa border-color
fayyadamii kaardii tokkoo qofa jijjiiruuf . .text-{color}
Hubadhu akka armaan gadiitti gita warra .card
ykn tuuta xiqqaa qabiyyee kaardii irratti kaa'uu dandeessa .
Mata duree kaardii sadarkaa tokkoffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii sadarkaa lammaffaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii milkaa'inaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii balaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii akeekkachiisaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii info
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii ifaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Mata duree kaardii dukkanaa'aa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Koppii gochuu
<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-color
wajjin haquu dandeessa .bg-transparent
.
Mata duree kaardii milkaa'inaa
Barreeffama fakkeenya saffisaa tokko tokko mata duree kaardii irratti ijaaruu fi qabiyyee kaardii harka caalu uumuuf.
Koppii gochuu
<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.
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
Koppii gochuu
<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.
Placeholder
Image cap
Mata duree kaardii
Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.
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.
Koppii gochuu
<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>
Deekii kaardii
Tuuta kaardii bal'inaafi olka'iinsa walqixa ta'e kan walitti hin maxxanne barbaadduu? Deekii kaardii fayyadamuu.
Placeholder
Image 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
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
Koppii gochuu
<div class= "card-deck" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Akkuma gareewwan kaardii, jalaan kaardii deekii keessatti ofumaan ni sararamu.
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.
Placeholder
Image cap
Mata duree kaardii
Kaardii kun barreeffama deeggarsaa armaan gadii akka qabiyyee dabalataatti geggeessaa uumamaa qaba.
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.
Koppii gochuu
<div class= "card-deck" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
</div>
Kaardii giiridii
Tarjaa tarjaa meeqa (kaardii kee irratti marfame) tarree tokkoof agarsiiftu to'achuuf sirna tarjaa Bootstrap fi .row-cols
gita isaa fayyadami. Fakkeenyaaf, kunoo .row-cols-1
kaardii tarjaa tokko irratti diriirsuu, fi .row-cols-md-2
kaardii 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.
Koppii gochuu
<div class= "row row-cols-1 row-cols-md-2" >
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Gara jijjiiri .row-cols-3
marfama 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.
Koppii gochuu
<div class= "row row-cols-1 row-cols-md-3" >
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Yeroo olka'iinsa walqixaa barbaaddu, .h-100
kaardii 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.
Koppii gochuu
<div class= "row row-cols-1 row-cols-md-3" >
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a short card.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class= "col mb-4" >
<div class= "card h-100" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Tarreewwan kaardii
Kaardii gara tarjaa Masonry fakkaatutti CSS qofaan gurmaa'uu danda'u .card-columns
. column
Kaartoonni 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-block
akka column-break-inside: avoid
ammatti furmaata rasaasa hin dandeenyetti saaguu qabna.
Placeholder
Image 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.
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
Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat.
Mata duree kaardii
Kaardii kun mata duree idilee fi barreeffama keeyyata gabaabaa isa jalatti qaba.
Yeroo dhumaaf kan fooyya'e 3 mins dura
Placeholder
Card image
Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit. Lakkoofsa guutuu posuere erat a ante.
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
Koppii gochuu
<div class= "card-columns" >
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title that wraps to a new line</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class= "card p-3" >
<blockquote class= "blockquote mb-0 card-body" >
<p> 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 src= "..." class= "card-img-top" alt= "..." >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card bg-primary text-white text-center p-3" >
<blockquote class= "blockquote mb-0" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class= "blockquote-footer text-white" >
<small>
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card text-center" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has a regular title and short paragraphy of text below it.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img src= "..." class= "card-img-top" alt= "..." >
</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-columns
gitaa CSS walfakkaataa nuti fayyadamnu fayyadamuun—tarjaawwan CSS— tuuta sadarkaa deebii kennuu lakkoofsa tarjaa jijjiiruuf uumuuf.
Koppii gochuu
.card-columns {
@include media-breakpoint-only ( lg ) {
column-count : 4 ;
}
@include media-breakpoint-only ( xl ) {
column-count : 5 ;
}
}