1. Card Groups (Kartu yang Terhubung)
Card groups digunakan untuk menampilkan beberapa kartu dalam satu baris dengan lebar dan tinggi yang sama.
Catatan:
Kartu dalam .card-group akan otomatis memiliki ukuran yang sama.
Mereka akan berjejer secara horizontal jika ruang cukup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Card Group</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="card-group">
<div class="card">
<img src="https://plus.unsplash.com/premium_photo-1713304014666-196deb5c2d57?q=80&w=1962&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="card-img-top" alt="Image 1">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Ini adalah contoh kartu pertama dalam grup.</p>
<p class="card-text"><small class="text-muted">Diperbarui 3 menit lalu</small></p>
</div>
</div>
<div class="card">
<img src="https://plus.unsplash.com/premium_photo-1713304014666-196deb5c2d57?q=80&w=1962&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="card-img-top" alt="Image 2">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Kartu kedua dengan teks lebih pendek.</p>
<p class="card-text"><small class="text-muted">Diperbarui 3 menit lalu</small></p>
</div>
</div>
<div class="card">
<img src="https://plus.unsplash.com/premium_photo-1713304014666-196deb5c2d57?q=80&w=1962&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
class="card-img-top" alt="Image 3">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Kartu ini memiliki lebih banyak teks untuk menunjukkan keseragaman tinggi.</p>
<p class="card-text"><small class="text-muted">Diperbarui 3 menit lalu</small></p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
berikut hasilnya:
2. Grid Cards (Kartu dalam Tata Letak Grid)
Grid cards memungkinkan kita mengatur jumlah kartu dalam satu baris menggunakan kelas .row-cols-*.
Catatan:
row-cols-1: 1 kartu per baris di layar kecil.
row-cols-md-2: 2 kartu per baris di layar sedang ke atas.
row-cols-lg-3: 3 kartu per baris di layar besar ke atas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Cards</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card">
<img src="assets/img/favicon.png" class="card-img-top" alt="Image 1">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Kartu pertama dalam tata letak grid.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="assets/img/favicon.png" class="card-img-top" alt="Image 2">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Kartu kedua dengan teks pendek.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="assets/img/favicon.png" class="card-img-top" alt="Image 3">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Kartu ketiga memiliki teks yang lebih panjang.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="assets/img/favicon.png" class="card-img-top" alt="Image 4">
<div class="card-body">
<h5 class="card-title">Card 4</h5>
<p class="card-text">Kartu keempat dengan teks standar.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
berikut hasilnya:
3. Equal Height Cards (Kartu dengan Tinggi Sama)
Jika ingin semua kartu memiliki tinggi yang sama, tambahkan .h-100 ke setiap kartu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Equal Height Cards</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="assets/img/favicon.png" class="card-img-top" alt="Image 1">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Kartu pertama memiliki teks panjang.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/favicon.png" class="card-img-top" alt="Image 2">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Kartu ini memiliki teks pendek.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/favicon.png" class="card-img-top" alt="Image 3">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Kartu ketiga dengan teks sedang.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
berikut hasilnya:
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Bootstrap #1 Fundamental Bootstrap
2. Belajar Bootstrap #10 CSS Variables Bootstrap
3. Belajar Bootstrap #11 Optimize Bootstrap
4. Belajar Bootstrap #12 Mengenal sistem kolom di Bootstrap
5. Belajar Bootstrap #13 Panduan lengkap gutters di Bootstrap
6. Belajar Bootstrap #14 Penjelasan sederhana utilities untuk layout di Bootstrap
7. Belajar Bootstrap #15 Penjelasan Z-index dalam Bootstrap
8. Belajar Bootstrap #16 Reboot Bootstrap
9. Belajar Bootstrap #17 Typography di Bootstrap
10. Belajar Bootstrap #18 Gambar di Bootstrap
11. Belajar Bootstrap #19 Table di Bootstrap part 1
12. Belajar Bootstrap #2 Alasan menggunakan Bootstrap
13. Belajar Bootstrap #20 Table di Bootstrap part 2
14. Belajar Bootstrap #21 Bootstrap Figures
15. Belajar Bootstrap #22 Penjelasan Form di Bootstrap
16. Belajar Bootstrap #23 Form Controls di Bootstrap
17. Belajar Bootstrap #24 Penjelasan Bootstrap Select
18. Belajar Bootstrap #25 Checkbox dan Radio Button di Bootstrap
19. Belajar Bootstrap #26 Range input di Bootstrap
20. Belajar Bootstrap #27 Input Group di Bootstrap
21. Belajar Bootstrap #28 Penjelasan Floating Labels di Bootstrap
22. Belajar Bootstrap #29 Layout Form di Bootstrap
23. Belajar Bootstrap #3 Persiapan Sebelum Belajar Bootstrap
24. Belajar Bootstrap #30 Validasi Form di bootstrap
25. Belajar Bootstrap #31 Accordion di Bootstrap
26. Belajar Bootstrap #32 Apa itu Bootstrap Alerts?
27. Belajar Bootstrap #33 Apa itu Badges di Bootstrap?
28. Belajar Bootstrap #34 Apa itu Breadcrumb di Bootstrap?
29. Belajar Bootstrap #35 Penggunaan Tombol (Buttons) di Bootstrap
30. Belajar Bootstrap #36 Button Group di Bootstrap
31. Belajar Bootstrap #37 Cards di Bootstrap part 1
32. Belajar Bootstrap #38 Cards di Bootstrap part 2
33. Belajar Bootstrap #39 Cards di Bootstrap part 3
34. Belajar Bootstrap #40 Apa itu Carousel di bootstrap
35. Belajar Bootstrap #41 Close Button di Bootstrap
36. Belajar Bootstrap #42 Apa itu Collapse di Bootstrap
37. Belajar Bootstrap #43 Dropdowns di Bootstrap part 1
38. Belajar Bootstrap #44 Dropdowns di Bootstrap part 2
39. Belajar Bootstrap #45 List Group di Bootstrap
40. Belajar Bootstrap #46 Modal di Bootstrap
41. Belajar Bootstrap #47 Navs dan tabs di Bootstrap
42. Belajar Bootstrap #48 Navbar di Bootstrap part 1
43. Belajar Bootstrap #49 Navbar di Bootstrap part 2
44. Belajar Bootstrap #5 Menggunnakan Bootstrap lewat unduhan manual
45. Belajar Bootstrap #50 Offcanvas di Bootstrap
46. Belajar Bootstrap #51 Pagination di Bootstrap
47. Belajar Bootstrap #52 Popover di Bootstrap
48. Belajar Bootstrap #53 Progress di Bootstrap
49. Belajar Bootstrap #54 Apa itu Scrollspy
50. Belajar Bootstrap #55 Bootstrap Spinners
51. Belajar Bootstrap #56 Toats di Bootstrap
52. Belajar Bootstrap #57 Tooltips di Bootstrap
53. Belajar Bootstrap #58 Clearfix dalam Bootstrap
54. Belajar Bootstrap #59 Colored Links di Bootstrap
55. Belajar Bootstrap #6 Cara Membuat Container Pada Bootstrap
56. Belajar Bootstrap #60 Ratios di Bootstrap
57. Belajar Bootstrap #61 Position Bootstrap
58. Belajar Bootstrap #62 Visually Hidden Bootstrap
59. Belajar Bootstrap #63 Stretched Link Bootstrap
60. Belajar Bootstrap #64 Text Truncation di Bootstrap
61. Belajar Bootstrap #65 Utility API di Bootstrap
62. Belajar Bootstrap #66 Background di Bootstrap
63. Belajar Bootstrap #67 Border di Bootstrap
64. Belajar Bootstrap #68 Bootstrap Colors
65. Belajar Bootstrap #69 Display Property di Bootstrap
66. Belajar Bootstrap #7 Memahami dan menerapkan grid
67. Belajar Bootstrap #70 Flexbox di Bootstrap
68. Belajar Bootstrap #71 Float Utility di Bootstrap
69. Belajar Bootstrap #72 Bootstrap Interactions
70. Belajar Bootstrap #73 Overflow di Bootstrap
71. Belajar Bootstrap #74 Position dalam Bootstrap
72. Belajar Bootstrap #75 Shadows di Bootstrap
73. Belajar Bootstrap #76 Bootstrap Sizing
74. Belajar Bootstrap #77 Spacing di Bootstrap
75. Belajar Bootstrap #78 Text Utilities di Bootstrap
76. Belajar Bootstrap #79 Vertical Alignment di Bootstrap
77. Belajar Bootstrap #8 Warna Tema dan Cara Penggunaannya
78. Belajar Bootstrap #80 Visibility di Bootstrap
