Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

Kad dɛn we dɛn kin yuz

Bootstrap in kad dɛn de gi wan fleksibul ɛn ɛkstenshɔn kɔntinyu kɔntena wit bɔku difrɛn we dɛn ɛn opshɔn dɛn.

Na dis pej

Bɔt

Kad na kɔntena we de chenj ɛn we pɔsin kin ebul fɔ ɛkstɛnd . I gɛt tin dɛn we yu kin pik fɔ ɛd ɛn fut, bɔku bɔku tin dɛn we de insay, bakgrɔn kɔlɔ dɛn we de na di kɔntɛks, ɛn pawaful tin dɛn we yu kin pik fɔ sho. If yu sabi Bootstrap 3, kad dɛn de tek ples fɔ wi ol panɛl dɛn, wɛl dɛn, ɛn smɔl pikchɔ dɛn. Di sem kayn wok we dɛn kɔmpɔnɛnt dɛn de du de as modifya klas fɔ kad dɛn.

Ɛgzampul

Dɛn bil kad dɛn wit smɔl mak ɛn stayl dɛn as dɛn ebul, bɔt dɛn stil ebul fɔ gi wan tɔn fɔ kɔntrol ɛn kɔstɔmayshɔn. Bil wit flexbox, dɛn de gi izi alaynɛshɔn ɛn miks fayn wit ɔda Bootstrap kɔmpɔnɛnt dɛn. Dɛn nɔ gɛt marginbay difɔlt, so yuz spacing utilities as nid de.

Dis dɔŋ ya na ɛgzampul fɔ wan bɛsik kad we gɛt miks kɔntinyu ɛn wan fiks wit. Kad dɛn nɔ gɛt wan fiks wit fɔ stat, so dɛn go naturally ful di ful wit fɔ in mama ɛn papa ɛlimɛnt. Dis kin izi fɔ kɔstɔmayt wit wi difrɛn sayz opshɔn dɛn .

Placeholder Image cap
Taytul fɔ di kad

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Go sɔmsay
html 
<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>

Di kayn tin dɛn we de insay

Kad dɛn kin sɔpɔt bɔku bɔku tin dɛn, lɛk pikchɔ dɛn, tɛks, list grup dɛn, link dɛn, ɛn ɔda tin dɛn. Dis dɔŋ ya na ɛgzampul dɛn bɔt wetin dɛn sɔpɔt.

Bɔdi

Di bildin blɔk fɔ wan kad na di .card-body. Yuz am ɛnitɛm we yu nid pat we gɛt pad insay wan kad.

Dis na sɔm tɛks insay wan kad bɔdi.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Taytul dɛn, tɛks dɛn, ɛn link dɛn

Dɛn kin yuz kad taytul dɛn bay we dɛn ad .card-titlepan wan <h*>tag. Na di sem we, dɛn kin ad link dɛn ɛn put dɛn nia dɛnsɛf bay we dɛn ad .card-linkdɛn to wan <a>tag.

Dɛn kin yuz sɔbtaytul dɛn bay we dɛn ad wan .card-subtitleto wan <h*>tag. If dɛn put di .card-titleɛn di .card-subtitletin dɛn insay wan .card-bodytin, di kad taytul ɛn di sɔbtaytul go alaynɛd ​​fayn fayn wan.

Taytul fɔ di kad
Kad fɔ sɔbtaytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Kad link Wan ɔda link
html 
<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>

Imej dɛn

.card-img-topde put wan pikchɔ ɔp di kad. Wit .card-text, yu kin ad tɛks to di kad. Tekst insay .card-textkin stayl bak wit di standad HTML tag dɛn.

Placeholder Image cap

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

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

Lista di grup dɛn

Krio list fɔ di tin dɛn we de insay wan kad wit wan flush list grup.

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
html 
<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>
Di tin dɛn we dɛn sho
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
html 
<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>
  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
Kad futtin
html 
<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>

Sink na di kichin

Miks ɛn mach bɔku bɔku kɔntinyu fɔ mek di kad we yu nid, ɔ trowe ɔltin insay de. Dɛn sho dɔŋ ya di pikchɔ stayl dɛn, blɔk dɛn, tɛks stayl dɛn, ɛn wan list grup—ɔl dɛn rap dɛn wit wan kad we gɛt fiks wit.

Placeholder Image cap
Taytul fɔ di kad

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

  • Wan tin we dɛn mek
  • Wan sɛkɔn tin
  • Wan tɔd tin
Kad link Wan ɔda link
html 
<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>

Ad wan opshɔnal hεda ɛn/ɔ fut insay wan kad.

Di tin dɛn we dɛn sho
Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
html 
<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>

Yu kin stayl di kad hεda dɛn bay we yu ad .card-headerpan di <h*>ɛlimɛnt dɛn.

Di tin dɛn we dɛn sho
Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
html 
<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>
Tɔk

