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 .
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 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.
<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.
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 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.
- 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>- 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>- 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 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.
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
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Ɛda ɛn fut
Ad wan opshɔnal hεda ɛn/ɔ fut insay wan kad.
<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
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div><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.
<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.
<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.
<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 .
<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>Navigashɔn fɔ go
Ad sɔm nevigishɔn to wan kad in hεda (ɔ blɔk) wit Bootstrap in nav kɔmpɔnɛnt dɛn .
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div><div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>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.
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
<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.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>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 .no-guttersɛ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.
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 mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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.
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 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
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 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.
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.
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.
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.
<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>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.
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
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
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 src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Jɔs lɛk wit kad grup dɛn, kad futtin dɛn na dɛk dɛn go layn ɔtomɛtik wan.
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.
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.
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.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Grid 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.
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.
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.
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.
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.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Chenj am to .row-cols-3ɛn yu go si di nɔmba 4 kad rap.
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.
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.
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.
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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>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.
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.
Taytul fɔ di kad
Dis na shɔt kad.
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.
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.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>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.
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.
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.
Taytul fɔ di kad
Dis kad gɛt taytul ɔltɛm ɛn shɔt paregraf fɔ tɛks we de dɔŋ am.
Las apdet 3 mins bifo
Lorem ipsum dolor sidon amet, konsektetur adipissing elit. Intaj posuere erat wan ante.
Taytul fɔ di kad
Dis na ɔda kad we gɛt taytul ɛn sɔpɔt tɛks dɔŋ ya. Dis kad gɛt sɔm ɔda tin dɛn fɔ mek i lɔng smɔl ɔltogɛda.
Las apdet 3 mins bifo
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>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;
}
}