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 .

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.

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.

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>

Lulugu jeung footer

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

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

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

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.

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="..." 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 mimitian ti ditumpuk jeung dipaké display: flex;pikeun jadi napel jeung diménsi seragam dimimitian dina smbreakpoint nu.

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

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

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

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

Panungtungan diropéa 3 mins ago

Judul kartu

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.

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

Judul kartu

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

Panungtungan diropéa 3 mins ago

Judul kartu

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.

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

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

Panungtungan diropéa 3 mins ago

Judul kartu

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.

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

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

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

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.

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

Batur kawentar dina Judul Sumber

Judul kartu

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

Panungtungan diropéa 3 mins ago

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

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

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

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>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

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

Kartu

Ngeunaan

Contona

Judul kartu

Jenis eusi

Awak

Judul, téks, sareng tautan

Judul kartu

Subjudul kartu

Gambar

Daptar grup

Tilelep dapur

Judul kartu

Lulugu jeung footer

perlakuan judul husus

Diulas

perlakuan judul husus

perlakuan judul husus

Ukuran

Ngagunakeun grid markup

perlakuan judul husus

perlakuan judul husus

Ngagunakeun utiliti

Judul kartu

Judul kartu

Ngagunakeun custom CSS

perlakuan judul husus

alignment téks

perlakuan judul husus

perlakuan judul husus

perlakuan judul husus

Napigasi

perlakuan judul husus

perlakuan judul husus

Gambar

Cap gambar

Judul kartu

Judul kartu

Gambar overlays

Judul kartu

Horizontal

Judul kartu

Gaya kartu

Latar jeung warna

Judul kartu primér

Judul kartu sekundér

Judul kartu kasuksésan

Judul kartu bahaya

Judul kartu peringatan

Judul kartu info

Judul kartu lampu

Judul kartu poék

Nepikeun harti kana téknologi anu ngabantosan

wates

Judul kartu primér

Judul kartu sekundér

Judul kartu kasuksésan

Judul kartu bahaya

Judul kartu peringatan

Judul kartu info

Judul kartu lampu

Judul kartu poék

Utiliti Mixins

Judul kartu kasuksésan

perenah kartu

Grup kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

dek kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Kartu grid