Cards Bootstrap: Bootstrap Tutorial #28

Kembali lagi di tutorial bootstrap ke 28, yang kali ini kita akan membahas mengenai komponen bootstrap yaitu Cards.

Card adalah salah satu komponen bootstrap yang fungsi utama nya sebagai wadah bagi komponen lain. Card pada botstrap memiliki banyak komponen didalamnya seperti header, footer, bagian konten, warna latar, sampai gambar. Card pada bootstrap versi 4 merupakan pengganti dari komponen panel, wells, dan thumbnails pada bootstrap versi 3.

Bagian pokok dari card sendiri ada 3 bagian yaitu Header (untuk menaruh judul dari konten card), konten (berisi teks, link atau gambar), dan Footer (bagian ini berisi keterangan pelengkap).

Section Artikel

1 Basic Card
2 Contextual card
3 Judul dan Link Card
4 Card Bergambar
5 Kolom Card
6 Card deck
7 Card sebagai Menu Navigasi
8 Card Border

Basic Card

Seperti komponen botstrap lainnya Card dan komponennya dibuat menggunakan class-class yang tersedia bada bootstrap (khususnya versi 4). Card dasar atau basic dibuat dengan menambahkan class .card pada tag <div> sebagai penandanya. Untuk membuat headernya kita tinggal menambahkan class .card-header pada tag <div>, untuk bagian kontennya silahkan teman- teman tambahkan class .card-body pada element <div> dan yang terakhir adalah untuk footernya silahkan memakai class .card-footer yang juga biasa ditempatkan dalam element <div>.

Contoh sederhananya adalah seperti dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Card Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Ini adalah contoh Card bootstrap</h2>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
  </div>
</div>

</body>
</html>

Contextual card

Diatas sudah saya singgung mengenai pemberian warna pada card bootstrap, pada bagian ini akan saya jelaskan mengenai hal tersebut. Sebelum membahas ini juga saya harap teman – teman sudah membaca tutorial sebelumnya yaitu Warna di Bootstrap: Bootstrap Tutorial #6, Karena akan sangat berkaitan diantara kedua hal ini.

Singkatnya ada beberapa class untuk memberi warna pada background yaitu:

Class	Warna
`.bg-primary`	warna background biru muda
`.bg-success`	warna background hijau
`.bg-info`	warna background biru tua
`.bg-warning`	warna background kuning
`.bg-danger`	warna background merah
`.bg-secondary`	warna background abu-abu
`.bg-dark`	warna background gelap/abu-abu tua
`.bg-light`	warna background silver

tabel warna

Selain memberi warna pada background kita juga dapat memberi warna tulisannya dengan class .text-white untuk tulisan berwarna puih dan class .text-dark untuk tulisan berwarna hitam.

Contoh nya adalah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>

Judul dan Link Card

Untuk membuat Judul tambahkan class .card-title pada element heading (tag h1-h6). Pada contoh dibawah saya menggunakan class .card-text dalam body card untuk menghilangkan margin bawah untuk element <p>, jika elemen atau tag <p> ini merupakan tag konten terakhir dari card (bisa juga hanya tag <p> isi dari card).

Sedangkan untuk membuat link dalam card tambahakan class .card-link dalam elemen <a>. Atau ada juga yang dinamakan Stretched Link yaitu membuat seluruh card dapat diklik (Card seolah-olah merupakan link).

Contoh script nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>

Card Bergambar

Seperti hal-hal yang kita lakukan sebelumnya , Untuk menambahkan gambar dalam Card Bootstrap kita hanya perlu menggunakan class .card-img-top atau .card-img-bottom dalam tag <img>. Class .card-img-top digunakan jika teman – teman ingin menempatkan gambar dibagian atas semua element dalam card, sedangkan class .card-img-bottom digunakan untuk menempatkan gambar dibagian bawah semua komponen dalam card.

Gambar dapat juga digunakan sebagai background dari card bootstrap ini dinamakan overlay card. Untuk membuat hal ini kita tambahkan class .card-img-overlay. Untuk penggunaannya sendiri dapat teman-teman lihat pada contoh program dibawah.

Catatan: Saat menambahakan gambar pada card tempatkan tag <img> diluar card body agar gambar dapat menyesuaikan lebar dan tinggi dari card.

Contoh programnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>

Kolom Card

Pernah lihat tampilan dari pinterest ? Seperti itu lah gambaran dari kolom Card bootstrap. Untuk membuat nya kita tinggal menambahkan class .card-columns. Layout dari kolom-kolomnya sendiri akan otomatis menyesuaikan saat kita memasukkan lebih banyak Card dalam class .card-columns.

Ada hal yang perlu diperhatikan yaitu jika teman-teman menggunakan layar (laptop/hp) berukuran kurang dari 576px maka card akan ditampilkan secara vertikal.

Contoh penggunaannya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>  
    <div class="card bg-light">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

penambahan class .text-center untuk membuat text yang ada dalam body card berada ditengah.

Card deck

Card deck ini mirip dengan Card kolom tetapi bedanya adalah kalau card kolom tinggi dari card didalamnya menyesuaikan terhadap konten lain halnya dengan card deck, dalam card deck isi card didalamya akan memiliki tinggi dan lebar yang sama meskipun isi atau konten nya banyaknya berbeda. Layout dari card deck juga akan otomatis menyesuaikan ketika banyak card yang dimasukkan.

Ada hal yang perlu diperhatikan yaitu jika teman-teman menggunakan layar (laptop/hp) berukuran kurang dari 576px maka card akan ditampilkan secara vertikal.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-deck">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card pertama</p>
        <p class="card-text">Tambahkan banyak konten untuk menambahakan tinggi card</p>
        <p class="card-text">Tambahkan banyak konten untuk menambahakan tinggi card</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card kedua</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card ketiga</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card keempat</p>
      </div>
    </div>  
  </div>
</div>

</body>
</html>

Card sebagai Menu Navigasi

Card juga dapat digunakan sebagai menu navigasi dalam sebuah situs. Yaitu dengan mengisi header dari card dengan class navbar (baca: Navbar Bootstrap: Bootstrap Tutorial #26). Text dalam card juga dapat kita atur perataannya dengan menggunakan class text align yaitu .text-center untuk text berada ditengah, .text-right untuk text berada di bagian kanan card, sedangkan untuk membuat text rata kiri kita tidak perlu menambahkan class text-left karena secara default perataan dari card adalah rata kiri.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <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="#">Menu aktif</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LInk</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Judul Card</h5>
    <p class="card-text">ini adalah text dalam card.</p>
    <a href="#" class="btn btn-primary">Ke Menu 2</a>
  </div>
</div>
</div>

</body>
</html>

Card Border

Selain diberi gambar atau background card bootstrap juga dapat kita beri border dengan menambahakan class border-warna. untuk daftar warnanya sendiri sama dengan tabel warna diatas ya. contoh: .border-primary, .border-dark, dan seterusnya.

Contoh programnya adalah

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<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 </h5>
    <p class="card-text">Konten didalam card dengan border primary</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</h5>
    <p class="card-text">Konten didalam card dengan border Secondary</p>
  </div>
  </div>
</body>
</html>

Sekian penjelasan dari saya semoga dapat teman – teman kembangkan lagi terima kasih.