Kaad ahorow

Bootstrap no kaad ahorow no ma nsɛm a ɛwɔ mu a ɛyɛ mmerɛw na ɛtrɛw a ɛwɔ nsakrae ahorow ne akwan horow pii.

Fa ho

Kaad yɛ nneɛma a wɔde gu mu a ɛyɛ mmerɛw na wotumi trɛw mu. Ɛwɔ nneɛma a wobɛpaw ama atiri ne ase hɔ nsɛm, nsɛm ahorow pii, akyi kɔla ahorow a ɛwɔ nsɛm a ɛfa ho, ne nneɛma a wubetumi apaw a ɛwɔ tumi a wɔde bɛkyerɛ. Sɛ wunim Bootstrap 3 yiye a, kaad besi yɛn panel dedaw, abura, ne mfonini nketewa ananmu. Dwumadi a ɛte sɛ saa afã horow no wɔ hɔ sɛ modifier classes ma cards.

Nhwɛsoɔ

Wɔde markup ne styles kakraa bi na ɛyɛ cards sɛnea ɛbɛyɛ yiye, nanso ɛda so ara tumi de control ne customization tɔn bi ma. Wɔde flexbox na esii, wɔma alignment a ɛnyɛ den na wɔde afra yiye ne Bootstrap afã afoforo. Wɔn nni marginbi default so, enti fa spacing utilities di dwuma sɛnea ɛho hia.

Ase hɔ no yɛ nhwɛso a ɛfa mfitiase kaad a emu nsɛm afrafra ne ne tɛtrɛtɛ a wɔahyɛ da ayɛ ho. Kaad nni ntrɛwmu a wɔahyɛ ato hɔ a wɔde befi ase, enti wɔde awosu bɛhyɛ n’awofo element no ntrɛwmu nyinaa ma. Eyi yɛ mmerɛw sɛ wobɛsakra no denam yɛn kɛseyɛ ahorow ahorow a yɛpaw so .

Kaad no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Kɔ baabi

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

Nsɛm a ɛwɔ mu no ahorow

Kaad boa nneɛma ahorow pii, a mfonini, nsɛm, list groups, links, ne nea ɛkeka ho ka ho. Nea wɔboa ho nhwɛso ahorow wɔ ase ha.

Nipadua

Ade a wɔde si kaad bi ne .card-body. Fa di dwuma bere biara a wuhia ɔfã bi a wɔde padded ahyɛ mu wɔ kaad bi mu.

Eyi yɛ nsɛm bi a ɛwɔ kaad bi nipadua mu.

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

Asɛmti, nsɛm, ne nkitahodi ahorow

Wɔde kaad asɛmti ahorow di dwuma denam nea wɔde ka tag .card-titlebi ho so. <h*>Saa ara nso na wɔde link ahorow ka ho na wɔde si wɔn ho wɔn ho nkyɛn denam tag .card-linkbi a wɔde ka ho no so.<a>

Wɔde subtitles di dwuma denam a a wɔde ka tag .card-subtitlebi ho no so. <h*>Sɛ wɔde nneɛma no .card-titlene .card-subtitlenneɛma no gu .card-bodyade bi mu a, kaad no asɛmti ne asɛmti ketewa no hyia fɛfɛɛfɛ.

Kaad no asɛmti

Kaad no asɛmti ketewaa bi

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Card link Link foforo nso

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

Mfonini ahorow

.card-img-topde mfonini bi si kaad no atifi. Sɛ wode .card-text, di dwuma a, wobetumi de nsɛm aka kaad no ho. Nsɛm a ɛwɔ mu .card-textno nso wobetumi de HTML tag ahorow a ɛwɔ hɔ no ayɛ no sɛnea ɛte.

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

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

Kyerɛw akuw ahorow din

Yɛ nsɛm a wɔahyehyɛ wɔ kaad bi mu a flush list kuw wom.

Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Vestibulum a ɛwɔ eros no

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

Wɔde ahyɛ mu

Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Vestibulum a ɛwɔ eros no

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

Adididan mu sink

