Cara Membuat Card Menu pada HTML Dengan Bootstrap 4 – hai sobat blogger ketemu lagi dengan saya dewankomputer dan pada kesempatan kali ini saya akan memposting tentang bootstrap lagi yaitu cara membuat menu card. Card menu ini wajib dipelajari jika sobat ingin membuat suatu website karena sekarang pasti setiap website mempunyai menu yang berbentuk card seperti pada blog, website company, terlebih lagi e-commerceyang menampilkan produknya pada beranda pasti menggunakan tampilan Card. Untuk membuatnya tentunya sangat mudah loh sobat tidak perlu membuat css dan lain-lainnya. Sobat hanya perlu memanggil nama classnya saja.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Mengenal Bootstrap Typography pada HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Langsung saja tidak usah bertele-tele karena ada banyak jenis card nanti yang akan dibahas. Caranya tinggal sobat ikuti contoh-contoh dibawah.
1. Card Standar
Untuk penggunaan card yang standar ini hanya class body saja. Berikut adalah contoh penggunaannya :
|
1 2 3 4 5 |
<div class="card"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> |
Hasilnya :
2. Card Dengan Header & Button
Untuk card jenis ini ada sedikit tambahan yaitu kita menambahkan header dan button pada bodynya. Contoh penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 |
<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> |
Hasilnya :
3. Card dengan Judul, Teks, Link
Berbeda dengan card diatas yang menggunakan header, card ini kita hanya mengisinya pada body dengan Judul, Subjudul, Teks dan Link. Contoh penggunaanya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="card"> <div class="card-body"> <h5 class="card-title">Judul Card</h5> <h6 class="card-subtitle mb-2 text-muted">Subtitle Card</h6> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div> |
Hasilnya :
4. Card dengan Header dan Footer
Mirip dengan Card nomor 2, kali ini kita akan membuat card dengan tambahan footer. Cara penggunaannya seperti contoh berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Hasilnya :
5. Card Dengan Gambar
Card ini adalah yang paling sering diguakan jika kita membuat blog/toko online. Berikut adalah cara membuat card dengan gambar
|
1 2 3 4 5 6 7 8 |
<div class="card" style="width: 18rem;"> <img src="dk2.png" class="card-img-top" alt="gambar" > <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> |
Hasilnya :
6. Card dengan gambar dan list
Berbeda dengan contoh sebelumnya, pada card jenis ini kite membuatnya menggunakan gambar dan list. Tentunya card jenis ini juga bisa dipadukan dengan footer atau link. Cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="card" style="width: 18rem;"> <img src="dk2.png" class="card-img-top" alt="gambar"> <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">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div> |
Hasilnya :
7. Card Listgroup
Card ini berisi list group dan tentunya kita bisa menyatukannya dengan header dan footer, cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<h4 class="mt-4">List Group Standar</h4> <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> <h4 class="mt-4">List Group dengan Header</h4> <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 class="card-footer text-muted"> 2 days ago </div> </div> |
Hasilnya :
8. Card dengan Aligment
Tidak hanya paragraf, pada card kita juga bisa menambahkannya dengan text aligment. Contoh penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="row"> <div class="col-sm-4"> <div class="card"> <div class="card-body"> <h5 class="card-title">Text Align Left</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-4"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title">Text Align Center</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-4"> <div class="card text-right"> <div class="card-body"> <h5 class="card-title">Text Align Right</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> |
Hasilnya :
9. Card dengan Blackquote + Aligment
Kita bisa menggabungkan card ini dengan blackquote dan aligment, cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="row"> <div class="col-sm-6"> <h4 class="bg-danger text-white" align="center">Card + Blackquote + Align Left</h4> <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> </div> <div class="col-sm-6"> <h4 class="bg-danger text-white" align="center">Card + Blackquote + Align Right</h4> <div class="card text-right"> <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> </div> </div> |
Hasilnya :
10. Card Navigation
Card juga bisa digabungkan dengan navigasi dan juga dengan icon. ika sobat ingin menambahkannya dengan icon maka sobat juga harus memasukkan librari css dari fontawesome atau lainnya. Jika pada contoh ini seperti yang dicontohkan diatas kita menggunakan fontawesome. Tentunya jika sobat tidak memasukkan librari ini maka tidak akan muncul iconnya. Berikut adalah cara penggunaannya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div class="row"> <div class="col-sm-6"> <h4 class="bg-danger text-white" align="center">Navigation 1</h4> <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> </div> <div class="col-sm-6"> <h4 class="bg-danger text-white" align="center">Navigation 2</h4> <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="#"><i class="fa fa-check"></i> Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-car"></i> Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"><i class="fa fa-window-close"></i> 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> </div> </div> |
Maka hasilnya :
11. Card dengan Gambar Bawah
Selain dengan gambar diatas, kita juga bisa meletakkan gambarnya dibawah. Cara penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 |
<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="dk2.png" class="card-img-top" alt="gambar"> </div> |
Hasilnya :
12. Card Image Horizontal
Selain kita bisa membuat card dengan gambar diatas dan gambar dibawah, kita juga bisa membuat horisontal. Kita juga bisa meletakkan gambar dikanan ataupun dikiri. Berikut adalah contoh penggunaannya :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="card mb-3" style="max-width: 540px;"> <div class="row no-gutters"> <div class="col-md-4"> <img src="dk2.png" class="card-img" alt="gambar" height="100%"> </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> <div class="card mb-3" style="max-width: 540px;"> <div class="row no-gutters"> <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 class="col-md-4"> <img src="dk2.png" class="card-img" alt="gambar" height="100%"> </div> </div> </div> |
Hasilnya :
13. Card Styles
Seperti elemen bootstrap lainnya, kita juga bisa memberikan style atau warna standar bawaan bootstrap pada card. Contoh penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<div class="row"> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> </div> </div> |
Hasilnya :
14. Card Border
Selain kita bisa memberikan warna, kita juga bisa merubah warna bordernya. Cara penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<div class="row"> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> <div class="col-sm-3"> <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> </div> </div> |
Hasilnya :
15. Card Mixing
Kita bisa mengubah/menggabungkan card style/card border, selain itu kita juga bisa menjadikan gambar sebagai background card dan ada teks diatasnya atau image overlay. Contoh penggunaannya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="row"> <div class="col-sm-4"> <div class="card mb-3"> <div class="card-header text-white bg-primary">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 class="card-footer text-white bg-primary">Footer</div> </div> </div> <div class="col-sm-4"> <div class="card border-success mb-3"> <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> </div> <div class="col-sm-4"> <div class="card bg-dark text-white"> <img src="dk2.png" class="card-img" alt="gambar"> <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> </div> </div> |
Hasilnya :
16. Card group
Jik kita menggunakan card biasa dan jika judulnya mempunyai panjang yang berbeda-beda maka height/tinggi dari card tersebut akan berbeda-beda juga. Oleh karena itu jika sobat ingin membuat tinggi card sama semua setiap baris/rownya maka sobat bisa menggunakan card jenis ini. Cara menyamakan tinggi card adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<div class="row"> <div class="col-sm-12"> <div class="card-group"> <div class="card"> <img src="dk2.png" class="card-img-top" alt="gambar"> <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="dk2.png" class="card-img-top" alt="gambar"> <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="dk2.png" class="card-img-top" alt="gambar"> <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 class="card"> <img src="dk2.png" class="card-img-top" alt="gambar"> <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="dk2.png" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action. </p> </div> <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div> </div> </div> </div> </div> |
Hasilnya :
17. Card Deck
Selain card group, agar bisa menyamakan tinggi kolomnya sobat juga bisa menggunakan dengan contoh berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="row"> <div class="col-sm-12"> <div class="card-deck"> <div class="card"> <img src="dk2.png" class="card-img-top" alt="gambar"> <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="dk2.png" class="card-img-top" alt="gambar"> <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="dk2.png" class="card-img-top" alt="gambar"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> </div> </div> </div> |
Hasilnya :
Untuk membuat card menjadi dua, tiga, empat atau lima bahkan lebih jumlah card per kolomnya, sobat tinggal tambahkan tag <div class=”card”>…</div> diantara tag <div class=”col-sm-12″>…</div>.
Sobat bisa menggabungkan card ini dengan elemen bootstrap lainnya sesuai kreasi sobat. Tentunya setiap orang mempunyai kreasi yang berbeda-beda. Sekian postingan saya tentang Membuat Card Menu pada HTML Dengan Bootstrap 4. Jika ada pertanyaan atau masih bingung maka sobat bisa tinggalkan pertanyaan pada kolom komentar dibawah. Mohon maaf jika ada salah-salah kata.
Baca juga :
Cara Menampilkan Data Pada Card Dinamis dari Database MySQL pada PHP
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :