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 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ɔ.
<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.
- 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>- 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
<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">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ɔ.
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>Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.
<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>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">
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ɔ laTitle 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.
<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ɔ laTitle 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ɔ laTitle 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>Navigasiyɔn (navigation).
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="#" 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-top" 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.
<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 .no-guttersani 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 no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" 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ɛnniw ni kɔkanna baarakɛminɛnw ye walasa ka karti cogoya Changer.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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ɔ.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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ɛ.
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.
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ɛ.
<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 bɛnkan 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.
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.
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 bɛnkan wale jira.
<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>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ɔ
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 bɛnkan wale jira.
A laban kɛra 3 mins ye
<div class="card-deck">
<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>
<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>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.
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.
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 bɛnkan wale jira.
<div class="card-deck">
<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, ka bɔ 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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>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.
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.
Karti tɔgɔ
Nin karti in tɔgɔ sɛbɛnnen bɛ tuma bɛɛ ani sɛbɛnni dakun surunw bɛ a jukɔrɔ.
A laban kɛra 3 mins ye
Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.
Karti tɔgɔ
Nin ye karti wɛrɛ ye min tɔgɔ ye ko ani sɛbɛnni min bɛ a dɛmɛ a jukɔrɔ. Nin karti in kɔnɔko dɔw bɛ yen minnu bɛ fara a kan walasa a ka janya dɔɔnin a bɛɛ lajɛlen na.
A laban kɛra 3 mins ye
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<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 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 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 text-white">
<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 a regular title and short paragraphy of text below it.</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>
<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 another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</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;
}
}