Fa nneɛma ahorow pii frafra na fa yɛ kaad a wuhia no, anaa tow biribiara gu hɔ. Wɔakyerɛ mfonini ahorow, block ahorow, nsɛm ahorow, ne list kuw bi wɔ ase hɔ—wɔde ne nyinaa abɔ kaad a ne tɛtrɛtɛ pɔtee bi mu.

Kaad no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Cras justo odio na ɔyɛ
Dapibus ac adwumayɛbea a ɛwɔ
Vestibulum a ɛwɔ eros no

Card link Link foforo nso

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

Ti ne ase hɔ asɛm

Fa atiri ne/anaasɛ ase a wopɛ ka ho wɔ kaad bi mu.

Wɔde ahyɛ mu

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

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

Wobetumi ayɛ card headers no style denam element ahorow a wɔde bɛka ho .card-headerno so .<h*>

Wɔde ahyɛ mu

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

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

Asɛnka

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

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

Wɔde ahyɛ mu

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

2 nna a atwam ni

<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 a wɔde yɛ nneɛma

Cards fa no sɛ biribiara pɔtee biara nni hɔ widtha wobefi ase, enti wɔbɛyɛ 100% wide gye sɛ wɔakyerɛ sɛ ɛnte saa. Wubetumi asesa eyi sɛnea ɛho hia denam CSS a wɔahyɛ da ayɛ, grid adesua ahorow, grid Sass mixins, anaa utilities so.

Grid markup a wode bedi dwuma

Fa grid no di dwuma, kyekyere nkrataa no wɔ nkyerɛwde ne nkyerɛwde ahorow mu sɛnea ɛho hia.

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

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

Nneɛma a wɔde di dwuma a wɔde di dwuma

Fa yɛn nsa kakraa bi a ɛwɔ sizing utilities no di dwuma fa hyehyɛ kaad bi trɛw ntɛmntɛm.

Kaad no asɛmti

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Bɔtom

Kaad no asɛmti

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Bɔtom

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

CSS a wɔahyɛ da ayɛ a wode bedi dwuma

Fa CSS a wɔahyɛ da ayɛ di dwuma wɔ wo stylesheets mu anaa sɛ inline styles de hyehyɛ ntrɛwmu.

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

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

Nsɛm a wɔakyerɛw no pɛpɛɛpɛ

Wubetumi asesa nsɛm a ɛwɔ kaad biara mu no ntɛmntɛm—wɔ ne nyinaa anaa ne fã pɔtee bi mu—de yɛn nsɛm a wɔahyehyɛ no pɛpɛɛpɛ adesua ahorow no .

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

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

Fa akwantuo bi ka kaad no ti (anaasɛ block) ho a Bootstrap no nav components .

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

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

Asɛmti titiriw a wɔde di dwuma

Ne nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛde kɔ nsɛm foforo mu.

Kɔ baabi

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

Mfonini ahorow

Kaad ahorow no wɔ nneɛma kakraa bi a wubetumi apaw a wode bɛyɛ mfonini ahorow ho adwuma. Paw fi “mfonini a wɔde akata so” a wode bɛka kaad bi awiei, mfonini ahorow a wode kaad no mu nsɛm bɛkata so, anaasɛ wode mfonini no ahyɛ kaad mu ara kwa mu.

Mfonini a wɔde akata so

Te sɛ atiri ne ase no, kaad betumi de “mfonini a wɔde akata so” a ɛwɔ soro ne ase no ahyɛ mu—mfonini ahorow a ɛwɔ kaad bi atifi anaa ase.

Kaad no asɛmti

Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

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

Mfonini ahorow a wɔde kata so

Dane mfonini bi ma ɛnyɛ kaad akyi na fa wo kaad no mu nsɛm kata so. Ɛgyina mfonini no so no, ebia wubehia ntadehyɛ anaa nneɛma foforo a wɔde di dwuma anaasɛ wunhia.

Kaad no asɛmti

Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

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

Kaad ahorow a wɔde yɛ nneɛma

