Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
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 .

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

Placeholder Image cap

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

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

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

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

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 dakun 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 kuncɛw” ye minnu bɛ sanfɛ ani duguma, n’o ye ja minnu bɛ karti sanfɛ walima duguma.

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

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

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

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

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

html 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

A farala a kan v5.2.0 kɔnɔ

Set a background-colorni contrasting foreground colorni an .text-bg-{color}dɛmɛbagaw ye . Fɔlɔ a tun wajibiyalen don ka i ka sugandili .text-{color}ni .bg-{color}nafalanw fara ɲɔgɔn kan ni bolo ye ka ɲɛsin cogoya ma, i bɛ se ka baara kɛ ni minnu ye hali bi n’i b’a fɛ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Placeholder Image cap
Karti tɔgɔ

Nin ye karti surun ye.

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

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

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

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

CSS ye

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ min bɛ ka wuli ka bɔ a nɔ na, ​​o hukumu kɔnɔ, sisan kartiw bɛ baara kɛ ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .cardwalasa ka waati yɛrɛyɛrɛ ladamucogo ɲɛ. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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 bεε bε bεn

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