Kpekpeɖeŋugbalẽviwo
Bootstrap ƒe kaɖiwo naa nyatakakawo ƒe nugoe si te ŋu trɔna eye wòkekena ɖe enu si me vovototo kple tiatia geɖewo le.
Ku ɖe
Kpekpeɖeŋugbalẽvi nye nusiwo le eme ƒe nugoe si te ŋu trɔna bɔbɔe eye wòkekena ɖe enu . Tiatia siwo nàte ŋu awɔ na tanyawo kple afɔtiwo, nyatakaka vovovowo, megbenyawo ƒe amadede siwo le nya siwo ƒo xlãe me, kple tiatia sẽŋu siwo nàɖe afia la le eme. Ne ènya Bootstrap 3 nyuie la, kaɖiwo xɔa míaƒe akpa xoxowo, vudowo, kple nɔnɔmetata suewo teƒe. Dɔwɔwɔ si sɔ kple akpa mawo li abe tɔtrɔ ƒe hatsotsowo ene na kaɖiwo.
Kpɔɖeŋu
Wowɔa kaɖiwo kple dzesidede kple atsyã suetɔ kekeake alesi woate ŋui, gake wogate ŋu tsɔa tɔn ɖeka ƒe dziɖuɖu kple tɔtrɔ ɖe nɔnɔmewo ŋu naa amewo kokoko. Wotu wo kple flexbox, wonaa ɖoɖowɔwɔ bɔbɔe eye wotsaka nyuie kple Bootstrap ƒe akpa bubuwo. Womekpɔ naneke marginle gɔmedzedzea me o, eyata zã dometsotso ƒe dɔwɔnuwo ne ehiã.
Kpekpeɖeŋugbalẽvi vevi aɖe si me nyawo tsaka eye woƒe kekeme le ɖoɖo nu ƒe kpɔɖeŋu aɖe le ete. Kpekpeɖeŋunamɔ̃wo ƒe kekeme aɖeke mele wo si be woadze egɔme o, eyata le dzɔdzɔme nu la, woayɔ eƒe dzila ƒe akpa ƒe kekeme bliboa me. Woate ŋu atrɔ asi le esia ŋu bɔbɔe kple míaƒe lolome ƒe tiatia vovovoawo .
Kpekpeɖeŋugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Yi afi aɖe<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>Emenyawo ƒomeviwo
Kpekpeɖeŋugbalẽviwo doa alɔ nyatakaka vovovowo, siwo dometɔ aɖewoe nye nɔnɔmetatawo, nuŋɔŋlɔwo, xexlẽdzesiwo ƒe ƒuƒoƒowo, kadodowo, kple bubuwo. Nusiwo wodo alɔe ƒe kpɔɖeŋuwo le ete.
Ŋutilã
Nusi wotsɔ wɔa agbalẽvi aɖee nye .card-body. Zãe ɣesiaɣi si nèhiã akpa si ŋu wofa nu ɖo le kaɖi aɖe me.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Tanyawo, nuŋɔŋlɔwo, kple kadodowo
Wozãa agbalẽvi ƒe tanyawo to wo tsɔtsɔ kpe .card-titleɖe <h*>dzesi aɖe ŋu me. Nenema ke wotsɔa kadodowo kpena ɖe wo nɔewo ŋu hedaa wo ɖe wo nɔewo xa to wo tsɔtsɔ kpe .card-linkɖe <a>dzesi aɖe ŋu me.
Wozãa nya siwo le ete la to a tsɔtsɔ kpe .card-subtitleɖe <h*>dzesi aɖe ŋu me. Ne wotsɔ nuawo .card-titlekple .card-subtitlenuawo da ɖe .card-bodynu aɖe me la, ke agbalẽvi la ƒe tanya kple tanya si le ete la sɔ nyuie.
Kpekpeɖeŋugbalẽvi ƒe tanya
Kpekpeɖeŋugbalẽvi ƒe tanya suewo
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Card link Kadodo bubu<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>Nɔnɔmetatawo
.card-img-toptsɔa nɔnɔmetata aɖe dana ɖe kaɖia tame. Ne èzã .card-text, la, woate ŋu atsɔ nuŋɔŋlɔwo akpe ɖe kaɖia ŋu. Woateŋu awɔ nuŋɔŋlɔ si le eme .card-texthã ƒe atsyã kple HTML dzesi siwo wozãna ɖaa.
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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>Ŋlɔ ƒuƒoƒoawo ɖi
Wɔ nyatakakawo ƒe xexlẽdzesiwo le kaɖi si me flush xexlẽdzesiwo ƒe ƒuƒoƒo le me.
- Cras justo odio ƒe nyawo
- Dapibus ac ƒe dɔwɔƒe le
- Vestibulum le eros dzi
<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 justo odio ƒe nyawo
- Dapibus ac ƒe dɔwɔƒe le
- Vestibulum le eros dzi
<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>Dzodoƒe ƒe tsinyegoe
Tsɔ nyatakaka ƒomevi vovovowo tsaka eye nàwɔ wo ɖekae be nàwɔ kaɖi si nèhiã, alo nàtsɔ nusianu aƒu gbe ɖe afima. Woɖe nɔnɔmetatawo ƒe atsyãwo, mɔxenuwo, nuŋɔŋlɔ ƒe atsyãwo, kple xexlẽdzesiwo ƒe ƒuƒoƒo aɖe fia le ete—wo katã woxatsa ɖe kaɖi si ƒe kekeme woɖo ɖi me.
Kpekpeɖeŋugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
- Cras justo odio ƒe nyawo
- Dapibus ac ƒe dɔwɔƒe le
- Vestibulum le eros dzi
<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>Ta kple afɔti
Tsɔ ta kple/alo afɔti si nàte ŋu atia la kpe ɖe kaɖi aɖe me.
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>Woate ŋu awɔ agbalẽvi ƒe tanyawo ƒe atsyã to nusiwo wotsɔ kpe .card-headerɖe <h*>wo ŋu me.
Woɖee fia
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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 bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.
<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>Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>Sizing ƒe lolome
Kpekpeɖeŋugbalẽviwo tsɔe be naneke koŋ widthyeadze egɔme o, eyata woakeke 100% negbe ɖe wogblɔe bubui hafi. Àteŋu atrɔ esia alesi wòhiãe kple CSS tɔxɛwo, grid klasswo, grid Sass mixins, alo dɔwɔnuwo.
Grid markup zazã
Zã grid la nàtsɔ abla agbalẽviawo ɖe sɔtiwo kple fliwo me ne ehiã.
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖeTanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>Nuzazãwo zazã
Zã míaƒe lolomedzidzenu ʋɛ siwo li la nàtsɔ aɖo kaɖi ƒe kekeme kaba.
Kpekpeɖeŋugbalẽvi ƒe tanya
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
AwunugbuiKpekpeɖeŋugbalẽvi ƒe tanya
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Awunugbui<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 si wowɔ ɖe ɖoɖo nu zazã
Zã CSS tɔxɛ le wò atsyãgbalẽwo me alo abe atsyã siwo le fli me ene nàtsɔ aɖo kekeme.
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>Nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu
Àte ŋu atrɔ nuŋɔŋlɔ ƒe ɖoɖo si le kaɖi ɖesiaɖe me kaba—le eƒe akpa bliboa alo eƒe akpa aɖewo koŋ me—kple míaƒe nuŋɔŋlɔ ƒe ɖoɖo ƒe klasswo .
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖeTanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖeTanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>Mɔfiamewo ƒe Mɔzɔzɔ
Tsɔ mɔfiame aɖewo kpe ɖe kaɖi ƒe ta (alo mɔxexe) ŋu kple Bootstrap ƒe nav ƒe akpawo .
Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>Tanya tɔxɛ ƒe atikewɔwɔ
Kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme nu si akplɔ ame ayi nya bubuwo me ene.
Yi afi aɖe<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>Nɔnɔmetatawo
Tiatia ʋɛ aɖewo le agbalẽviwo me hena dɔwɔwɔ kple nɔnɔmetatawo. Tiae tso “nɔnɔmetatawo” tsɔtsɔ kpe ɖe kaɖi aɖe ƒe nuwuwu eveawo, nɔnɔmetatawo tsɔtsɔ atsyɔ kaɖia me nyawo dzi, alo nɔnɔmetata la tsɔtsɔ de kaɖi aɖe me ko me.
Nɔnɔmetatawo ƒe nutrenuwo
Abe tanyawo kple afɔtiwo ene la, woate ŋu atsɔ “nɔnɔmetatawo ƒe nutrenu” siwo le etame kple ete—nɔnɔmetata siwo le agbalẽvi aɖe tame alo ete la ade eme.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>Nɔnɔmetata siwo wotsɔ ƒo xlãe
Trɔ nɔnɔmetata aɖe wòazu kaɖi ƒe megbenya eye nàtsɔ wò kaɖia ƒe nuŋɔŋlɔwo atsyɔ edzi. Le nɔnɔmetata la nu la, àte ŋu ahiã atsyã alo dɔwɔnu bubuwo alo màhiã o.
<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>De dzesii be mele be emenyawo nalolo wu nɔnɔmetata la ƒe kɔkɔme o. Ne emenyawo lolo wu nɔnɔmetata la la, woaɖe emenyawo afia le nɔnɔmetata la godo.
Si mlɔ anyi
Woate ŋu azã grid kple utility ƒe klass siwo wotsɔ ƒo ƒui atsɔ awɔ kaɖiwo wòanɔ tsia dzi le mɔ si sɔ na asitelefon eye wòawɔ dɔ nyuie nu. Le kpɔɖeŋu si le ete me la, míeɖea grid gutters la ɖa kple .no-gutterseye míezãa .col-md-*klasswo tsɔ naa card la nɔa tsia dzi le mdbreakpoint la gbɔ. Ðewohĩ ahiã be nàgawɔ asitɔtrɔ bubuwo le wò kaɖia me nyawo nu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>Kpekpeɖeŋugbalẽviwo ƒe atsyãwo
Tiatia vovovo siwo dzi woato atrɔ asi le woƒe megbenyawo, liƒowo, kple amadede ŋu la le agbalẽviawo me.
Megbenyawo kple amadede
Zã nuŋɔŋlɔ kple megbenyawo ƒe dɔwɔnuwo nàtsɔ atrɔ agbalẽvi aɖe ƒe dzedzeme.
Gbãtɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kpekpeɖeŋugbalẽvi evelia ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dzidzedzekpɔkpɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Afɔkugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Nuxlɔ̃amegbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Info card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kekeli gbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dark card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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>Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu
Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .sr-onlyklass la ene.
Liƒo
Zã liƒodzi dɔwɔnuwo nàtsɔ atrɔ border-colorkaɖi aɖe ƒe akpa aɖe ko. De dzesii be àte ŋu atsɔ .text-{color}klasswo ade dzila .cardalo kaɖia me nyawo ƒe akpa sue aɖe dzi abe alesi woɖee fia le ete ene.
Gbãtɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kpekpeɖeŋugbalẽvi evelia ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dzidzedzekpɔkpɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Afɔkugbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Nuxlɔ̃amegbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Info card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Kekeli gbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
Dark card ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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>Mixins ƒe dɔwɔnuwo
Àte ŋu atrɔ liƒo siwo le kaɖia ƒe ta kple afɔti dzi hã ne ehiã, eye nàɖe woƒe background-colorkple .bg-transparent.
Dzidzedzekpɔkpɔ ƒe agbalẽvi ƒe tanya
Kpɔɖeŋu nuŋɔŋlɔ aɖewo kabakaba be woatu ɖe agbalẽvia ƒe tanya dzi eye woawɔ agbalẽvia me nyawo ƒe akpa gãtɔ.
<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>Kpekpeɖeŋugbalẽvi ƒe ɖoɖowɔwɔ
Tsɔ kpe ɖe alesi woawɔ nusiwo le kaɖiwo me ƒe atsyã ŋu la, tiatia ʋɛ aɖewo le Bootstrap me hena kaɖi siwo kplɔ wo nɔewo ɖo ɖoɖo ɖe wo nɔewo yome. Le ɣeyiɣi sia me la, ɖoɖowɔɖi ƒe tiatia siawo mewɔ dɔ haɖe o .
Kpekpeɖeŋugbalẽviwo ƒe ƒuƒoƒowo
Zã kaɖiwo ƒe ƒuƒoƒowo nàtsɔ aɖe kaɖiwo gɔme abe nu ɖeka si wotsɔ kpe ɖe eŋu ene si ƒe kekeme kple kɔkɔme sɔtiwo sɔ. Kpekpeɖeŋugbalẽvi ƒe ƒuƒoƒowo zãna display: flex;tsɔ ɖoa woƒe lolome ɖeka ƒe lolome gbɔ.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo didi wu gbãtɔa gɔ̃ hã le agbalẽvi sia me tsɔ ɖe afɔɖeɖe ma si ƒe kɔkɔme sɔ la fia.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>Ne èle kaɖi ƒe ƒuƒoƒo siwo ŋu afɔtiwo le zãm la, wo me nyawo aɖo fli le wo ɖokui si.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo didi wu gbãtɔa gɔ̃ hã le agbalẽvi sia me tsɔ ɖe afɔɖeɖe ma si ƒe kɔkɔme sɔ la fia.
<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>Kpekpeɖeŋugbalẽviwo ƒe akpawo
Èhiã agbalẽvi siwo ƒe kekeme kple kɔkɔme sɔ kple wo nɔewo siwo wometsɔ bla ɖe wo nɔewo ŋu o ƒe hatsotso aɖea? Zã agbalẽvi siwo dzi woŋlɔa nu ɖo.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo didi wu gbãtɔa gɔ̃ hã le agbalẽvi sia me tsɔ ɖe afɔɖeɖe ma si ƒe kɔkɔme sɔ la fia.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>Abe alesi wòle le kaɖi ƒe ƒuƒoƒowo gome ene la, kaɖi ƒe afɔti siwo le deck me la aɖo fli le wo ɖokui si.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi si keke wu si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔme mɔfianu si ana woakpɔ nyatakaka bubuwo ene. Emenyawo didi wu gbãtɔa gɔ̃ hã le agbalẽvi sia me tsɔ ɖe afɔɖeɖe ma si ƒe kɔkɔme sɔ la fia.
<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>Grid-gbalẽviwo
Zã Bootstrap grid system kple eƒe .row-colsklasswo nàtsɔ akpɔ grid sɔti (si woxatsa ɖe wò kaɖiwo ŋu) agbɔsɔsɔme si nàɖe afia le fli ɖeka me dzi. Le kpɔɖeŋu me, afisiae nye .row-cols-1be nàɖo agbalẽviawo ɖe sɔti ɖeka dzi, eye .row-cols-md-2nàma agbalẽvi ene ɖe akpa vovovowo me wòakeke sɔsɔe le fli geɖe dzi, tso titina ƒe mamaa dzi yi dzi.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
<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>Trɔe ɖe .row-cols-3eye àkpɔ agbalẽvi enelia ƒe akpa si woxatsa ɖe eŋu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
<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>Ne èhiã kɔkɔme si sɔ la, tsɔe kpe .h-100ɖe agbalẽviawo ŋu. Ne èdi be kɔkɔme nasɔ le gɔmedzedzea me la, àteŋu aɖoe $card-height: 100%ɖe Sass me.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi kpui aɖe.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
<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>Kpekpeɖeŋugbalẽvi ƒe sɔtiwo
Woate ŋu aɖo agbalẽviwo ɖe ɖoɖo nu ɖe sɔti siwo le abe Masonry ene me kple CSS ko to wo babla ɖe .card-columns. Wotsɔa CSS columnƒe nɔnɔmewo tua kaɖiwo ɖe flexbox teƒe be woate ŋu aɖo wo ɖe ɖoɖo nu bɔbɔe. Wobiaa agbalẽviwo tso dzi va anyi kple miame yi ɖusime.
Tawo yi dzi! Kilometa siwo nàzɔ kple agbalẽvi ƒe sɔtiwo ate ŋu ato vovo. Be míaxe mɔ na kaɖiwo ƒe gbagbã le sɔtiwo dzi la, ele be míaɖo wo ɖe display: inline-blockabe alesi column-break-inside: avoidmenye tuɖedzi ƒe kuxia gbɔkpɔnu haɖe o ene.
Kpekpeɖeŋugbalẽvi ƒe tanya si woxatsa ɖe fli yeye dzi
Esia nye agbalẽvi didi aɖe si me nuŋɔŋlɔ siwo kpe ɖe eŋu le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo me ene. Emenyawo sia didi vie wu.
Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.
Kpekpeɖeŋugbalẽvi ƒe tanya
Nuŋɔŋlɔ siwo kpe ɖe eŋu le agbalẽvi sia dzi le ete abe dzɔdzɔmenu si akplɔ ame ayi nya bubuwo gbɔe ene.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat.
Kpekpeɖeŋugbalẽvi ƒe tanya
Tanya kple nuŋɔŋlɔ ƒe memama kpui aɖe le agbalẽvi sia te edziedzi.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.
Kpekpeɖeŋugbalẽvi ƒe tanya
Esia nye agbalẽvi bubu si ƒe tanya kple nuŋɔŋlɔ siwo kpe ɖe eŋu le ete. Nu bubu aɖewo le agbalẽvi sia ŋu be wòakɔ vie le wo katã me.
Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia
<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>Woate ŋu akeke agbalẽviawo ƒe sɔtiwo hã ɖe enu ahatrɔ asi le wo ŋu kple kɔda bubu aɖewo. Woɖe klass la ƒe kekeɖenu fia le ete si .card-columnszãa CSS ma ke si míezãna—CSS sɔtiwo— tsɔ wɔa ŋuɖoɖo ƒe ƒuƒoƒo aɖe hena sɔtiwo ƒe xexlẽme tɔtrɔ.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}