Kaad ahorow no wɔ nneɛma ahorow a wubetumi apaw a wode bɛsesa wɔn akyi mfonini, wɔn ahye, ne wɔn kɔla.

Akyi ne kɔla

Fa nsɛm ne akyi nneɛma sesa sɛnea kaad bi te.

Titiriw

Mfitiase kaad asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Kaad a ɛto so abien no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Odi nkonim krataa asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Asiane krataa no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Kɔkɔbɔ krataa no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Info kaad no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Hann kaad asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Dark card asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

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

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .sr-onlyadesuakuw no mu.

Hyeɛ so

Fa border utilities sesa kɛkɛ border-colorof a card. Hyɛ no nsow sɛ wubetumi de .text-{color}adesua ahorow ahyɛ ɔwofo no so .cardanaasɛ kaad no mu nsɛm no fã ketewaa bi sɛnea wɔakyerɛ wɔ ase ha no.

Titiriw

Mfitiase kaad asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Kaad a ɛto so abien no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Odi nkonim krataa asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Asiane krataa no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Kɔkɔbɔ krataa no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Info kaad no asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Hann kaad asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Titiriw

Dark card asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

<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 nneɛma a wɔde di dwuma

Wubetumi nso asesa borders a ɛwɔ card header ne footer no so sɛnea ɛho hia, na mpo ayi wɔn background-colorne .bg-transparent.

Titiriw

Odi nkonim krataa asɛmti

Ebinom ntɛm nhwɛso nsɛm a wɔde besi kaad no asɛmti so na ayɛ kaad no mu nsɛm no fã kɛse no ara.

Ase hɔ asɛm

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

Kaad nhyehyɛe

Wɔ nsɛm a ɛwɔ kaad mu a wobɛhyehyɛ no akyi no, Bootstrap no de nneɛma kakraa bi a wubetumi apaw a wode bɛhyehyɛ kaad ahorow a ɛtoatoa so no ka ho. Mprempren de, saa nhyehyɛe ahorow yi nnya nyɛɛ adwuma .

Kaad akuw ahorow

Fa kaad akuw ahorow kyerɛ kaad ahorow ase sɛ ade biako a wɔde abata ho a ɛwɔ adum a ne tɛtrɛtɛ ne ne sorokɔ yɛ pɛ. Kaad akuw de di dwuma display: flex;de nya wɔn kɛseyɛ a ɛyɛ pɛ.

Kaad no asɛmti

Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa kaad yi wɔ nsɛm a ɛware mpo sen nea edi kan no de kyerɛ saa adeyɛ a ɛkorɔn a ɛyɛ pɛ no.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

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

Sɛ wode kaad akuw a ɛwɔ ase hɔ redi dwuma a, emu nsɛm no bɛhyehyɛ ne ho.

Kaad no asɛmti

Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

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

Kaad a wɔde ahyɛ mu

Wohia nkrataa a ne tɛtrɛtɛ ne ne sorokɔ yɛ pɛ a wɔmfa nkata ho? Fa kaad decks di dwuma.

Kaad no asɛmti

Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

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

Sɛnea ɛte wɔ kaad akuw ho no, kaad ase nsɛm a ɛwɔ decks mu no bɛhyehyɛ ne ho.

Kaad no asɛmti

Eyi yɛ kaad a ɛtrɛw a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Kaad no asɛmti

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

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

Kaad nkyerɛwde ahorow

Wobetumi ahyehyɛ nkrataa no ayɛ no nkyerɛwde a ɛte sɛ Masonry a CSS nkutoo na ɛwɔ mu denam .card-columns. Wɔde CSS columnagyapade na ɛkyekyere kaad sen sɛ wɔde flexbox bɛyɛ ma ɛyɛ mmerɛw sɛ wɔbɛhyehyɛ no. Wɔkra nkrataa fi soro kosi ase ne benkum kɔ nifa.

