Kertu

Kertu Bootstrap nyedhiyakake wadhah konten sing fleksibel lan bisa ditambah kanthi macem-macem varian lan pilihan.

Babagan

Kertu minangka wadhah isi sing fleksibel lan bisa diperluas. Iki kalebu opsi kanggo header lan footer, macem-macem konten, warna latar mburi kontekstual, lan opsi tampilan sing kuat. Yen sampeyan wis kenal karo Bootstrap 3, kertu ngganti panel, sumur, lan gambar cilik lawas. Fungsi sing padha karo komponen kasebut kasedhiya minangka kelas modifier kanggo kertu.

Tuladha

Kertu dibangun kanthi markup lan gaya sethithik, nanging isih bisa ngatur kontrol lan kustomisasi. Dibangun nganggo flexbox, nawakake keselarasan sing gampang lan nyampur karo komponen Bootstrap liyane. Dheweke ora duwe marginstandar, mula gunakake utilitas spasi yen perlu.

Ing ngisor iki conto kertu dhasar kanthi isi campuran lan jembar tetep. Kertu ora duwe jembar sing tetep kanggo diwiwiti, mula kanthi alami bakal ngisi jembar lengkap unsur induke. Iki gampang disesuaikan karo macem-macem pilihan ukuran .

Judhul kertu

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

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

Jinis isi

Kertu ndhukung macem-macem konten, kalebu gambar, teks, grup dhaptar, pranala, lan liya-liyane. Ing ngisor iki ana conto sing didhukung.

awak

Blok bangunan kertu yaiku .card-body. Gunakake kapan sampeyan butuh bagean empuk ing kertu.

Iki sawetara teks ing awak kertu.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Judhul, teks, lan pranala

Judhul kertu digunakake kanthi nambahake .card-titletag <h*>. Kanthi cara sing padha, pranala ditambahake lan diselehake ing jejere kanthi nambahake .card-linktag <a>.

Subtitle digunakake kanthi nambahake .card-subtitletag <h*>. Yen .card-titlelan .card-subtitleitem diselehake ing .card-bodyitem, judhul kertu lan subtitle didadekake siji apik.

Judhul kertu

Subtitle kertu

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Link kertu Link liyane

<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-toppanggonan gambar ing ndhuwur kertu. Kanthi .card-text, teks bisa ditambahake menyang kertu. Teks ing njero .card-textuga bisa ditata nganggo tag HTML standar.

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

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

Dhaptar klompok

Gawe dhaptar isi ing kertu kanthi klompok dhaptar siram.

Cras justo odio
Dapibus ac facilisis ing
Vestibulum lan 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>

Featured

Cras justo odio
Dapibus ac facilisis ing
Vestibulum lan 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>

Cras justo odio
Dapibus ac facilisis ing
Vestibulum lan eros

Foter kertu

<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 class="card-footer">
    Card footer
  </div>
</div>

Sink pawon

Nyampur lan cocog macem-macem jinis isi kanggo nggawe kertu sing perlu, utawa uncalan kabeh ing kono. Ditampilake ing ngisor iki yaiku gaya gambar, blok, gaya teks, lan klompok dhaptar - kabeh dibungkus kertu sing ambane tetep.

Judhul kertu

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Cras justo odio
Dapibus ac facilisis ing
Vestibulum lan eros

Link kertu Link liyane

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Header lan footer

Tambah header lan/utawa footer opsional ing kertu.

Featured

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

Menyang ngendi 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 kertu bisa ditata kanthi nambahake .card-headerunsur <h*>.

Featured

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

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

kutipan

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

Wong sing misuwur ing Judhul 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>

Featured

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

Menyang ngendi wae

2 dina kepungkur

<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

Kertu nganggep ora ana sing spesifik widthkanggo miwiti, mula bakal dadi 100% amba kajaba nyatakake. Sampeyan bisa ngganti iki yen perlu nganggo CSS khusus, kelas kothak, campuran Sass kothak, utawa utilitas.

Nggunakake grid markup

Nggunakake kothak, bungkus kertu ing kolom lan larik yen perlu.

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

Menyang ngendi wae

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

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

Nggunakake utilitas

Gunakake sawetara utilitas ukuran sing kasedhiya kanggo nyetel jembar kertu kanthi cepet.

Judhul kertu

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

Tombol

Judhul kertu

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten 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>

Nggunakake CSS khusus

Gunakake CSS khusus ing lembar gaya utawa minangka gaya inline kanggo nyetel ambane.

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

