Tujuan Pembelajaran

Peserta mampu:

1. Mengatur margin.
2. Mengatur padding.
3. Mengatur display.
4. Mengatur shadow.

---

A. Margin

m-1
m-2
m-3
m-4
m-5

Contoh:

<div class="m-5">

Konten

</div>

---

B. Padding

p-1
p-2
p-3
p-4
p-5

---

Praktik 1

<div class="bg-primary text-white p-5">

Belajar Bootstrap

</div>

---

C. Shadow

shadow-sm

shadow

shadow-lg

---

Praktik 2

<div class="card shadow-lg">

<div class="card-body">

Card Modern

</div>

</div>

---

D. Rounded

rounded

rounded-circle

---

Praktik 3

Buat card dengan:

• Shadow
• Rounded
• Padding besar

---

Latihan Bab

1. Apa fungsi margin?
2. Apa fungsi padding?
3. Apa fungsi shadow?
4. Apa fungsi rounded?
5. Apa fungsi utility class?

---

TUGAS

Membuat Company Profile Sekolah

Buat website sekolah menggunakan:

Header

• Nama sekolah
• Motto sekolah

Menu

• Beranda
• Profil
• Jurusan
• Kontak

Konten

Gunakan:

• Typography
• Warna Bootstrap
• Alert
• Badge
• Card

Footer

Copyright sekolah

---

PROYEK PORTOFOLIO MINI

Buat website profil pribadi dengan tampilan:

+---------------------+
| FOTO PROFIL         |
+---------------------+

Nama Lengkap

Programmer Web

Tentang Saya

[Hubungi Saya]

Ketentuan:

• Menggunakan Card
• Menggunakan Button
• Menggunakan Typography
• Menggunakan Shadow
• Menggunakan Rounded
• Menggunakan Color Utility