Ti a ɛwɔ soro! Ebia akwansin a wobɛfa a wode kaad adum ayɛ no bɛsono. Sɛnea ɛbɛyɛ a kaad ahorow no bebubu wɔ adum ahorow so no, ɛsɛ sɛ yɛde si hɔ display: inline-blocksɛnea column-break-inside: avoidɛnyɛ ano aduru a atuo ntumi nkɔ mu de besi nnɛ.

Kaad asɛmti a ɛkyekyere nsɛm foforo

Eyi yɛ kaad tenten a nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo. Saa nsɛm yi yɛ tenten kakra.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

Kaad no asɛmti

Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat.

Obi a wagye din wɔ Source Title mu

Kaad no asɛmti

Saa kaad yi wɔ nsɛm a ɛfoa so wɔ ase hɔ sɛ abɔde mu ade a ɛma wonya nsɛm foforo.

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

Kaad no asɛmti

Wɔyɛɛ no foforo koraa 3 mins a atwam ni

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

Wobetumi nso atrɛw kaad nkyerɛwde ahorow mu na wɔayɛ no sɛnea wopɛ denam koodu foforo bi so. Wɔakyerɛ wɔ aseɛ ha yi yɛ adesua no ntrɛmu a .card-columnswɔde CSS korɔ no ara a yɛde di dwuma—CSS nkorabata— de yɛ mmuaeɛ tiers a wɔde sesa nkorabata dodoɔ no.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Kaad ahorow

Fa ho

Nhwɛsoɔ

Kaad no asɛmti

Nsɛm a ɛwɔ mu no ahorow

Nipadua

Asɛmti, nsɛm, ne nkitahodi ahorow

Kaad no asɛmti

Kaad no asɛmti ketewaa bi

Mfonini ahorow

Kyerɛw akuw ahorow din

Adididan mu sink

Kaad no asɛmti

Ti ne ase hɔ asɛm

Asɛmti titiriw a wɔde di dwuma

Wɔde ahyɛ mu

Asɛmti titiriw a wɔde di dwuma

Asɛmti titiriw a wɔde di dwuma

Sizing a wɔde yɛ nneɛma

Grid markup a wode bedi dwuma

Asɛmti titiriw a wɔde di dwuma

Asɛmti titiriw a wɔde di dwuma

Nneɛma a wɔde di dwuma a wɔde di dwuma

Kaad no asɛmti

Kaad no asɛmti

CSS a wɔahyɛ da ayɛ a wode bedi dwuma

Asɛmti titiriw a wɔde di dwuma

Nsɛm a wɔakyerɛw no pɛpɛɛpɛ

Asɛmti titiriw a wɔde di dwuma

Asɛmti titiriw a wɔde di dwuma

Asɛmti titiriw a wɔde di dwuma

Nsɛm a Wɔka Kyerɛ

Asɛmti titiriw a wɔde di dwuma

Asɛmti titiriw a wɔde di dwuma

Mfonini ahorow

Mfonini a wɔde akata so

Kaad no asɛmti

Kaad no asɛmti

Mfonini ahorow a wɔde kata so

Kaad no asɛmti

Kaad ahorow a wɔde yɛ nneɛma

Akyi ne kɔla

Mfitiase kaad asɛmti

Kaad a ɛto so abien no asɛmti

Odi nkonim krataa asɛmti

Asiane krataa no asɛmti

Kɔkɔbɔ krataa no asɛmti

Info kaad no asɛmti

Hann kaad asɛmti

Dark card asɛmti

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Hyeɛ so

Mfitiase kaad asɛmti

Kaad a ɛto so abien no asɛmti

Odi nkonim krataa asɛmti

Asiane krataa no asɛmti

Kɔkɔbɔ krataa no asɛmti

Info kaad no asɛmti

Hann kaad asɛmti

Dark card asɛmti

Mixins nneɛma a wɔde di dwuma

Odi nkonim krataa asɛmti

Kaad nhyehyɛe

Kaad akuw ahorow

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad a wɔde ahyɛ mu

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad no asɛmti

Kaad nkyerɛwde ahorow

Kaad asɛmti a ɛkyekyere nsɛm foforo

Kaad no asɛmti