Tujuan Pembelajaran

Peserta mampu:

1. Membuat Card.
2. Membuat kartu produk.
3. Membuat kartu profil.

---

A. Apa Itu Card?

Card adalah komponen Bootstrap yang digunakan untuk menampilkan informasi dalam bentuk kotak.

---

Praktik 1

<div class="card">

<div class="card-body">

Ini isi card

</div>

</div>

---

B. Card Dengan Judul

<div class="card">

<div class="card-body">

<h5 class="card-title">

Belajar Bootstrap

</h5>

<p>

Framework CSS modern

</p>

</div>

</div>

---

Praktik 2

Buat kartu informasi jurusan RPL.

---

C. Card Dengan Tombol

<div class="card">

<div class="card-body">

<h5 class="card-title">

Pemrograman Web

</h5>

<p>

Materi HTML CSS Bootstrap

</p>

<a href="#"
class="btn btn-primary">

Pelajari

</a>

</div>

</div>

---

Praktik 3

Buat 3 card:

• HTML
• CSS
• Bootstrap

Menggunakan Grid System.

---

Latihan Bab

1. Apa fungsi Card?
2. Apa fungsi card-body?
3. Apa fungsi card-title?
4. Mengapa Card banyak digunakan?
5. Sebutkan contoh penggunaan Card.

---

Tugas Praktik Bab

Buat tampilan katalog jurusan sekolah:

• RPL
• TKJ
• DKV

Masing-masing menggunakan Card.