in English

Kartiw

Bootstrap ka kartiw bɛ kɔnɔkow minɛn dɔ di min bɛ se ka wuli ka bɔ a nɔ na ani min bɛ se ka bonya ni fɛn caman ye ani sugandiliw.

Nin ɲɛ in kan

Kan

Karti ye kɔnɔkow minɛn ye min bɛ se ka wuli ka bɔ a nɔ na ani min bɛ se ka bonya . Sugandiliw bɛ sɔrɔ a kɔnɔ minnu bɛ se ka kɛ kungolodilanw ni jukɔrɔlafɛnw ye, kɔnɔkow suguya caman, kɔkanna kulɛriw, ani jiracogo suganditaw barikamaw. N’i bɛ Bootstrap 3 dɔn, kartiw bɛ an ka panneau kɔrɔw, kɔlɔnw ani ja fitininw bila u nɔ na. Baarakɛcogo kelen min bɛ o yɔrɔw la, o bɛ sɔrɔ i n’a fɔ fɛn caman sɛmɛntiyalanw kartiw kama.

Misaliya

Kartiw bɛ jɔ ni taamasiyɛn ni cogoya fitininw ye i n’a fɔ a bɛ se ka kɛ cogo min na, nka o bɛɛ n’a ta, u bɛ se ka ton dɔ lase kunkanko ni ladamuni ma. U jɔlen ni flexbox ye, u bɛ ɲɔgɔndan nɔgɔman di ani ka ɲagami koɲuman ni Bootstrap yɔrɔ wɛrɛw ye. U tɛ marginni default ye, o la, baara kɛ ni spacing utilities ye i n’a fɔ a mago bɛ cogo min na.

Karti jɔnjɔn misali dɔ bɛ duguma min kɔnɔkow ɲagaminen don ani a bonya sigilen don. Kartiw tɛ ni bonya latigɛlen ye ka daminɛ, o la u bɛna a bangebaga yɔrɔ bonya dafalen fa cogoya la. o bɛ se ka ladilan nɔgɔya la ni an ka bonya sugandicogo suguya caman ye .

Karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Taga yɔrɔ dɔ la

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

Kɔnɔkow suguyaw

Kartiw bɛ kunnafoni suguya caman dɛmɛ, i n’a fɔ jaw, sɛbɛnniw, lisi kuluw, ladɛrɛsiw ani fɛn wɛrɛw. Fɛn minnu bɛ dɛmɛ sɔrɔ, olu misaliw bɛ duguma.

Farikolo

Karti dɔ jɔcogo ye .card-body. Aw bɛ baara kɛ n’a ye tuma o tuma n’aw mago bɛ yɔrɔ la min falen don karti kɔnɔ.

Nin ye sɛbɛn dɔw ye karti farikolo kɔnɔ.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Title, text ani links

Karti tɔgɔw bɛ baara kɛ ni u farali .card-titleye <h*>taamasiyɛn dɔ kan. O cogo kelen na, jὲɲɔgɔnyaw bɛ Fàra ɲɔgɔn kan k’u Blà ɲɔgɔn kɛrɛfɛ ni farali .card-linkye ‘ <a>taamaʃyɛn dɔ kan.

Subtitles bɛ Kɛ ni a farali ye tag .card-subtitledɔ kan. <h*>Ni .card-titleani .card-subtitlefɛnw bilalen bɛ .card-bodyfɛn dɔ kɔnɔ, karti tɔgɔ ni a tɔgɔ fitinin bɛ bɛn ɲɔgɔn ma ka ɲɛ.

Karti tɔgɔ

Karti ka subtitle

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Karti jɛgɛn Lien wɛrɛ

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

Jaw

.card-img-topbɛ ja dɔ bila karti sanfɛ. Ni .card-text, sɛbɛnni bɛ se ka fara karti kan. Sɛbɛn minnu bɛ kɔnɔna na, .card-textolu fana bɛ Se ka Kɛ cogoya la ni HTML taamasiyɛnw ye minnu bɛ Kɛ cogoya la.

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

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

Jɛkuluw tɔgɔw sɛbɛn

Aw bɛ kɔnɔkow lisɛli kɛ karti kɔnɔ ni lisi kulu ye min bɛ wele ko flush list.

Fɛn dɔ
Fɛn filanan
Fɛn sabanan

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

A jirala

Fɛn dɔ
Fɛn filanan
Fɛn sabanan

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

Fɛn dɔ
Fɛn filanan
Fɛn sabanan

Karti jukɔrɔla sɛbɛn

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

Kuisini ka baarakɛminɛnw

