Kāleka
Hāʻawi nā kāleka Bootstrap i kahi pahu ʻike maʻalahi a hoʻonui ʻia me nā ʻano like ʻole a me nā koho.
E pili ana
He pahu maʻiʻo maʻalahi a hoʻonui ʻia ke kāleka. Loaʻa iā ia nā koho no nā poʻo a me nā wāwae, nā ʻano maʻiʻo like ʻole, nā waihoʻoluʻu ʻaoʻao, a me nā koho hōʻike ikaika. Inā kamaʻāina ʻoe i ka Bootstrap 3, hoʻololi nā kāleka i kā mākou panela kahiko, nā pūnāwai, a me nā kiʻi liʻiliʻi. Loaʻa nā hana like i kēlā mau ʻāpana e like me nā papa hoʻololi no nā kāleka.
Laʻana
Kūkulu ʻia nā kāleka me ka liʻiliʻi liʻiliʻi a me nā ʻano e like me ka hiki, akā hoʻokele mau i ka hāʻawi ʻana i kahi ton o ka mana a me ka hana maʻamau. Kūkulu ʻia me ka flexbox, hāʻawi lākou i ka alignment maʻalahi a hui maikaʻi me nā mea Bootstrap ʻē aʻe. ʻAʻohe margino lākou maʻamau, no laila e hoʻohana i nā pono spacing e like me ka mea e pono ai.
Aia ma lalo kahi laʻana o kahi kāleka maʻamau me nā mea i hui pū ʻia a me kahi ākea paʻa. ʻAʻohe laula paʻa o nā kāleka e hoʻomaka ai, no laila e hoʻopiha maoli lākou i ka laulā piha o kāna mea makua. Hoʻopili maʻalahi kēia me kā mākou mau koho nui .
Poʻo inoa kāleka
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Hele i kahi<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>ʻAno maʻiʻo
Kākoʻo nā kāleka i nā ʻano mea like ʻole, me nā kiʻi, nā kikokikona, nā pūʻulu papa inoa, nā loulou, a me nā mea hou aku. Aia ma lalo nā laʻana o nā mea i kākoʻo ʻia.
Kino
ʻO ka papa kūkulu o kahi kāleka ka .card-body. E hoʻohana i kēlā me kēia manawa āu e makemake ai i kahi ʻāpana padded i loko o kahi kāleka.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Poʻo inoa, kikokikona, a me nā loulou
Hoʻohana ʻia nā inoa kāleka ma ka hoʻohui .card-titleʻana i kahi <h*>hōʻailona. Ma ke ala like, hoʻohui ʻia nā loulou a kau ʻia ma kahi kokoke i kekahi me ka hoʻohui .card-linkʻana i kahi <a>hōʻailona.
Hoʻohana ʻia nā huaʻōlelo ma ka hoʻohui .card-subtitleʻana i kahi <h*>hōʻailona. Inā hoʻokomo ʻia ka .card-titlea me nā .card-subtitlemea i loko o kahi .card-bodymea, ua align maikaʻi ʻia ke poʻo inoa kāleka a me ka subtitle.
Poʻo inoa kāleka
Kāleka subtitle
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
loulou kāleka ʻO kekahi loulou<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>Nā kiʻi
.card-img-topkau i ke kiʻi ma luna o ke kāleka. Me ka .card-text, hiki ke hoʻohui ʻia ke kikokikona i ke kāleka. Hiki ke hoʻopaʻa ʻia nā kikokikona i loko .card-textme nā hōʻailona HTML maʻamau.
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>E papa inoa i nā hui
E hana i nā papa inoa o nā maʻiʻo ma kahi kāleka me kahi hui papa inoa flush.
- He mea
- He mea ʻelua
- He mea kolu
<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>- He mea
- He mea ʻelua
- He mea kolu
<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>- He mea
- He mea ʻelua
- He mea kolu
<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>Piko kīhini
Hoʻohui a hoʻohālikelike i nā ʻano ʻike he nui e hana i ke kāleka āu e pono ai, a i ʻole e hoʻolei i nā mea āpau ma laila. Hōʻike ʻia ma lalo nei nā ʻano kiʻi, nā poloka, nā ʻano kikokikona, a me kahi pūʻulu papa inoa—ua wahī ʻia i loko o kahi kāleka ākea paʻa.
Poʻo inoa kāleka
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
- He mea
- He mea ʻelua
- He mea kolu
<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>Poʻo a me ka wāwae
Hoʻohui i kahi poʻo a/a i ʻole ka wāwae i loko o kahi kāleka.
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>Hiki ke hoʻohālikelike ʻia nā poʻo kāleka ma ka hoʻohui .card-headerʻana i <h*>nā mea.
Hōʻike ʻia
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>He ʻōlelo ʻōlelo kaulana, aia i loko o kahi mea blockquote.
<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>Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>Ka nui ana
Manaʻo nā kāleka ʻaʻohe kikoʻī widthe hoʻomaka, no laila e 100% ākea lākou ke ʻole i ʻōlelo ʻia. Hiki iā ʻoe ke hoʻololi i kēia e like me ka mea e pono ai me CSS maʻamau, nā papa grid, grid Sass mixins, a i ʻole nā mea pono.
Ke hoʻohana nei i ka hōʻailona grid
Me ka hoʻohana ʻana i ka mānoanoa, e kāwili i nā kāleka i nā kolamu a me nā lālani e like me ka mea e pono ai.
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahiHana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>Ke hoʻohana nei i nā pono hana
E hoʻohana i kā mākou lima lima o nā mea hoʻohana nui e hoʻonohonoho koke i ka laulā o kahi kāleka.
Poʻo inoa kāleka
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
pihiPoʻo inoa kāleka
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
pihi<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>Ke hoʻohana nei i ka CSS maʻamau
E hoʻohana i ka CSS maʻamau i kāu pepa style a i ʻole ma ke ʻano inline e hoʻonohonoho i kahi ākea.
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>Hoʻopololei kikokikona
Hiki iā ʻoe ke hoʻololi koke i ka hoʻopololei kikokikona o kēlā me kēia kāleka—ma kona piha a i ʻole nā ʻāpana kikoʻī—me kā mākou papa kuhikuhi kikokikona .
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahiHana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahiHana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>Hoʻokele
Hoʻohui i kekahi hoʻokele i ke poʻo (a i ʻole poloka) o kahi kāleka me nā ʻāpana nav o Bootstrap .
Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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">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>Hana inoa kūikawā
Me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou aku.
Hele i kahi<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>Nā kiʻi
Loaʻa i nā kāleka kekahi mau koho no ka hana ʻana me nā kiʻi. E koho mai ka hoʻopili ʻana i nā "pale kiʻi" ma kēlā me kēia ʻaoʻao o ke kāleka, e uhi ana i nā kiʻi me ka ʻike kāleka, a i ʻole e hoʻokomo wale i ke kiʻi i loko o kahi kāleka.
Nā pāpale kiʻi
E like me nā poʻo a me nā wāwae, hiki i nā kāleka ke hoʻokomo i nā "poʻo kiʻi" ma luna a me lalo - nā kiʻi ma luna a i lalo paha o kahi kāleka.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻopuka hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻopuka hope ʻia 3 mau minuke aku nei
<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>Nā uhi kiʻi
E hoʻololi i kahi kiʻi i kāʻei kākiʻi a uhi i ka kikokikona o kāu kāleka. Ma muli o ke kiʻi, pono ʻoe a ʻaʻole pono i nā ʻano a i ʻole nā mea pono.
<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>Kaupae
Me ka hoʻohana ʻana i ka hui pū ʻana o nā papa kuhikuhi a me nā mea pono, hiki ke hana ʻia nā kāleka ma ke ala paʻa a me ka pane. Ma ka laʻana ma lalo nei, wehe mākou i nā ʻauwaʻa grid .no-guttersme ka hoʻohana ʻana i .col-md-*nā papa e hana i ke kāleka i ka pae i ka mdhaki. Pono paha nā hoʻololi hou aʻe ma muli o kāu ʻike kāleka.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻopuka hope ʻia 3 mau minuke aku nei
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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>Nā ʻano kāleka
Loaʻa i nā kāleka nā koho like ʻole no ka hoʻopilikino ʻana i ko lākou ʻaoʻao, nā palena, a me ke kala.
Ka hope a me ke kala
E hoʻohana i ka kikokikona a me nā pono hana hope e hoʻololi i ke ʻano o kahi kāleka.
Poʻo inoa kāleka mua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lanakila
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka pilikia
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka hōʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka māmā
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻeleʻele
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>Ka lawe ʻana i ka manaʻo i nā ʻenehana kōkua
ʻO ka hoʻohana ʻana i ke kala e hoʻohui i ka manaʻo e hāʻawi wale i kahi hōʻailona ʻike, ʻaʻole e hāʻawi ʻia i nā mea hoʻohana i nā ʻenehana kōkua - e like me nā mea heluhelu pale. E hōʻoia i ka ʻike i hōʻike ʻia e ka waihoʻoluʻu i ʻike ʻia mai ka maʻiʻo ponoʻī (e laʻa i ke kikokikona ʻike ʻia), a i ʻole e hoʻokomo ʻia ma o nā ala ʻē aʻe, e like me nā kikokikona hou i hūnā ʻia me ka .sr-onlypapa.
Palena
E hoʻohana i nā pono palena e hoʻololi wale i border-colorke kāleka. E hoʻomaopopo he hiki iā ʻoe ke kau i .text-{color}nā papa ma ka makua .carda i ʻole kahi ʻāpana o nā mea o ke kāleka e like me ka hōʻike ʻana ma lalo nei.
Poʻo inoa kāleka mua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lua
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka lanakila
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka pilikia
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka hōʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻike
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka māmā
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
Poʻo inoa kāleka ʻeleʻele
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>Mea hoʻohana Mixins
Hiki iā ʻoe ke hoʻololi i nā palena ma ke poʻo kāleka a me ka wāwae e like me ka mea e pono ai, a wehe pū i kā lākou background-colorme .bg-transparent.
Poʻo inoa kāleka lanakila
ʻO kekahi laʻana kikokikona wikiwiki e kūkulu ma luna o ke poʻo inoa kāleka a hoʻonui i ka nui o ka ʻike o ke kāleka.
<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>Hoʻolālā kāleka
Ma waho aʻe o ka hana ʻana i nā ʻike i loko o nā kāleka, loaʻa iā Bootstrap kekahi mau koho no ka waiho ʻana i nā ʻano kāleka. No ka manawa, ʻaʻole i pane mai kēia mau koho hoʻolālā .
Nā hui kāleka
E hoʻohana i nā hui kāleka e hāʻawi i nā kāleka ma ke ʻano hoʻokahi, i hoʻopili ʻia me nā kolamu like ākea a me ke kiʻekiʻe. Hoʻomaka nā pūʻulu kāleka i hoʻopaʻa ʻia a hoʻohana display: flex;e hoʻopili ʻia me nā ana like ʻole e hoʻomaka ana ma ka smbreakpoint.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻopuka hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Hoʻopuka hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. He ʻoi aku ka lōʻihi o kēia kāleka ma mua o ka mea mua e hōʻike i kēlā hana kiʻekiʻe like.
Hoʻopuka hope ʻia 3 mau minuke aku nei
<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>Ke hoʻohana nei i nā pūʻulu kāleka me nā wāwae wāwae, e laina ʻakomi ko lākou ʻike.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. He ʻoi aku ka lōʻihi o kēia kāleka ma mua o ka mea mua e hōʻike i kēlā hana kiʻekiʻe like.
<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>Nā papa kāleka
Makemake ʻoe i nā kāleka laulā like ʻole a me ke kiʻekiʻe i pili ʻole kekahi i kekahi? E hoʻohana i nā kāleka kāleka.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Hoʻopuka hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Hoʻopuka hope ʻia 3 mau minuke aku nei
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. He ʻoi aku ka lōʻihi o kēia kāleka ma mua o ka mea mua e hōʻike i kēlā hana kiʻekiʻe like.
Hoʻopuka hope ʻia 3 mau minuke aku nei
<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>E like me nā pūʻulu kāleka, e laina ʻakomi nā wāwae kāleka i nā papa.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Poʻo inoa kāleka
He kāleka ʻoi aku kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi kūlohelohe i nā ʻike hou aʻe. He ʻoi aku ka lōʻihi o kēia kāleka ma mua o ka mea mua e hōʻike i kēlā hana kiʻekiʻe like.
<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>Kāleka pahu
E hoʻohana i ka ʻōnaehana mākia Bootstrap a me kāna mau .row-colspapa e hoʻomalu i ka nui o nā kolamu mānoanoa (i ʻōwili ʻia a puni kāu mau kāleka) āu e hōʻike ai i kēlā me kēia lālani. Eia kekahi laʻana, eia ka .row-cols-1waiho ʻana i nā kāleka ma ke kolamu hoʻokahi, a .row-cols-md-2e hoʻokaʻawale i ʻehā kāleka i ka laulā like ma nā lālani he nui, mai ka haʻihaʻi waena.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
<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>E hoʻololi iā ia .row-cols-3a ʻike ʻoe i ke kāʻei kāleka ʻehā.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
<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>Ke makemake ʻoe i ke kiʻekiʻe like, hoʻohui .h-100i nā kāleka. Inā makemake ʻoe i nā kiʻekiʻe like ma ka paʻamau, hiki iā ʻoe ke hoʻonohonoho $card-height: 100%iā Sass.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
Poʻo inoa kāleka
He kāleka pōkole kēia.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe.
Poʻo inoa kāleka
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
<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>Nā kolamu kāleka
Hiki ke hoʻonohonoho ʻia nā kāleka i loko o nā kolamu e like me Masonry me CSS wale nō ma ke kāʻei ʻana iā lākou i .card-columns. Hoʻokumu ʻia nā kāleka me columnnā waiwai CSS ma kahi o ka flexbox no ka maʻalahi o ka alignment. Kauoha ʻia nā kāleka mai luna a lalo a hema a ʻākau.
Nā poʻo i luna! Hiki ke ʻokoʻa kāu mile mile me nā kolamu kāleka. I mea e pale aku ai i ka haki ʻana o nā kāleka ma nā kolamu, pono mākou e hoʻonoho iā lākou no display: inline-blockka mea column-break-inside: avoidʻaʻole ia he hopena pale pōkā.
Poʻo inoa kāleka e hoʻopili ana i kahi laina hou
He kāleka lōʻihi kēia me nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i nā ʻike hou aʻe. ʻOi aku ka lōʻihi o kēia ʻike.
He ʻōlelo ʻōlelo kaulana, aia i loko o kahi mea blockquote.
Poʻo inoa kāleka
Loaʻa i kēia kāleka nā kikokikona kākoʻo ma lalo nei ma ke ʻano he alakaʻi maoli i ka ʻike hou.
Hoʻopuka hope ʻia 3 mau minuke aku nei
He ʻōlelo ʻōlelo kaulana, aia i loko o kahi mea blockquote.
Poʻo inoa kāleka
He inoa maʻamau kēia kāleka a me ka paukū pōkole o nā kikokikona ma lalo.
Hoʻopuka hope ʻia 3 mau minuke aku nei
He ʻōlelo ʻōlelo kaulana, aia i loko o kahi mea blockquote.
Poʻo inoa kāleka
He kāleka ʻē aʻe kēia me ke poʻo inoa a me nā kikokikona kākoʻo ma lalo nei. Loaʻa i kēia kāleka kekahi maʻiʻo ʻē aʻe e hoʻonui iki i ke kiʻekiʻe.
Hoʻopuka hope ʻia 3 mau minuke aku nei
<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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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>Hiki ke hoʻonui a hoʻopilikino ʻia nā kolamu kāleka me kekahi code hou. Hōʻike ʻia ma lalo kahi hoʻonui o ka .card-columnspapa e hoʻohana ana i ka CSS like a mākou e hoʻohana ai—nā kolamu CSS—e hana i kahi pūʻulu o nā pae pane no ka hoʻololi ʻana i ka helu o nā kolamu.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}