Dagiti Kard
Dagiti kard ti Bootstrap ket mangipaay ti nalaka a maibagay ken mapalawa a pagkargaan ti linaon nga addaan kadagiti adu a variante ken pagpilian.
Maipapan
Ti kard ket maysa a nalaka a maibagay ken mapalawa a container ti linaon. Daytoy ket mangiraman kadagiti pagpilian para kadagiti ulo ken dagiti footer, nadumaduma a linaon, dagiti kolor ti likudan ti konteksto, ken dagiti nabileg a pagpilian ti panagiparang. No pamiliarkayo iti Bootstrap 3, dagiti kard ti mangsukat kadagiti daan a panel, bubon, ken thumbnail-tayo. Ti kapada a panagusar kadagita a paset ket magun-od a kas dagiti klase ti mangbalbaliw para kadagiti kard.
Pagwadan
Dagiti kard ket naaramid nga addaan iti bassit a markup ken estilo aginggana a mabalin, ngem kaskasdi a makabaelda a mangipaay ti maysa a tonelada a panagtengngel ken panagpasayaat. Naaramidda iti flexbox, mangitukonda iti nalaka a panagtunos ken nasayaat ti panaglaokda kadagiti dadduma a paset ti Bootstrap. Awan dagitoy marginbabaen ti default, isu nga agusar kadagiti spacing utilities no kasapulan.
Iti baba ket maysa a pagarigan ti kangrunaan a kard nga addaan iti naglaok a linaon ken naikeddeng a kalawa. Awan ti naikeddeng a kalawa dagiti kard a pangrugian, isu a natural a punnuenda ti naan-anay a kalawa ti nagannak nga elementona. Nalaka laeng a ma-customize daytoy babaen kadagiti nadumaduma a pagpilianmi iti panagdakkel .
Titulo ti kard
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Mapanka iti sadinoman<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>Dagiti kita ti linaon
Suportaran dagiti kard ti nadumaduma a linaon, agraman dagiti ladawan, teksto, grupo ti listaan, silpo, ken dadduma pay. Iti baba ket dagiti pagarigan no ania ti nasuportaran.
Bagi
Ti building block ti maysa a kard ket ti .card-body. Usarem dayta kaanoman a kasapulam ti padded section iti uneg ti kard.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Dagiti paulo, teksto, ken silpo
Mausar dagiti paulo ti kard babaen ti pananginayon .card-titleiti maysa nga <h*>etiketa. Iti isu met laeng a wagas, dagiti silpo ket mainayon ken maikabil iti abay ti tunggal maysa babaen ti pananginayon .card-linkiti maysa nga <a>etiketa.
Dagiti subtitulo ket mausar babaen ti pananginayon ti .card-subtitlea iti maysa nga <h*>etiketa. No ti .card-titleken dagiti .card-subtitlebanag ket naikabil iti maysa a .card-bodybanag, ti paulo ti kard ken ti subtitulo ket nasayaat ti pannakaitunosda.
Titulo ti kard
Subtitulo ti kard
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Card link Sabali pay a 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>Dagiti Ladawan
.card-img-topmangikabil iti ladawan iti ngato ti kard. Babaen .card-textti , mabalin a mainayon ti teksto iti kard. Ti teksto iti uneg .card-textket mabalin pay nga estilo babaen dagiti gagangay nga etiketa ti HTML.
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
<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>Ilista dagiti grupo
Mangaramid kadagiti listaan ti linaon iti maysa a kard nga addaan iti grupo ti listaan ti flush.
- Cras laeng nga odio
- Dapibus ac pasilidad iti
- Vestibulum iti 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>- Cras laeng nga odio
- Dapibus ac pasilidad iti
- Vestibulum iti 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>Lababo ti kosina
Paglalaoken ken pagtunos ti adu a kita ti linaon tapno makaaramidka iti kard a kasapulam, wenno ibellengmo ti amin sadiay. Naipakita iti baba dagiti estilo ti ladawan, bloke, estilo ti teksto, ken maysa a grupo ti listaan—amin ket nabalkot iti naikeddeng ti kalawana a kard.
Titulo ti kard
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
- Cras laeng nga odio
- Dapibus ac pasilidad iti
- Vestibulum iti 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>Header ken footer
Manginayon ti opsional nga ulo ken/wenno footer iti uneg ti kard.
Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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>Mabalin nga estilo dagiti ulo ti kard babaen ti pananginayon .card-headerkadagiti <h*>elemento.
Naitampok
Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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 agtugaw amet, consectetur adipiscing elit. Integer nga posuere erat a 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>Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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>Panag-sizing
Ipagarup dagiti kard nga awan ti espesipiko widtha pangrugian, isu a 100% ti kalawana malaksid no adda sabali a naibaga. Mabalinmo a baliwan daytoy no kasapulan babaen ti kostumbre a CSS, dagiti klase ti grid, dagiti grid Sass mixins, wenno dagiti utilidad.
Babaen ti panangusar iti grid markup
Babaen ti grid, baluten dagiti kard kadagiti adigi ken hilera no kasapulan.
Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinomanEspesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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>Panangusar kadagiti utilidad
Usarem ti sumagmamano a magun-odan a sizing utilities -tayo tapno napartak nga i-set ti kalawa ti maysa a kard.
Titulo ti kard
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
ButonTitulo ti kard
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Buton<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>Babaen ti panangusar iti kostumbre a CSS
Usaren ti kostumbre a CSS kadagiti stylesheet-mo wenno kas dagiti inline nga estilo tapno mangikeddeng ti kalawa.
Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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>Panagtunos ti teksto
Mabalinmo a dagus a baliwan ti panagtunos ti teksto ti ania man a kard—iti intero wenno dagiti espesipiko a pasetna—babaen dagiti klasemi iti panagtunos ti teksto .
Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinomanEspesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinomanEspesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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>Panaglayag
Inayon ti sumagmamano a nabigasion iti ulo (wenno bloke) ti maysa a kard babaen dagiti paset ti nav ti Bootstrap .
Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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>Espesial a panangtrato iti titulo
Buyogen ti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Mapanka iti sadinoman<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>Dagiti Ladawan
Karaman kadagiti kard ti sumagmamano a pagpilian iti panagtrabaho kadagiti ladawan. Pumili manipud iti panangikapet kadagiti “image cap” iti agsumbangir a pungto ti kard, panangikapet kadagiti ladawan iti linaon ti kard, wenno panangikabil laeng iti ladawan iti kard.
Dagiti kape ti ladawan
Kas iti header ken footer, mabalin nga iraman dagiti kard ti ngato ken baba a “image cap” —dagiti ladawan iti ngato wenno baba ti maysa a kard.
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Naudi a na-update 3 mins ti napalabas
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Naudi a na-update 3 mins ti napalabas
<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-top" alt="...">
</div>Dagiti overlay ti ladawan
Pagbalinem ti maysa a ladawan iti background ti kard ken i-overlaymo ti teksto ti kardmo. Depende iti ladawan, mabalin a kasapulam wenno saan dagiti kanayonan nga estilo wenno utilidad.
<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>Paliiwenyo a ti linaon ket saan koma a dakdakkel ngem ti kangato ti ladawan. No dakdakkel ti linaon ngem ti ladawan ti linaon ket maiparang iti ruar ti ladawan.
Paidda
Babaen ti panangusar iti kombinasion dagiti klase ti grid ken utility, mabalin a maaramid dagiti kard a horizontal iti wagas a makaay-ayo iti mobile ken makasungbat. Iti pagarigan iti baba, ikkatenmi dagiti grid gutters nga addaan .no-guttersken agusar .col-md-*kadagiti klase tapno pagbalinen ti kard a horizontal iti mdbreakpoint. Mabalin a kasapulan ti kanayonan a panagbalbaliw depende iti linaon ti kardmo.
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Naudi a na-update 3 mins ti napalabas
<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>Dagiti estilo ti kard
Karaman kadagiti kard ti nadumaduma a pagpilian a mangpasayaat kadagiti background, border, ken kolorda.
Background ken kolor
Usaren dagiti utilidad ti teksto ken background tapno mabaliwan ti langa ti kard.
Titulo ti kard ti primaria
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti segundario a kard
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti balligi
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti peggad
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti pakdaar
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti info
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti lawag
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Nasipnget a titulo ti kard
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
<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>Panangipaay ti kaipapanan kadagiti makatulong a teknolohia
Ti panagusar ti kolor tapno mangnayon ti kaipapanan ket mangipaay laeng ti makita a pakakitaan, a saan a maidanon kadagiti agar-aramat kadagiti makatulong a teknolohia – kas dagiti screen reader. Siguraduen a ti impormasion a naipasimudaag babaen ti kolor ket nalawag manipud iti linaon a mismo (kas pagarigan ti makita a teksto), wenno mairaman babaen dagiti alternatibo a wagas, a kas ti kanayonan a teksto a nailemmeng a kadua ti .sr-onlyklase.
Beddeng
Usaren dagiti border utilities tapno baliwan laeng ti border-colorti maysa a kard. Imutektekanyo a mabalinyo nga ikabil .text-{color}dagiti klase iti nagannak .cardwenno maysa a subset ti linaon ti kard kas naipakita iti baba.
Titulo ti kard ti primaria
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti segundario a kard
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti balligi
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti peggad
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti pakdaar
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti info
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Titulo ti kard ti lawag
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
Nasipnget a titulo ti kard
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
<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 nga utilidad
Mabalinmo pay a baliwan dagiti beddeng iti card header ken footer no kasapulan, ken uray pay ikkaten ti background-colorwith .bg-transparent.
Titulo ti kard ti balligi
Sumagmamano a napartak a pagarigan a teksto a mangbangon iti paulo ti kard ken mangbukel iti kaaduan a linaon ti kard.
<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 ti kard
Malaksid iti estilo ti linaon iti uneg dagiti kard, ti Bootstrap ket mangiraman ti sumagmamano a pagpilian para iti panangiplastar kadagiti serye dagiti kard. Iti agdama, dagitoy a pagpilian iti layout ket saan pay a makasungbat .
Dagiti grupo ti kard
Usaren dagiti grupo ti kard tapno mangiparang kadagiti kard a kas maymaysa, naikapet nga elemento nga addaan kadagiti agpapada a kalawa ken kangato nga adigi. Usaren dagiti grupo ti kard display: flex;tapno maragpatda ti uniporme a kadakkelda.
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Naudi a na-update 3 mins ti napalabas
Titulo ti kard
Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Naudi a na-update 3 mins ti napalabas
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. Daytoy a kard ket addaan pay ketdi iti at-atiddog a linaon ngem ti immuna a mangipakita iti dayta agpapada a kangato nga aramid.
Naudi a na-update 3 mins ti napalabas
<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>No agusar kadagiti grupo ti kard nga addaan kadagiti footer, automatiko nga aglinya ti linaonda.
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Titulo ti kard
Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. Daytoy a kard ket addaan pay ketdi iti at-atiddog a linaon ngem ti immuna a mangipakita iti dayta agpapada a kangato nga aramid.
<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>Dagiti deck ti kard
Kasapulan kadi ti maysa a set ti agpapada a kalawa ken kangato a kard a saan a naikapet iti maysa ken maysa? Agusar kadagiti card deck.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Naudi a na-update 3 mins ti napalabas
Titulo ti kard
Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Naudi a na-update 3 mins ti napalabas
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. Daytoy a kard ket addaan pay ketdi iti at-atiddog a linaon ngem ti immuna a mangipakita iti dayta agpapada a kangato nga aramid.
Naudi a na-update 3 mins ti napalabas
<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>Kas met laeng kadagiti grupo ti kard, dagiti footer ti kard kadagiti deck ket automatiko nga aglinya.
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Titulo ti kard
Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Titulo ti kard
Daytoy ket nalawlawa a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. Daytoy a kard ket addaan pay ketdi iti at-atiddog a linaon ngem ti immuna a mangipakita iti dayta agpapada a kangato nga aramid.
<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>Dagiti kard ti grid
Usaren ti sistema ti grid ti Bootstrap ken dagiti .row-colsklasena tapno makontrol no mano a kolum ti grid (nabalkot kadagiti kardmo) nga ipakitam iti tunggal linia. Kas pagarigan, ditoy ti .row-cols-1panangiplastar kadagiti kard iti maysa a kolum, ken .row-cols-md-2panangbingay kadagiti uppat a kard iti agpapada a kalawa iti ballasiw ti adu a hilera, manipud iti kalalainganna a breakpoint nga agpangato.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
<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>Baliwam dayta iti .row-cols-3ket makitam ti maikapat a card wrap.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
<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>No kasapulam ti agpapada a katayag, inayonmo .h-100kadagiti kard. No kayatmo dagiti agpapada a kangato babaen ti default, mabalinmo nga ikeddeng $card-height: 100%iti Sass.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Titulo ti kard
Ababa daytoy a kard.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon.
Titulo ti kard
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
<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>Dagiti kolum ti kard
Mabalin nga organisaren dagiti kard kadagiti kasla Masonry a kolum nga addaan laeng iti CSS babaen ti panangbalkot kadagitoy iti .card-columns. Dagiti kard ket naibangon babaen dagiti columntagikua ti CSS imbes a ti flexbox para iti nalaklaka a panagtunos. Maorder dagiti kard manipud ngato agingga iti baba ken kannigid nga agpakannawan.
Ulo nga agpangato! Mabalin nga agduduma ti mileage-yo kadagiti kolum ti kard. Tapno malapdan ti panagburak dagiti kard iti ballasiw dagiti adigi, masapul nga ikeddengtayo dagitoy iti display: inline-blockkas column-break-inside: avoidsaan pay a bulletproof a solusion.
Titulo ti kard a mangbalkot iti baro a linia
Daytoy ket at-atiddog a kard nga addaan iti mangsuporta a teksto iti baba a kas natural a lead-in iti kanayonan a linaon. At-atiddog bassit daytoy a linaon.
Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer nga posuere erat a ante.
Titulo ti kard
Daytoy a kard ket addaan iti mangsuporta a teksto iti baba kas natural a lead-in iti kanayonan a linaon.
Naudi a na-update 3 mins ti napalabas
Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer nga posuere erat.
Titulo ti kard
Daytoy a kard ket addaan iti regular a paulo ken ababa a parapo ti teksto iti baba dayta.
Naudi a na-update 3 mins ti napalabas
Lorem ipsum dolor agtugaw amet, consectetur adipiscing elit. Integer nga posuere erat a ante.
Titulo ti kard
Daytoy ket sabali pay a kard nga addaan iti paulo ken mangsuporta a teksto iti baba. Daytoy a kard ket addaan iti sumagmamano a kanayonan a linaon tapno agbalin a nataytayag bassit iti pangkaaduan.
Naudi a na-update 3 mins ti napalabas
<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>Mabalin met a mapalawa ken mapasayaat dagiti kolum ti kard babaen ti sumagmamano a kanayonan a kodigo. Naipakita iti baba ti maysa a panagpaatiddog ti .card-columnsklase nga agus-usar ti isu met laeng a CSS nga us-usarenmi—dagiti kolum ti CSS— tapno mangpataud ti maysa a grupo dagiti sumungbat a tukad para iti panagbalbaliw ti bilang dagiti kolum.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}