Luncat ka eusi utama Luncat ka navigasi docs
in English

Kartu

Kartu Bootstrap nyadiakeun wadah eusi fléksibel tur extensible kalawan sababaraha varian sarta pilihan.

Dina kaca ieu

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

Placeholder Image cap
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.

Ieu sababaraha téks dina awak kartu. 
<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-titletag <h*>. Dina cara nu sarua, Tumbu ditambahkeun jeung disimpen di gigireun silih ku nambahkeun .card-linkkana <a>tag.

Subtitles dipaké ku nambahkeun a .card-subtitleka <h*>tag. Lamun .card-titlejeung .card-subtitleitem nu disimpen dina .card-bodyitem, 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-topnempatkeun hiji gambar ka luhureun kartu. Kalawan .card-text, téks bisa ditambahkeun kana kartu. Téks di jero .card-textogé tiasa digayakeun sareng tag HTML standar.

Placeholder Image cap

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>
Diulas
  • 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
footer kartu 
<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.

Placeholder Image cap
Judul kartu

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

  • Hiji barang
  • Barang kadua
  • Item katilu
Link kartu Link séjén 
<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>

Tambahkeun lulugu jeung/atawa footer pilihan dina kartu.

Diulas
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-headerelemen <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>
cutatan

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

Batur kawentar dina Judul Sumber 
<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>
Diulas
perlakuan judul husus

Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.

Kamana wae
2 poé katukang 
<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 widthpikeun 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 wae
perlakuan 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.

Tombol
Judul 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 wae
perlakuan judul husus

Kalayan téks pangrojong di handap ieu salaku kalungguhan alami pikeun eusi tambahan.

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

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

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

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén 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 kontén tambahan. eusi ieu saeutik saeutik deui.

Panungtungan diropéa 3 mins ago

Placeholder Image cap 
<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.

Placeholder Card image
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.

Panungtungan diropéa 3 mins ago

<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>
Catet yén eusi henteu kedah langkung ageung tibatan jangkungna gambar. Lamun eusi leuwih badag batan gambar eusi bakal dipintonkeun di luar gambar.

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-0jeung .col-md-*kelas make pikeun nyieun kartu horizontal di mdbreakpoint nu. Pangaluyuan salajengna tiasa diperyogikeun gumantung kana eusi kartu anjeun.

Placeholder Image
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén 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.

lulugu
Judul kartu primér

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu sekundér

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu kasuksésan

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu bahaya

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu peringatan

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu info

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu lampu

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

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

wates

Paké Utiliti wates pikeun ngarobah ngan border-colorkartu a. Catet yén anjeun tiasa nempatkeun .text-{color}kelas dina indungna .cardatanapi sawaréh tina eusi kartu sapertos anu dipidangkeun di handap ieu.

lulugu
Judul kartu primér

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu sekundér

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu kasuksésan

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu bahaya

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu peringatan

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu info

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
Judul kartu lampu

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

lulugu
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-colorjeung .bg-transparent.

lulugu
Judul kartu kasuksésan

Sababaraha conto téks gancang pikeun ngawangun dina judul kartu sareng ngadamel seueur eusi kartu.

Footer 
<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 smbreakpoint nu.

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.

Panungtungan diropéa 3 mins ago

Placeholder Image cap
Judul kartu

Kartu ieu ngagaduhan téks pangrojong di handap salaku pamimpin alami pikeun eusi tambahan.

Panungtungan diropéa 3 mins ago

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén 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.

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.

Panungtungan diropéa 3 mins ago
Placeholder Image cap
Judul kartu

Kartu ieu ngagaduhan téks pangrojong di handap salaku pamimpin alami pikeun eusi tambahan.

Panungtungan diropéa 3 mins ago
Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén 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>
    </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-colskelasna pikeun ngontrol sabaraha kolom grid (dibungkus kartu anjeun) anu anjeun tampilkeun per baris. Salaku conto, ieu .row-cols-1nempatkeun kartu dina hiji kolom, sareng .row-cols-md-2ngabagi opat kartu kana lebar anu sami dina sababaraha jajar, ti titik putus sedeng ka luhur.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan.

Placeholder Image cap
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-3tur Anjeun bakal ningali bungkus kartu kaopat.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan.

Placeholder Image cap
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-100ka kartu. Upami anjeun hoyong jangkung anu sami sacara standar, anjeun tiasa nyetél $card-height: 100%dina Sass.

Placeholder Image cap
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.

Placeholder Image cap
Judul kartu

Ieu kartu pondok.

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung panjang kalayan téks pangrojong di handap ieu salaku pamimpin alami pikeun kontén tambahan.

Placeholder Image cap
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.

Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén tambahan. eusi ieu saeutik saeutik deui.

Panungtungan diropéa 3 mins ago
Placeholder Image cap
Judul kartu

Kartu ieu ngagaduhan téks pangrojong di handap salaku pamimpin alami pikeun eusi tambahan.

Panungtungan diropéa 3 mins ago
Placeholder Image cap
Judul kartu

Ieu mangrupikeun kartu anu langkung lega kalayan téks pangrojong di handap ieu salaku pitunjuk alami pikeun kontén tambahan. Kartu ieu eusi malah leuwih panjang batan nu munggaran pikeun nembongkeun yen aksi jangkungna sarua.

Panungtungan diropéa 3 mins ago 
<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 v4kami 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-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$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;