Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

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.

Le axa sia dzi

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 .

Placeholder Image cap
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
html 
<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.

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

Placeholder Image cap

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

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

  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
Woɖee fia
  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
html 
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
Kpekpeɖeŋugbalẽvi ƒe afɔti
html 
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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.

Placeholder Image cap
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ɔ.

  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
Card link Kadodo bubu
html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.

Ame aɖe si xɔ ŋkɔ le Source Title me
html 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
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
html 
<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ɖ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
html 
<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
html 
<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
html 
<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
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

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

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.

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

Placeholder Image cap
html 
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

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.

Placeholder Card image
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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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 .g-0eye 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.

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

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

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

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Ðo a background-colorkple ŋgɔdonya si to vovo colorna míaƒe .text-bg-{color}kpeɖeŋutɔwo . Tsã la, wobia tso asiwò be nàtsɔ asi aƒo wò tiatia .text-{color}kple .bg-{color}dɔwɔnu siwo nàtsɔ awɔ atsyãe, siwo nàte ŋu azã kokoko ne èdi.

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

html 
<div class="card text-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-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-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-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-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-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-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-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 .visually-hiddenklass 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.

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

html 
<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

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
html 
<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ẽviwo ƒe ƒuƒoƒowo dzea egɔme tso ƒuƒoƒo me eye wozãa wo display: flex;be woava kpe ɖe wo nɔewo ŋu kple didime ɖeka siwo dzea egɔme tso smgbagbãƒea.

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

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

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

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

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

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.

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

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

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

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

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

Trɔe ɖe .row-cols-3eye àkpɔ agbalẽvi enelia ƒe akpa si woxatsa ɖe eŋu.

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

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

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

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

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

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.

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

Placeholder Image cap
Kpekpeɖeŋugbalẽvi ƒe tanya

Esia nye agbalẽvi kpui aɖe.

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

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

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

Abe alesi wòle le agbalẽvi ƒe ƒuƒoƒowo gome ene la, agbalẽvi ƒe afɔtiwo aɖo fli le wo ɖokui si.

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

Kpememewo ƒe wɔwɔme

Le v4míezã CSS-ko ƒe mɔnu aɖe tsɔ srɔ̃ sɔti siwo le abe Masonry ene ƒe nuwɔna , gake mɔnu sia va kple nugbegblẽ le ame ŋu geɖe siwo medzea ame ŋu o . Ne èdi be ɖoɖo sia ƒomevi nanɔ ye si le v5, àte ŋu awɔ Masonry ƒe kpeɖeŋutɔ ŋudɔ ko. Masonry mele Bootstrap me o , gake míewɔ demo kpɔɖeŋu aɖe be wòakpe ɖe ŋuwò nàdze egɔme.

CSS ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, kaɖiwo zãa teƒea ƒe CSS tɔtrɔwo le fifia .cardhena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si nyo wu. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass ƒe tɔtrɔwo

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