Wan kot we bɔku pipul dɛn sabi, we de insay wan blɔkkɔt ɛlimɛnt.

Sɔmbɔdi we gɛt nem na Sos Taytul
html 
<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>
Di tin dɛn we dɛn sho
Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
2 dez bifo
html 
<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>

Sayz fɔ di sayz

Kad dɛn de tek am se nɔ spɛshal widthfɔ stat, so dɛn go bi 100% waid pas dɛn tɔk ɔda tin. Yu kin chenj dis as nid de wit kɔstɔm CSS, grid klas, grid Sass miksin, ɔ yutiliti.

Yuz grid mak-ap

Yuz di grid, rap kad dɛn insay kɔlɔm ɛn row dɛn as nid de.

Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
html 
<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>

Yuz yutiliti dɛn

Yuz wi anful saiz yutiliti dɛn we de fɔ sɛt wan kad in wit kwik kwik wan.

Taytul fɔ di kad

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Bɔtin
Taytul fɔ di kad

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Bɔtin
html 
<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>

Yuz kɔstɔm CSS

Yuz kɔstɔm CSS na yu staylshit ɔ as inlayn stayl fɔ sɛt wan wit.

Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
html 
<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>

Teks alaynɛshɔn

Yu kin chenj di tɛks alaynɛshɔn fɔ ɛni kad kwik kwik wan—insay in wan ol ɔ sɔm patikyula pat dɛn—wit wi tɛks alaynɛshɔn klas dɛn .

Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
html 
<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>

Ad sɔm nevigishɔn to wan kad in hεda (ɔ blɔk) wit Bootstrap in nav kɔmpɔnɛnt dɛn .

Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
html 
<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>
Speshal taytul tritmɛnt

Wit sɔpɔtin tɛks dɔŋ ya as natura l lida-in to ɔda kɔntinyu.

Go sɔmsay
html 
<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>

Imej dɛn

Kad dɛn gɛt sɔm tin dɛn we yu kin pik fɔ wok wit pikchɔ dɛn. Pik frɔm we yu ad “image caps” na ɛni ɛnd na di kad, fɔ ɔvalayz pikchɔ dɛn wit tin dɛn we de insay di kad, ɔ jɔs put di pikchɔ insay wan kad.

Imej kap dɛn

Jɔs lɛk di ɛd ɛn fut, kad dɛn kin gɛt “imej kap” dɛn we de ɔp ɛn dɔŋ—pim dɛn we de ɔp ɔ dɔŋ pan kad.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Las apdet 3 mins bifo

Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Las apdet 3 mins bifo

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

Imej dɛn we de ɔvalayz

Tɔn wan pikchɔ to kad bakgrɔn ɛn ɔvalayz yu kad in tɛks. Dipen pan di pikchɔ, yu kin nid ɔda stayl ɔ yutiliti dɛn ɔ yu nɔ nid.

Placeholder Card image
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Las apdet 3 mins bifo

html 
<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>
Notis se di tin dɛn we de insay di pikchɔ nɔ fɔ big pas di ayt we di pikchɔ gɛt. If di tin dɛn we de insay big pas di pikchɔ di tin dɛn we de insay go sho na do na di pikchɔ.

Bifo ɛn biɛn

Yuz wan kɔmbaynshɔn fɔ grid ɛn yutiliti klas dɛn, dɛn kin mek kad dɛn ɔrizɔntal di we we go izi fɔ mobayl ɛn we go ebul fɔ ansa. Insay di ɛgzampul we de dɔŋ ya, wi de pul di grid gɔta dɛn wit .g-0ɛn yuz .col-md-*klas dɛn fɔ mek di kad ɔrizɔntal na di mdbrek pɔynt. Sɔntɛm yu go nid fɔ ajɔst mɔ dipen pan di tin dɛn we de insay yu kad.

Placeholder Image
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Las apdet 3 mins bifo

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

Kad stayl dɛn

Kad dɛn gɛt difrɛn tin dɛn we yu kin pik fɔ mek dɛn bakgrɔn, bɔda dɛn, ɛn kɔlɔ.

Bakgrɔn ɛn kɔlɔ

Dɛn ad am na v5.2.0

Set a background-colorwit kɔntrast fɔgrɔn colorwit wi .text-bg-{color}ɛlda dɛn . Bifo dis tɛm, dɛn bin nid fɔ yuz yu an fɔ pe yu chuk .text-{color}ɛn .bg-{color}yutiliti fɔ stayl, we yu kin stil yuz if yu want.

Ɛda fɔ di ed
Praymari kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Sɛkɔndari kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Sakses kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Taytul fɔ kad fɔ denja

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Taytul fɔ wɔnin kad

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Info kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Layt kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Dak kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

html 
<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>
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hiddenklas.

Bɔda

