Source

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

  • Cras justo odio
  • Dapibus ac facilisis di
  • Vestibulum jeung 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>
Diulas
  • Cras justo odio
  • Dapibus ac facilisis di
  • Vestibulum jeung 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>

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.

  • Cras justo odio
  • Dapibus ac facilisis di
  • Vestibulum jeung eros
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">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>

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante.

Batur kawentar dina Judul Sumber 
<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>
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-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>

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

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-top" 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 .no-guttersjeung .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 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>

Gaya kartu

Kartu kalebet sababaraha pilihan pikeun ngaropea latar, wates, sareng warnana.

Latar jeung warna

Anggo téks sareng latar tukang 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-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>
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 .sr-onlykelas.

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

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 ngagunakeun display: flex;pikeun ngahontal ukuran seragam maranéhanana.

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>

dek kartu

Peryogi sakumpulan kartu lebar sareng jangkungna anu sami anu henteu napel? Paké dek kartu.

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.

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

Kawas kalawan grup kartu, footers kartu dina decks 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-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>

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

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

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

kolom kartu

Kartu bisa diatur kana Masonry -like kolom kalawan ngan CSS ku wrapping aranjeunna dina .card-columns. Kartu diwangun ku columnsipat CSS tinimbang flexbox pikeun alignment gampang. Kartu maréntahkeun ti luhur ka handap sarta kénca ka katuhu.

Mastaka tegak! mileage anjeun kalawan kolom kartu bisa rupa-rupa. Pikeun nyegah kartu ngarecah kolom, urang kedah nyetél éta display: inline-blocksalaku column-break-inside: avoidsolusi anti peluru.

Placeholder Image cap
Judul kartu nu wraps kana garis anyar

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante.

Batur kawentar dina Judul Sumber
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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Batur kawentar dina Judul Sumber
Judul kartu

Kartu ieu ngagaduhan judul biasa sareng paragraf pondok téks di handapna.

Panungtungan diropéa 3 mins ago

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante.

Batur kawentar dina Judul Sumber
Judul kartu

Ieu kartu sejen kalawan judul jeung téks ngarojong handap. Kartu ieu ngagaduhan sababaraha eusi tambahan supados rada jangkung sadayana.

Panungtungan diropéa 3 mins ago

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

Kolom kartu ogé tiasa diperpanjang sareng disaluyukeun sareng sababaraha kode tambahan. Ditémbongkeun di handap mangrupa extension .card-columnskelas ngagunakeun CSS sarua kami nganggo-kolom CSS- pikeun ngahasilkeun susunan tiers responsif pikeun ngarobah jumlah kolom.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}