Source

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.

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

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

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.

Cras justo ye odio ye
Dapibus ac ka baarakɛyɔrɔw la
Vestibulum bɛ sɔrɔ eros la

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

A jirala

Cras justo ye odio ye
Dapibus ac ka baarakɛyɔrɔw la
Vestibulum bɛ sɔrɔ eros la

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

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

Cras justo ye odio ye
Dapibus ac ka baarakɛyɔrɔw la
Vestibulum bɛ sɔrɔ eros la

Karti jɛgɛn Lien wɛrɛ

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

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ɛ

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

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

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

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

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

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

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ɛnniw ni kɔkanna baarakɛminɛ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-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>

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 .sr-onlykalan 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 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 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ɛ baara kɛ ni display: flex;u ye walasa k’u ka hakɛ kelen sɔrɔ.

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

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

Karti decks (karti decks).

Aw mago bɛ kartiw lajɛlen na minnu bonya ni u janya bɛ bɛn ɲɔgɔn ma wa? Baara kɛ ni kartiw 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.

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

I n’a fɔ a bɛ kɛ cogo min na ni karti kuluw ye cogo min na, karti senw bɛ deki kɔnɔ, olu bɛna u yɛrɛ labɛn.

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

Karti kolomayɔrɔw

Kartiw bɛ se ka labɛn ka kɛ kuluw ye minnu bɛ i n' a fɔ Masonry ni CSS dɔrɔn ye n' u sirilen don .card-columns. Kartiw bɛ jɔ ni CSS columnnafaw ye flexbox nɔ na walasa ka ɲɔgɔn sɔrɔ nɔgɔya la. Kartiw bɛ komandi ka bɔ sanfɛ ka taa duguma ani ka bɔ numan fɛ ka taa kinin fɛ.

Kungolow bɛ wuli! I ka kilomɛtɛrɛ hakɛ ni karti kuluw bɛ se ka ɲɔgɔn ta. Walasa ka kartiw bali ka kari kuluw cɛma, an ka kan k’u sigi display: inline-blocki n’a fɔ column-break-inside: avoida tɛ marifa-falen-falen fura ye fɔlɔ.

Karti tɔgɔ min bɛ siri tigɛli kura la

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.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

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

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

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat.

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

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

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

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

Karti tɔgɔ

A laban kɛra 3 mins ye

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

Karti kuluw fana bɛ se ka bonya ani ka u kɛ ka kɛɲɛ ni u yɛrɛ sago ye ni kode dɔw faralen ye ɲɔgɔn kan. A jiralen bɛ jukɔrɔ, o ye kalansen janya ye min bɛ .card-columnsbaara kɛ ni CSS kelen ye an bɛ baara kɛ ni min ye—CSS kuluw— walasa ka jaabi-dakunw kulu dɔ lawuli walasa ka kuluw hakɛ Changer.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 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ɔ

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ɔ

Karti decks (karti decks).

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti tɔgɔ

Karti kolomayɔrɔw

Karti tɔgɔ min bɛ siri tigɛli kura la

Karti tɔgɔ