Yuz bɔda yutiliti fɔ chenj jɔs di border-colorɔf wan kad. Notis se yu kin put .text-{color}klas dɛn pan di mama ɔ papa .cardɔ wan smɔl pat pan di tin dɛn we de insay di kad lɛk aw dɛn sho dɔŋ ya.

Ɛda fɔ di ed
Praymari kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Sɛkɔndari kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Sakses kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Taytul fɔ kad fɔ denja

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Taytul fɔ wɔnin kad

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Info kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Layt kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Ɛda fɔ di ed
Dak kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

html 
<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 yutiliti dɛn

Yu kin chenj di bɔda dɛn bak na di kad ɛda ɛn futnot as nid de, ɛn ivin pul dɛn background-colorwit .bg-transparent.

Ɛda fɔ di ed
Sakses kad taytul

Sɔm kwik ɛgzampul tɛks fɔ bil pan di kad taytul ɛn mek di bɔku pan di tin dɛn we de insay di kad.

Fut pat na di fut
html 
<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>

Layout fɔ di kad dɛn

Apat frɔm we yu de stayl di tin dɛn we de insay di kad dɛn, Bootstrap gɛt sɔm tin dɛn we yu kin pik fɔ layt di siriɔs kad dɛn. Fɔ di tɛm, dɛn layout opshɔn dɛn ya nɔ de ansa yet .

Kad grup dɛn

Yuz kad grup fɔ rɛnd kad dɛn as wan, ataya ɛlimɛnt wit ikwal wit ɛn ayt kɔlɔm dɛn. Kad grup dɛn kin stat ɔf stak ɛn yuz display: flex;fɔ bi atak wit yunifom dimɛnshɔn dɛn we bigin na di smbrek pɔynt.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Las apdet 3 mins bifo

Placeholder Image cap
Taytul fɔ di kad

Dis kad gɛt sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn.

Las apdet 3 mins bifo

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kad gɛt ivin lɔng kɔntinyu pas di fɔs wan fɔ sho da ikwal ayt akshɔn de.

Las apdet 3 mins bifo

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

We yu de yuz kad grup dɛn we gɛt fut, dɛn tin dɛn de go layn fɔ dɛnsɛf.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Las apdet 3 mins bifo
Placeholder Image cap
Taytul fɔ di kad

Dis kad gɛt sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn.

Las apdet 3 mins bifo
Placeholder Image cap
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kad gɛt ivin lɔng kɔntinyu pas di fɔs wan fɔ sho da ikwal ayt akshɔn de.

Las apdet 3 mins bifo
html 
<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 kad dɛn

Yuz di Bootstrap grid sistem ɛn in .row-colsklas dɛn fɔ kɔntrol ɔmɔs grid kɔlɔm dɛn (we dɛn rap rawnd yu kad dɛn) yu de sho pan ɛni row. Fɔ ɛgzampul, na ya yu de .row-cols-1lay di kad dɛn na wan kɔlɔm, ɛn .row-cols-md-2split 4 kad dɛn fɔ ikwal wit akɔdin to bɔku bɔku row dɛn, frɔm di midul brekpɔynt ɔp.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

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

Chenj am to .row-cols-3ɛn yu go si di nɔmba 4 kad rap.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

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

We yu nid ikwal ayt, ad .h-100to di kad dɛn. If yu want ikwal ayt bay difɔlt, yu kin sɛt $card-height: 100%insay Sass.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Placeholder Image cap
Taytul fɔ di kad

Dis na shɔt kad.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we lɔng pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

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

Jɔs lɛk wit kad grup dɛn, kad futtin dɛn go layn ɔtomɛtik wan.

Placeholder Image cap
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kɔntinyu fɔ lɔng smɔl.

Las apdet 3 mins bifo
Placeholder Image cap
Taytul fɔ di kad

Dis kad gɛt sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn.

Las apdet 3 mins bifo
Placeholder Image cap
Taytul fɔ di kad

Dis na kad we big pasmak wit sɔpɔt tɛks dɔŋ ya as natura l lida-in fɔ ɔda tin dɛn. Dis kad gɛt ivin lɔng kɔntinyu pas di fɔs wan fɔ sho da ikwal ayt akshɔn de.

Las apdet 3 mins bifo
html 
<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>

Masonry we dɛn mek wit ston

Insay v4wi yuz wan CSS-onli tɛknik fɔ falamakata di bihayvya fɔ Masonry -layk kɔlɔm dɛn, bɔt dis tɛknik kam wit bɔku sayd ɛfɛkt dɛn we nɔ fayn . If yu want fɔ gɛt dis kayn layout na v5, yu kin jɔs mek yus to Masonry plɔgin. Masonry nɔ de insay Bootstrap , bɔt wi dɔn mek wan demo ɛgzampul fɔ ɛp yu fɔ bigin.

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, kad dɛn naw de yuz lokal CSS vɛriɔbul dɛn pan .cardfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$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 di vayriɔbul dɛn

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;