Kartu
Kartu Bootstrap nyadiakeun wadah eusi fléksibel tur extensible kalawan sababaraha varian sarta pilihan.
Ngeunaan
Kartu mangrupa wadah eusi fléksibel tur extensible . Éta kalebet pilihan pikeun header sareng footer, rupa-rupa eusi, warna latar kontekstual, sareng pilihan tampilan anu kuat. Upami anjeun wawuh sareng Bootstrap 3, kartu ngagentos panél, sumur, sareng gambar leutik urang. Fungsionalitas anu sami sareng komponén éta sayogi salaku kelas modifier pikeun kartu.
Contona
Kartu diwangun kalayan markup sareng gaya sakedik-gancang, tapi tetep tiasa nganteurkeun ton kontrol sareng kustomisasi. Diwangun ku flexbox, aranjeunna nawiskeun alignment anu gampang sareng nyampur sareng komponén Bootstrap anu sanés. Aranjeunna teu gaduh margin
sacara standar, janten nganggo utilitas jarak upami diperyogikeun.
Di handap ieu conto kartu dasar kalayan eusi campuran sarta rubak tetep. Kartu henteu ngagaduhan lebar anu tetep pikeun ngamimitian, janten sacara alami bakal ngeusian lebar pinuh ku unsur indungna. Ieu gampang disaluyukeun sareng sababaraha pilihan ukuran urang .
Judul kartu
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Kamana wae<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>
Jenis eusi
Kartu ngadukung rupa-rupa eusi, kalebet gambar, téks, grup daptar, tautan, sareng seueur deui. Di handap ieu conto naon anu dirojong.
Awak
Blok wangunan kartu nyaéta .card-body
. Paké eta iraha wae nu peryogi bagian padded dina kartu a.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Judul, téks, sareng tautan
Judul kartu dianggo ku cara nambihan .card-title
tag <h*>
. Dina cara nu sarua, Tumbu ditambahkeun jeung disimpen di gigireun silih ku nambahkeun .card-link
kana <a>
tag.
Subtitles dipaké ku nambahkeun a .card-subtitle
ka <h*>
tag. Lamun .card-title
jeung .card-subtitle
item nu disimpen dina .card-body
item, judul kartu na subjudul anu Blok nicely.
Judul kartu
Subjudul kartu
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Link kartu Link séjén<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>
Gambar
.card-img-top
nempatkeun hiji gambar ka luhureun kartu. Kalawan .card-text
, téks bisa ditambahkeun kana kartu. Téks di jero .card-text
ogé tiasa digayakeun sareng tag HTML standar.
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
<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>
Daptar grup
Jieun daptar eusi dina kartu sareng grup daptar siram.
- Hiji barang
- Barang kadua
- Item katilu
<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>
- Hiji barang
- Barang kadua
- Item katilu
<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>
- Hiji barang
- Barang kadua
- Item katilu
<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>
Tilelep dapur
Campur sareng cocog sababaraha jinis eusi pikeun nyiptakeun kartu anu anjeun peryogikeun, atanapi buang sadayana di dinya. Ditémbongkeun di handap nyaéta gaya gambar, blok, gaya téks, sareng grup daptar—sadayana dibungkus dina kartu rubak tetep.
Judul kartu
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
- Hiji barang
- Barang kadua
- Item katilu
<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>
Lulugu jeung footer
Tambahkeun lulugu jeung/atawa footer pilihan dina kartu.
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<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>
Header kartu tiasa digayakeun ku nambihan .card-header
elemen <h*>
.
Diulas
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<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>
A cutatan well-dipikawanoh, dikandung dina unsur 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>
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<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>
Ukuran
Kartu nganggap euweuh husus width
pikeun ngamimitian, jadi maranéhna bakal 100% lega iwal disebutkeun béda. Anjeun tiasa ngarobah ieu sakumaha diperlukeun ku CSS custom, kelas grid, grid Sass mixins, atawa utilitas.
Ngagunakeun grid markup
Ngagunakeun grid nu, mungkus kartu dina kolom jeung baris sakumaha diperlukeun.
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana waeperlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<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>
Ngagunakeun utiliti
Anggo sakeupeul utilitas ukuran anu sayogi pikeun gancang nyetél lebar kartu.
Judul kartu
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
TombolJudul kartu
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Tombol<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>
Ngagunakeun custom CSS
Anggo CSS khusus dina stylesheets anjeun atanapi salaku gaya inline pikeun nyetél lebar.
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<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>
alignment téks
Anjeun tiasa gancang ngarobih alignment téks tina kartu naon waé-dina sadayana atanapi bagian-bagian khusus-kalayan kelas align téks kami .
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana waeperlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana waeperlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Napigasi
Tambahkeun sababaraha navigasi ka lulugu kartu urang (atawa blok) kalawan komponén nav Bootstrap urang .
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" 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>
perlakuan judul husus
Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.
Kamana wae<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>
Gambar
Kartu ngawengku sababaraha pilihan pikeun gawé bareng gambar. Pilih tina nambahkeun "caps gambar" dina tungtung kartu, overlaying gambar kalawan eusi kartu, atawa ngan saukur embedding gambar dina kartu.
Cap gambar
Sarupa jeung lulugu jeung footer, kartu bisa ngawengku luhur jeung handap "caps gambar" -gambar di luhur atawa handap kartu a.
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. eusi ieu saeutik saeutik deui.
Panungtungan diropéa 3 mins ago
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. eusi ieu saeutik saeutik deui.
Panungtungan diropéa 3 mins ago
<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>
Gambar overlays
Hurungkeun gambar kana latar tukang kartu sareng overlay téks kartu anjeun. Gumantung kana gambar, anjeun tiasa atanapi henteu peryogi gaya tambahan atanapi utilitas.
<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>
Horizontal
Ngagunakeun kombinasi grid jeung kelas utiliti, kartu bisa dijieun horizontal dina cara mobile-friendly jeung responsif. Dina conto di handap ieu, urang nyabut talang grid .g-0
jeung .col-md-*
kelas make pikeun nyieun kartu horizontal di md
breakpoint nu. Pangaluyuan salajengna tiasa diperyogikeun gumantung kana eusi kartu anjeun.
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. eusi ieu saeutik saeutik deui.
Panungtungan diropéa 3 mins ago
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Gaya kartu
Kartu kalebet sababaraha pilihan pikeun ngaropea latar, wates, sareng warnana.
Latar jeung warna
Anggo warna téks sareng utilitas latar pikeun ngarobih tampilan kartu.
Judul kartu primér
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu sekundér
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu kasuksésan
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu bahaya
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu peringatan
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu info
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu lampu
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu poék
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
<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-dark 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-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark 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>
Nepikeun harti kana téknologi anu ngabantosan
Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hidden
kelas.
wates
Paké Utiliti wates pikeun ngarobah ngan border-color
kartu a. Catet yén anjeun tiasa nempatkeun .text-{color}
kelas dina indungna .card
atanapi sawaréh tina eusi kartu sapertos anu dipidangkeun di handap ieu.
Judul kartu primér
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu sekundér
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu kasuksésan
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu bahaya
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu peringatan
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu info
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu lampu
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
Judul kartu poék
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Utiliti Mixins
Anjeun oge bisa ngarobah wates dina header kartu na footer sakumaha diperlukeun, komo nyabut maranéhanana background-color
jeung .bg-transparent
.
Judul kartu kasuksésan
Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.
<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>
perenah kartu
Salian styling eusi dina kartu, Bootstrap ngawengku sababaraha pilihan pikeun peletakan kaluar runtuyan kartu. Samentawis waktos, pilihan perenah ieu henteu acan responsif .
Grup kartu
Paké grup kartu ka kartu ngajadikeun salaku tunggal, unsur napel kalawan lebar sarua jeung kolom jangkungna. Grup kartu mimitian ti ditumpuk jeung dipaké display: flex;
pikeun jadi napel jeung diménsi seragam dimimitian dina sm
breakpoint nu.
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. eusi ieu saeutik saeutik deui.
Panungtungan diropéa 3 mins ago
Judul kartu
Kartu ieu ngagaduhan téks pangrojong di handap salaku pamimpin alami pikeun eusi tambahan.
Panungtungan diropéa 3 mins ago
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. Kartu ieu eusi malah leuwih panjang batan nu munggaran pikeun nembongkeun yen aksi jangkungna sarua.
Panungtungan diropéa 3 mins ago
<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>
Lamun make grup kartu kalawan footers, eusina otomatis baris nepi.
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. eusi ieu saeutik saeutik deui.
Judul kartu
Kartu ieu ngagaduhan téks pangrojong di handap salaku pamimpin alami pikeun eusi tambahan.
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. Kartu ieu eusi malah leuwih panjang batan nu munggaran pikeun nembongkeun yen aksi jangkungna sarua.
<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>
Kartu grid
Anggo sistem grid Bootstrap sareng .row-cols
kelasna pikeun ngontrol sabaraha kolom grid (dibungkus kartu anjeun) anu anjeun tampilkeun per baris. Salaku conto, ieu .row-cols-1
nempatkeun kartu dina hiji kolom, sareng .row-cols-md-2
ngabagi opat kartu kana lebar anu sami dina sababaraha jajar, ti titik putus sedeng ka luhur.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Robah jadi .row-cols-3
tur Anjeun bakal ningali bungkus kartu kaopat.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Lamun anjeun peryogi jangkungna sarua, tambahkeun .h-100
ka kartu. Upami anjeun hoyong jangkung anu sami sacara standar, anjeun tiasa nyetél $card-height: 100%
dina Sass.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
Judul kartu
Ieu kartu pondok.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan.
Judul kartu
Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Kawas grup kartu, footers kartu otomatis baris nepi.
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. eusi ieu saeutik saeutik deui.
Judul kartu
Kartu ieu ngagaduhan téks pangrojong di handap salaku pamimpin alami pikeun eusi tambahan.
Judul kartu
Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun eusi tambahan. Kartu ieu eusi malah leuwih panjang batan nu munggaran pikeun nembongkeun yen aksi jangkungna sarua.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
Masonry
Dina v4
kami dipaké téhnik CSS-hijina pikeun meniru paripolah Masonry -like kolom, tapi téhnik ieu datangna kalawan loba efek samping pikaresepeun . Upami anjeun hoyong gaduh tipe ieu perenah di v5
, Anjeun ngan bisa ngagunakeun Masonry plugin. Masonry henteu kalebet dina Bootstrap , tapi kami parantos ngadamel conto demo pikeun ngabantosan anjeun ngamimitian.
Sass
Variabel
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;