Source

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.

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 .

100%x180 fɔ di wan dɛn
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 
<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>

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

Imej kap [100%x180].

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.

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

Lista di grup dɛn

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

  • Kras jɔsto odio
  • Dapibus ac fasilisis in
  • Vestibulum na di eros
<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>
Di tin dɛn we dɛn sho
  • Kras jɔsto odio
  • Dapibus ac fasilisis in
  • Vestibulum na di eros
<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>

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.

Imej kap [100%x180].
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.

  • Kras jɔsto odio
  • Dapibus ac fasilisis in
  • Vestibulum na di eros
Kad link Wan ɔda link 
<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>

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

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

Sɔmbɔdi we gɛt nem na Sos Taytul 
<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>
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 
<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 
<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 
<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 
<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 
<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>

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 
<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>
Speshal taytul tritmɛnt

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

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

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.

100%x180 fɔ di wan dɛn
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

100%x180 fɔ di wan dɛn 
<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>

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.

100%x270 fɔ di wan dɛn
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

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

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ɔ

Yuz tɛks ɛn bakgrɔn yutiliti fɔ chenj di we aw kad de luk.

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

<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>
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 .sr-onlyklas.

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.

<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 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 
<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 yuz display: flex;fɔ ajɔst dɛn yunifom saiz.

100%x180 fɔ di wan dɛn
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

100%x180 fɔ di wan dɛn
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

100%x180 fɔ di wan dɛn
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

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

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

100%x180 fɔ di wan dɛn
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
100%x180 fɔ di wan dɛn
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
100%x180 fɔ di wan dɛn
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 
<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>

Kad dɛk dɛn

Nid wan sɛt fɔ ikwal wit ɛn ayt kad dɛn we nɔ ataya to wan ɔda wan? Yuz kad dɛk dɛn.

100%x200 fɔ di wan dɛn
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.

Las apdet 3 mins bifo

100%x200 fɔ di wan dɛn
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

100%x200 fɔ di wan dɛn
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

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

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

100%x180 fɔ di wan dɛn
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
100%x180 fɔ di wan dɛn
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
100%x180 fɔ di wan dɛn
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 
<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>

Kad kɔlɔm dɛn

Yu kin ɔganayz kad dɛn to kɔlɔm dɛn we tan lɛk Masonry wit jɔs CSS bay we yu rap dɛn insay .card-columns. Dɛn bil kad dɛn wit CSS columnprɔpati dɛn instead ɔf fleksbɔks fɔ mek i izi fɔ alaynɛd. Dɛn kin ɔda kad dɛn frɔm ɔp to dɔŋ ɛn frɔm lɛft to rayt.

Hed dɛn de ɔp! Yu mayl wit kad kɔlɔm dɛn kin difrɛn. Fɔ mek kad dɛn nɔ brok akɔdin to kɔlɔm dɛn, wi fɔ sɛt dɛn to display: inline-blockas column-break-inside: avoidnɔto bulɛtpruf sɔlvishɔn yet.

100%x160 fɔ di wan dɛn
Kad taytul we de rap to nyu layn

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.

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

Sɔmbɔdi we gɛt nem na Sos Taytul
100%x160 fɔ di wan dɛn
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

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat.

Sɔmbɔdi we gɛt nem na Sos Taytul
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

100%x260 fɔ di wan dɛn

Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.

Sɔmbɔdi we gɛt nem na Sos Taytul
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

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

Yu kin ɛkstɛnd ɛn kɔstɔmayt di kad kɔlɔm dɛn bak wit sɔm ɔda kɔd dɛn. Dɛn sho dɔŋ ya na wan ɛkstenshɔn fɔ di .card-columnsklas we de yuz di sem CSS we wi de yuz—CSS kɔlɔm dɛn— fɔ mek wan sɛt fɔ rispɔnsiv taya dɛn fɔ chenj di nɔmba fɔ di kɔlɔm dɛn.

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