Aw bɛ kunnafoni suguya caman ɲagami ani ka u bɛn ɲɔgɔn ma walasa ka karti dilan aw mago bɛ min na, walima ka fɛn bɛɛ fili yen. Jaw cogoyaw, blokiw, sɛbɛnniw cogoyaw ani lisi kulu dɔ jiralen bɛ jukɔrɔ—o bɛɛ sirilen bɛ karti dɔ kɔnɔ min bonya bɛ sigi sen kan.

Karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Fɛn dɔ
Fɛn filanan
Fɛn sabanan

Karti jɛgɛn Lien wɛrɛ

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

Kungolo ni jukɔrɔla

Aw bɛ kuncɛ ni/walima jukɔrɔla yɔrɔ dɔ fara a kan min bɛ se ka kɛ karti kɔnɔ.

A jirala

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

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

Karti kunkankow bɛ se ka kɛ cogoya la ni fɛn dɔw farali .card-headerye u <h*>kan.

A jirala

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

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

Ka sɔngɔ jateminɛ

Kumasen dɔnnen dɔ, min bɛ sɔrɔ blockquote element dɔ kɔnɔ.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

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

A jirala

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

A bɛ tile 2 bɔ

<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 (Sizing) kɛ

Kartiw bɛ miiri ko kɛrɛnkɛrɛnnen si tɛ widthka daminɛ, o la u bɛna bonya 100% fo ni a fɔra cogo wɛrɛ la. Aw bɛ se k’o Changer i n’a fɔ a mago bɛ cogo min na ni CSS ladamulen ye, grid classes, grid Sass mixins, walima utilités.

Baara kɛ ni grid markup ye

Aw bɛ baara kɛ ni jatebɔlan ye, aw bɛ kartiw siri kuluw ni ɲɔgɔn cɛ i n’a fɔ aw mago bɛ cogo min na.

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

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

Baara kɛ ni nafamafɛnw ye

Baara kɛ ni an ka bolomafaraw ye minnu bɛ sɔrɔ hakɛ jateminɛni na walasa ka karti dɔ bonya sigi teliya la.

Karti tɔgɔ

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Butɔn

Karti tɔgɔ

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Butɔn

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

Baara kɛ ni CSS ladamulen ye

Baara kɛ ni CSS ladamulen ye i ka cogoya sɛbɛnw kɔnɔ walima i n’a fɔ inline cogoyaw walasa ka bonya dɔ sigi sen kan.

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

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

Sɛbɛnniw labɛncogo

I bɛ se ka karti o karti sɛbɛnni kɛcogo Changer joona—a bɛɛ lajɛlen walima a yɔrɔ kɛrɛnkɛrɛnnenw na—ni an ka sɛbɛnni kɛcogo kalanw ye .

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

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

Aw bɛ navigatiɔn dɔw fara karti dɔ kuncɛ (walima bloki) kan ni Bootstrap ka nav yɔrɔw ye .

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

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

Title kɛrɛnkɛrɛnnen furakɛli

Ni sɛbɛnniw ye minnu bɛ duguma i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Taga yɔrɔ dɔ la

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

Jaw

Sugandili damadɔw bɛ kartiw kɔnɔ walasa ka baara kɛ ni jaw ye. Sugandili kɛ ka bɔ “ja sɛbɛnw” farali la karti laban fila la, ka jaw datugu ni karti kɔnɔkow ye, walima ka ja don dɔrɔn karti kɔnɔ.

Jaa kafew

I n’a fɔ kunkankow ni jukɔrɔlakow, kartiw bɛ se ka kɛ ni “jaw kunberew” ye minnu bɛ sanfɛ ani duguma, n’o ye ja minnu bɛ karti sanfɛ walima duguma.

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

A laban kɛra 3 mins ye

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

A laban kɛra 3 mins ye

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

Jaw bɛ da ɲɔgɔn kan

Ja dɔ tigɛli kɛ karti kɔkanna ye ani ka i ka karti sɛbɛnniw datugu. Ka kɛɲɛ ni ja ye, i bɛ se ka kɛ walima i mago tɛ se ka kɛ cogoya wɛrɛw la walima nafalan wɛrɛw la.

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

A laban kɛra 3 mins ye

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

A kɔlɔsi ko kɔnɔkow man kan ka bonya ka tɛmɛ ja janya kan. Ni kɔnɔkow ka bon ni ja ye kɔnɔkow bɛna jira ja kɔkan.

Dalen

