Tujuan Pembelajaran

Peserta mampu:

1. Memahami Container.
2. Memahami Grid System.
3. Membuat layout responsif.

---

A. Apa Itu Container?

Container adalah wadah utama untuk seluruh isi website.

Bootstrap menyediakan:

1. Container

Lebar menyesuaikan ukuran layar.

<div class="container">
    Konten Website
</div>

---

2. Container Fluid

Lebar penuh layar.

<div class="container-fluid">
    Konten Website
</div>

---

Praktik 1

<div class="container bg-light">

    <h1>Website Saya</h1>

</div>

---

B. Mengenal Grid System

Bootstrap menggunakan sistem:

12 Kolom

Ilustrasi:

|1|2|3|4|5|6|7|8|9|10|11|12|

---

Struktur Grid

<div class="row">

</div>

Di dalam row terdapat:

<div class="col">

</div>

---

Praktik 2

Membuat 2 Kolom

<div class="container">

    <div class="row">

        <div class="col">
            Kolom Kiri
        </div>

        <div class="col">
            Kolom Kanan
        </div>

    </div>

</div>

---

Praktik 3

Membuat Layout 3 Kolom

<div class="container">

<div class="row">

<div class="col">
Menu
</div>

<div class="col">
Konten
</div>

<div class="col">
Sidebar
</div>

</div>

</div>

---

Praktik 4

Mengatur Lebar Kolom

<div class="row">

<div class="col-4">
Menu
</div>

<div class="col-8">
Konten
</div>

</div>

Penjelasan:

4 + 8 = 12

Grid Bootstrap harus berjumlah maksimal 12.

---

Contoh Layout Website

<div class="container">

<div class="row">

<div class="col-3">
Menu
</div>

<div class="col-9">
Isi Artikel
</div>

</div>

</div>

---

Latihan Bab 3

1. Apa fungsi Container?
2. Apa fungsi Grid System?
3. Berapa jumlah kolom Bootstrap?
4. Apa fungsi Row?
5. Apa fungsi Col?

---

Tugas Praktik Bab 3

Buat tampilan website seperti berikut:

+----------------------+
|       HEADER         |
+----------------------+

+-----+---------------+
|MENU |    KONTEN     |
+-----+---------------+

+----------------------+
|       FOOTER         |
+----------------------+

Ketentuan:

• Gunakan Container.
• Gunakan Grid System.
• Gunakan warna Bootstrap.
• Responsif saat ukuran layar berubah.

---

PROYEK MINI BAGIAN 1

Buat website profil sekolah sederhana dengan komponen:

Header

Nama Sekolah

Menu

• Beranda
• Profil
• Jurusan
• Kontak

Konten

Deskripsi sekolah.

Tombol

• Daftar
• Informasi

Footer

Copyright.

Gunakan:

Button Bootstrap

Container

Grid