Source

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, megbe 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 .

100%x180 ƒe xexlẽ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ɔ.

Yi afi aɖe 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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.

Esia nye nuŋɔŋlɔ aɖewo le agbalẽvi aɖe ƒe akpa 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.

Nɔnɔmetata ƒe nutrenu [100%x180].

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

Ŋ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>
Woɖee fia
  • 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.

Nɔnɔmetata ƒe nutrenu [100%x180].
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
Card link Kadodo bubu 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Tsɔ ta kple/alo afɔti si nàte ŋu atia la kpe ɖe kaɖi aɖe 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">
  <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>
To nya

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.

Ame aɖe si xɔ ŋkɔ le Source Title me 
<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>
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
Ŋkeke 2 enye sia 
<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>

Agbɔsɔsɔme ƒ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ɖe
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="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.

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

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

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

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="#">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="#">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.

100%x180 ƒe xexlẽme
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

100%x180 ƒe xexlẽme 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

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.

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

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.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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 ɖe .sr-onlyklass la ŋu 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.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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ɔ.

Tanya ƒe tanya
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.

Tanya ƒe tanya
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ɔdzideƒe 
<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ɔ.

100%x180 ƒe xexlẽme
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

100%x180 ƒe xexlẽme
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

100%x180 ƒe xexlẽme
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. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã 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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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.

100%x180 ƒe xexlẽme
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
100%x180 ƒe xexlẽme
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
100%x180 ƒe xexlẽme
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. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã 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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

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.

100%x200 ƒe xexlẽ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.

Wotrɔ asi le eŋu zi mamlɛtɔ 3 mins enye sia

100%x200 ƒe xexlẽme
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

100%x200 ƒe xexlẽme
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. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã 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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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.

100%x180 ƒe xexlẽme
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
100%x180 ƒe xexlẽme
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
100%x180 ƒe xexlẽme
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. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã 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 class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

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.

100%x160 ƒe xexlẽme
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.

Ame aɖe si xɔ ŋkɔ le Source Title me
100%x160 ƒe xexlẽme
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.

Ame aɖe si xɔ ŋkɔ le Source Title me
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

100%x260 ƒe xexlẽme

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.

Ame aɖe si xɔ ŋkɔ le Source Title me
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. Nusiwo le agbalẽvi sia me didi wu gbãtɔa gɔ̃ hã 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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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