Menyang ngendi 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 teks

Sampeyan bisa kanthi cepet ngganti keselarasan teks kertu apa wae - kabeh utawa bagean tartamtu - kanthi kelas nyelarasake teks .

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

Menyang ngendi wae

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

Menyang ngendi wae

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

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

Tambah sawetara pandhu arah menyang header kertu (utawa pamblokiran) karo komponen nav Bootstrap .

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

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

Perawatan judhul khusus

Kanthi teks panyengkuyung ing ngisor iki minangka timbal alami kanggo konten tambahan.

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

Kertu kalebu sawetara opsi kanggo nggarap gambar. Pilih saka nambahi "tutup gambar" ing salah siji mburi kertu, overlaying gambar karo isi kertu, utawa mung nampilaké gambar ing kertu.

Gambar caps

Kaya header lan footer, kertu bisa kalebu "tutup gambar" ndhuwur lan ngisor - gambar ing ndhuwur utawa ngisor kertu.

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

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

Ganti gambar dadi latar mburi kertu lan overlay teks kertu sampeyan. Gumantung ing gambar, sampeyan bisa uga ora mbutuhake gaya utawa keperluan tambahan.

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

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

Elinga yen isi ngirim ora luwih gedhe tinimbang dhuwur gambar. Yen isi luwih gedhe tinimbang gambar, isi bakal ditampilake ing njaba gambar.

Horisontal

Nggunakake kombinasi kelas kothak lan sarana, kertu bisa digawe horisontal kanthi cara sing ramah seluler lan responsif. Ing conto ing ngisor iki, kita mbusak talang kothak .no-gutterslan nggunakake .col-md-*kelas kanggo nggawe kertu horisontal ing mdbreakpoint. Pangaturan liyane bisa uga dibutuhake gumantung isi kertu sampeyan.

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

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

Kertu kalebu macem-macem pilihan kanggo ngatur latar mburi, wates, lan warna.

Latar mburi lan werna

Gunakake utilitas teks lan latar mburi kanggo ngganti tampilan kertu.

Header

Judhul kertu utami

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu sekunder

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu sukses

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu bebaya

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu peringatan

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu info

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu cahya

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu peteng

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

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

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.

wates

Gunakake keperluan wates kanggo ngganti mung border-colorkertu. Elinga yen sampeyan bisa sijine .text-{color}kelas ing wong tuwa .cardutawa subset saka isi kertu minangka kapacak ing ngisor iki.

Header

Judhul kertu utami

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu sekunder

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu sukses

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu bebaya

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu peringatan

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu info

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu cahya

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

Header

Judhul kertu peteng

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

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

Utilitas Mixins

Sampeyan uga bisa ngganti wates ing header kertu lan sikil yen perlu, lan malah mbusak background-colorkaro .bg-transparent.

Header

Judhul kertu sukses

Sawetara conto teks cepet kanggo mbangun judhul kertu lan nggawe akeh isi kertu.

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>

tata letak kertu

Saliyane nggawe konten ing kertu, Bootstrap kalebu sawetara pilihan kanggo nggawe seri kertu. Saiki, opsi tata letak iki durung responsif .

Klompok kertu

Gunakake kelompok kertu kanggo nerjemahake kertu minangka siji, unsur ditempelake karo jembaré witjaksono lan dhuwur kolom. Klompok kertu diwiwiti kanthi ditumpuk lan digunakake display: flex;kanggo dipasang kanthi ukuran seragam wiwit ing smbreakpoint.

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Kertu iki nduweni konten sing luwih dawa tinimbang sing pisanan nuduhake aksi dhuwur sing padha.

Dianyari pungkasan 3 menit kepungkur

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

Nalika nggunakake klompok kertu karo footer, isi bakal kanthi otomatis baris munggah.

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Dianyari pungkasan 3 menit kepungkur

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

Deck kertu

Butuh pesawat saka witjaksono jembaré lan dhuwur kertu sing ora ditempelake siji liyane? Gunakake dek kertu.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Dianyari pungkasan 3 menit kepungkur

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

Kaya karo klompok kertu, sikil kertu ing dek bakal kanthi otomatis.

Judhul kertu

Iki minangka kertu sing luwih akeh kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.

Dianyari pungkasan 3 menit kepungkur

Judhul kertu

Dianyari pungkasan 3 menit kepungkur

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

kertu kothak

