Pada kesempatan kali ini saya akan menjelaskan cara menggunakan card bootstrap. Perlu teman-teman ketahui sebelumnya, Card adalah element bootstrap yang dapat kalian perluas seperti untuk membuat tampilan produk toko online, untuk menampilkan profile dan masih banyak lagi yang lainnya. Namun pada contoh yang akan kita buat disini nantinya adalah untuk membuat tampilan users profile, dan biasanya untuk tampilan tersebut dibuat di backend maupun frontend. Berikut contoh kodenya :
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Menggunakan CSS Attribute Selectors</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="col-md-3"> <div class="card"> <img class="card-img-top" src="https://www.w3schools.com/bootstrap4/img_avatar3.png" alt="image"> <div class="card-body bg-primary text-white"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p> <a href="#" class="btn btn-success">See Profile</a> </div> </div> </div> </div> </body> </html> |
Sampai disini penjelasan saya mengenai cara menggunakan card bootstrap, semoga bermanfaat.