Ni baara kɛra ni grid ni utilité kalanw faralen ye ɲɔgɔn kan, kartiw bɛ se ka kɛ tilennen ye cogo la min bɛ se ka kɛ mobili ye ani min bɛ se ka jaabi di. Misali min bɛ duguma, an bɛ grid gutters bɔ ni .g-0ani ka baara kɛ ni .col-md-*classes ye walasa ka karti kɛ horizontal ye mdbreakpoint la. Yɛlɛma wɛrɛw bɛ se ka kɛ ka kɛɲɛ ni i ka karti kɔnɔkow ye.

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

A laban kɛra 3 mins ye

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

Karti cogoyaw

Sugandili suguya caman bɛ kartiw kɔnɔ walasa k’u kɔkankow, u dancɛw ani u kulɛriw ladilan.

Background ani kulɛri

Baara kɛ ni sɛbɛnni kulɛri ni kɔkanna nafamafɛnw ye walasa ka karti cogoya Changer.

Kungolodilan

Karti fɔlɔ tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Karti filanan tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Succès karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Farati karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Lakɔlɔsili karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Info karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Karti yeelenma tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Dibi karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

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

Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.

Dancɛ

Baara kɛ ni dankan nafamafɛnwborder-color ye walasa ka karti dɔ dɔrɔn de Changer . A kɔlɔsi ko i bɛ se ka .text-{color}kalanw bila bangebaga kan .cardwalima karti kɔnɔkow kulu fitinin dɔ kan i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ.

Kungolodilan

Karti fɔlɔ tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Karti filanan tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Succès karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Farati karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Lakɔlɔsili karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Info karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Karti yeelenma tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Kungolodilan

Dibi karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

<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 ka baarakɛminɛnw

Aw bɛ se fana ka danyɔrɔw Changer karti kuncɛ ni a jukɔrɔla la i n’a fɔ aw mago bɛ cogo min na, ani hali k’u bɔ background-colorni .bg-transparent.

Kungolodilan

Succès karti tɔgɔ

Misali teliya dɔw sɛbɛn walasa ka jɔ karti tɔgɔ kan ani ka karti kɔnɔkow fanba kɛ.

Senna-tɛgɛrɛ

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

Karti labɛncogo

Ka fara kɔnɔkow cogoya kan kartiw kɔnɔ, Bootstrap bɛ sugandi damadɔ Kɛ kartiw sigiyɔrɔma-sigicogo labɛnni na. Nin waati in na, o layidu talenw ma jaabi fɔlɔ .

Karti kuluw

Baara kɛ ni karti kuluw ye walasa ka kartiw jira i n’a fɔ fɛn kelen, min nɔrɔlen don ni kuluw ye minnu bonya ni u janya bɛ bɛn ɲɔgɔn ma. Karti kuluw bɛ daminɛ ni ɲɔgɔn ye ani ka baara kɛ ni display: flex;u ye walasa u ka nɔrɔ ɲɔgɔn na ni hakɛ kelen ye min bɛ daminɛ smkariyɔrɔ la.

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

A laban kɛra 3 mins ye

Karti tɔgɔ

Nin karti in kɔnɔ, sɛbɛnniw bɛ yen minnu bɛ dɛmɛ don a kɔnɔ i n’a fɔ fɛn wɛrɛw ɲɛminɛcogo dabɔlen.

A laban kɛra 3 mins ye

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin karti in kɔnɔkow yɛrɛ ka jan ka tɛmɛ fɔlɔ kan walasa k’o janya kelen wale jira.

A laban kɛra 3 mins ye

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

Ni baara bɛ kɛ ni karti kuluw ye minnu bɛ ni jukɔrɔla sɛbɛnw ye, u kɔnɔkow bɛna labɛn u yɛrɛma.

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

A laban kɛra 3 mins ye

Karti tɔgɔ

Nin karti in kɔnɔ, sɛbɛnniw bɛ yen minnu bɛ dɛmɛ don a kɔnɔ i n’a fɔ fɛn wɛrɛw ɲɛminɛcogo dabɔlen.

A laban kɛra 3 mins ye

Karti tɔgɔ

A laban kɛra 3 mins ye

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

Baara kɛ ni Bootstrap grid system ani a .row-colskalasiw ye walasa ka grid kulu hakɛ (min sirilen bɛ i ka kartiw la) i bɛ min jira jirisun kelen kɔnɔ, o kɔlɔsi. Misali la, nin ye .row-cols-1kartiw bilali ye kulu kelen kan, ka .row-cols-md-2karti naani tila ka kɛ u bonya kelen ye jirisun caman kan, k’a ta cɛmancɛ kariyɔrɔ la ka taa san fɛ.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

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