Gunakake sistem kothak Bootstrap lan .row-colskelas kanggo ngontrol jumlah kolom kothak (dibungkus kertu) sampeyan nuduhake saben baris. Contone, iki .row-cols-1laying metu kertu ing siji kolom, lan .row-cols-md-2pamisah papat SIM kanggo jembaré witjaksono antarane sawetara larik, saka breakpoint medium munggah.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

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

Ganti dadi .row-cols-3lan sampeyan bakal weruh bungkus kertu papat.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

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

Nalika sampeyan perlu dhuwur witjaksono, nambah .h-100menyang kertu. Yen sampeyan pengin dhuwur witjaksono minangka standar, sampeyan bisa nyetel $card-height: 100%ing Sass.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

Judhul kertu

Iki kertu singkat.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan.

Judhul kertu

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

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

Kertu bisa diatur dadi kolom kaya Masonry kanthi mung CSS kanthi mbungkus .card-columns. Kertu dibangun nganggo sifat CSS columntinimbang flexbox kanggo keselarasan sing luwih gampang. Kertu diurutake saka ndhuwur mudhun lan kiwa menyang tengen.

Kepala munggah! Jarak tempuh sampeyan karo kolom kertu bisa beda-beda. Kanggo nyegah kertu-kertu sing nembus kolom, kita kudu nyetel kertu kasebut display: inline-blockminangka column-break-inside: avoidsolusi antipeluru.

Judhul kertu sing mbungkus menyang baris anyar

Iki minangka kertu sing luwih dawa kanthi teks dhukungan ing ngisor iki minangka timbal alami kanggo konten tambahan. Isi iki rada suwe.

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

Wong sing misuwur ing Judhul Sumber

Judhul kertu

Kertu iki nduweni teks pendukung ing ngisor iki minangka timbal alami kanggo isi tambahan.

Dianyari pungkasan 3 menit kepungkur

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

Wong sing misuwur ing Judhul Sumber

Judhul kertu

Kertu iki nduweni judhul biasa lan paragraf teks ing ngisor iki.

Dianyari pungkasan 3 menit kepungkur

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

Wong sing misuwur ing Judhul Sumber

Judhul kertu

Iki kertu liyane kanthi judhul lan teks dhukungan ing ngisor iki. Kertu iki nduweni isi tambahan supaya rada dhuwur sakabèhé.

Dianyari pungkasan 3 menit kepungkur

<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 kertu uga bisa ditambahi lan disesuaikan karo sawetara kode tambahan. Ditampilake ing ngisor iki minangka extension saka .card-columnskelas nggunakake CSS sing padha digunakake-kolom CSS- kanggo generate pesawat saka undakan responsif kanggo ngganti nomer kolom.

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

Kertu

Babagan

Tuladha

Judhul kertu

Jinis isi

awak

Judhul, teks, lan pranala

Judhul kertu

Subtitle kertu

Gambar

Dhaptar klompok

Sink pawon

Judhul kertu

Header lan footer

Perawatan judhul khusus

Featured

Perawatan judhul khusus

Perawatan judhul khusus

ukuran

Nggunakake grid markup

Perawatan judhul khusus

Perawatan judhul khusus

Nggunakake utilitas

Judhul kertu

Judhul kertu

Nggunakake CSS khusus

Perawatan judhul khusus

alignment teks

Perawatan judhul khusus

Perawatan judhul khusus

Perawatan judhul khusus

Pandhu arah

Perawatan judhul khusus

Perawatan judhul khusus

Gambar

Gambar caps

Judhul kertu

Judhul kertu

Gambar overlay

Judhul kertu

Horisontal

Judhul kertu

Gaya kertu

Latar mburi lan werna

Judhul kertu utami

Judhul kertu sekunder

Judhul kertu sukses

Judhul kertu bebaya

Judhul kertu peringatan

Judhul kertu info

Judhul kertu cahya

Judhul kertu peteng

Nuduhake makna kanggo teknologi assistive

wates

Judhul kertu utami

Judhul kertu sekunder

Judhul kertu sukses

Judhul kertu bebaya

Judhul kertu peringatan

Judhul kertu info

Judhul kertu cahya

Judhul kertu peteng

Utilitas Mixins

Judhul kertu sukses

tata letak kertu

Klompok kertu

Judhul kertu

Judhul kertu

Judhul kertu

Judhul kertu

Judhul kertu

Judhul kertu

Deck kertu

Judhul kertu

Judhul kertu

Judhul kertu

Judhul kertu

Judhul kertu

Judhul kertu

kertu kothak