Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
in English

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.

Wɔ kratafa yi so

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 .

Placeholder Image cap
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
html na ɛwɔ hɔ 
<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>

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.
html na ɛwɔ hɔ 
<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
html na ɛwɔ hɔ 
<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.

Placeholder Image cap

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.

html na ɛwɔ hɔ 
<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>

Kyerɛw akuw ahorow din

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

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
html na ɛwɔ hɔ 
<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>
Wɔde ahyɛ mu
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
html na ɛwɔ hɔ 
<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>
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
Kaad a ɛwɔ ase hɔ
html na ɛwɔ hɔ 
<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>

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.

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

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
Card link Link foforo nso
html na ɛwɔ hɔ 
<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>

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
html na ɛwɔ hɔ 
<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
html na ɛwɔ hɔ 
<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

Asɛm a wɔafa aka a wonim no yiye, a ɛwɔ blockquote element bi mu.

Obi a wagye din wɔ Source Title mu
html na ɛwɔ hɔ 
<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>
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
html na ɛwɔ hɔ 
<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
html na ɛwɔ hɔ 
<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
html na ɛwɔ hɔ 
<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
html na ɛwɔ hɔ 
<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
html na ɛwɔ hɔ 
<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>

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
html na ɛwɔ hɔ 
<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>
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
html na ɛwɔ hɔ 
<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>

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.

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

Placeholder Image cap
html na ɛwɔ hɔ 
<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>

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.

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

html na ɛwɔ hɔ 
<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>
Hyɛ no nsow sɛ ɛnsɛ sɛ emu nsɛm no yɛ kɛse sen mfonini no sorokɔ. Sɛ emu nsɛm no sõ sen mfonini no a wɔbɛda emu nsɛm no adi wɔ mfonini no akyi.

Ne tɛtrɛtɛ mu

Sɛ wɔde grid ne utility adesua ahorow a wɔaka abom di dwuma a, wobetumi ayɛ kaad ahorow no a ɛkɔ soro wɔ ɔkwan a ɛyɛ mmerɛw sɛ wobɛfa telefon so na ɛyɛ adwuma so. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛde yi grid gutters no .g-0na yɛde .col-md-*classes di dwuma de ma card no yɛ horizontal wɔ mdbreakpoint no. Ebia ɛho behia sɛ woyɛ nsakrae foforo a egyina wo kaad no mu nsɛm so.

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

html na ɛwɔ hɔ 
<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>

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

Wɔde aka ho wɔ v5.2.0 mu

Fa a background-colorwith contrasting foreground colorne yɛn .text-bg-{color}aboafo no si hɔ . Kane no na wɔhwehwɛ sɛ wode nsa bɛbɔ wo paw .text-{color}ne .bg-{color}utilities ma styling, a woda so ara betumi de adi dwuma sɛ wopɛ a.

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.

html na ɛwɔ hɔ 
<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>
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 .visually-hiddenadesuakuw 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.

html na ɛwɔ hɔ 
<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 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
html na ɛwɔ hɔ 
<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 fi ase a wɔaboaboa ano na wɔde di dwuma display: flex;de bata ho a nsusuwii ahorow a ɛyɛ pɛ a efi ase wɔ smbreakpoint no.

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

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

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

html na ɛwɔ hɔ 
<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>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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
html na ɛwɔ hɔ 
<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 kaad ahorow

Fa Bootstrap grid system ne ne .row-colsclass ahorow no di dwuma fa hwɛ grid column dodow (a wɔabɔ ho ban atwa wo cards ho ahyia) a wobɛkyerɛ wɔ row biara mu. Sɛ nhwɛso no, ha na .row-cols-1wode kaad no bɛto adum biako so, na .row-cols-md-2woakyekyɛ kaad anan mu ma ayɛ pɛ wɔ row ahorow pii so, afi mfinimfini mpaapaemu no so akɔ soro.

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

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

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

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

html na ɛwɔ hɔ 
<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>

Sesa no kɔ .row-cols-3na wubehu card wrap a ɛto so anan no.

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

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

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

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

html na ɛwɔ hɔ 
<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>

Sɛ wuhia ɔsorokɔ a ɛyɛ pɛ a, fa ka .h-100nkrataa no ho. Sɛ wopɛ sɛ wo sorokɔ yɛ pɛ default so a, wubetumi ahyɛ $card-height: 100%Sass mu.

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

Placeholder Image cap
Kaad no asɛmti

Eyi yɛ kaad tiawa bi.

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

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

html na ɛwɔ hɔ 
<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>

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

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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
html na ɛwɔ hɔ 
<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>

Abodan a wɔde yɛ nneɛma

Wɔ v4yɛde CSS-only kwan bi dii dwuma de suasuaa sɛnea Masonry -te sɛ columns suban, nanso saa kwan yi de nsunsuanso bɔne pii bae . Sɛ wopɛ sɛ wonya saa nhyehyɛe yi wɔ v5, wubetumi de Masonry plugin adi dwuma kɛkɛ. Masonry nka Bootstrap ho , nanso yɛayɛ demo nhwɛsoɔ a ɛbɛboa wo ama woahyɛ aseɛ.

CSS a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren kaad ahorow de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .cardma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no ​​da so ara boa, nso.

  --#{$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 nsakrae ahorow

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