Aw bɛ a Changé ka kɛ .row-cols-3ani aw bɛna karti naaninan ye.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

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

Ni aw mago bɛ janya kelen na, aw bɛ dɔ fara .h-100kartiw kan. N’i b’a fɛ ka janya kelenw sɔrɔ default la, i bɛ se ka sigi $card-height: 100%Sass kɔnɔ.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

Karti tɔgɔ

Nin ye karti surun ye.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ.

Karti tɔgɔ

Nin ye karti jan ye min bɛ ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

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

I n’a fɔ a bɛ kɛ cogo min na ni karti kuluw ye, karti jukɔrɔla sɛbɛnw bɛna labɛn u yɛrɛma.

Karti tɔgɔ

Nin ye karti ye min ka bon ni sɛbɛnniw ye minnu bɛ a dɛmɛ jukɔrɔ i n’a fɔ a bɛ kɛ sababu ye ka kunnafoni wɛrɛw sɔrɔ. Nin kɔnɔkow in bɛ janya dɔɔnin dɔɔnin.

A laban kɛra 3 mins ye

Karti tɔgɔ

Nin karti in kɔnɔ, sɛbɛnniw bɛ yen minnu bɛ dɛmɛ don a kɔnɔ i n’a fɔ fɛn wɛrɛw ɲɛminɛcogo dabɔlen.

A laban kɛra 3 mins ye

Karti tɔgɔ

A laban kɛra 3 mins ye

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

Masonw dilanni

In an ye baara kɛ ni CSS dɔrɔn fɛɛrɛ ye walasa ka Masonryv4 -like columns kɛcogo ladege , nka o fɛɛrɛ in nana ni kɔlɔlɔ caman ye minnu man di . N'i b'a fɛ ka nin layidu sugu in Sɔrɔ , i bɛ Se ka baara Kɛ dɔrɔn ni Masonry plugin ye. Masonry tɛ Bootstrap kɔnɔ , nka an ye demo misali dɔ kɛ walasa k’aw dɛmɛ ka daminɛ.v5

Sass ye

Yɛlɛma-yɛlɛmaw

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;

Kartiw

Kan

Misaliya

Karti tɔgɔ

Kɔnɔkow suguyaw

Farikolo

Title, text ani links

Karti tɔgɔ

Karti ka subtitle

Jaw

Jɛkuluw tɔgɔw sɛbɛn

Kuisini ka baarakɛminɛnw

Karti tɔgɔ

Kungolo ni jukɔrɔla

Title kɛrɛnkɛrɛnnen furakɛli

A jirala

Title kɛrɛnkɛrɛnnen furakɛli

Title kɛrɛnkɛrɛnnen furakɛli

Sizing (Sizing) kɛ

Baara kɛ ni grid markup ye

Title kɛrɛnkɛrɛnnen furakɛli

Title kɛrɛnkɛrɛnnen furakɛli

Baara kɛ ni nafamafɛnw ye

Karti tɔgɔ

Karti tɔgɔ

Baara kɛ ni CSS ladamulen ye

Title kɛrɛnkɛrɛnnen furakɛli

Sɛbɛnniw labɛncogo

Title kɛrɛnkɛrɛnnen furakɛli

Title kɛrɛnkɛrɛnnen furakɛli

Title kɛrɛnkɛrɛnnen furakɛli

Navigasiyɔn (navigation).

Title kɛrɛnkɛrɛnnen furakɛli

Title kɛrɛnkɛrɛnnen furakɛli

Jaw

Jaa kafew

Karti tɔgɔ

Karti tɔgɔ

Jaw bɛ da ɲɔgɔn kan

Karti tɔgɔ

Dalen

Karti tɔgɔ

Karti cogoyaw

Background ani kulɛri

Karti fɔlɔ tɔgɔ

Karti filanan tɔgɔ

Succès karti tɔgɔ

Farati karti tɔgɔ

Lakɔlɔsili karti tɔgɔ

Info karti tɔgɔ

Karti yeelenma tɔgɔ

Dibi karti tɔgɔ

Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Dancɛ

Karti fɔlɔ tɔgɔ

Karti filanan tɔgɔ

Succès karti tɔgɔ

Farati karti tɔgɔ

Lakɔlɔsili karti tɔgɔ

Info karti tɔgɔ

Karti yeelenma tɔgɔ

Dibi karti tɔgɔ

Mixins ka baarakɛminɛnw

Succès karti tɔgɔ

Karti labɛncogo

Karti kuluw

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Grid kartiw

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