Soal essay:
1. Jelaskan apa itu Bootstrap dan mengapa framework ini banyak
digunakan dalam pengembangan web?
Jawaban: Bootstrap adalah salah satu framework CSS yang
berfokus pada pengembangan front-end website. Di dalamnya
mengandung HTML, CSS, dan JavaScript untuk membuat
tampilan website yang modern, responsif, dan mobile-friendly.
Project open source ini bisa Anda pakai secara gratis dengan
mengunduhnya dari GitHub.
2. Sebutkan dan jelaskan komponen dasar yang tersedia dalam
Bootstrap, serta berikan contoh penggunaannya dalam kode HTML.
Jawaban:
Album: Digunakan untuk galeri foto, portofolio, dan lainnya
Pricing: Fitur untuk footer dan header
Cover: Membuat tampilan home page yang sederhana dan
menarik
Blog: Berisi fitur, seperti header, navigation, dan featured
content
Product: Membuat halaman pemasaran yang berfokus pada
produk
Kartu: Komponen yang dapat digunakan untuk membuat
kartu sederhana
Stepper: Komponen yang menampilkan konten dalam
bentuk proses dengan tonggak pencapaian pengguna
Contoh penggunaan Bootstrap
Bootstrap menggunakan sistem grid untuk membagi halaman
web menjadi 12 kolom
Bootstrap menerapkan bahasa desain yang konsisten di
seluruh proyek
Bootstrap dirancang agar responsif, beradaptasi dengan
berbagai ukuran layar dan perangkat
Bootstrap menangani masalah kompatibilitas lintas-peramban
Bootstrap 5 Stepper adalah komponen yang menampilkan
konten dalam bentuk proses dengan tonggak pencapaian
pengguna
3. Bootstrap menggunakan sistem grid untuk layout halaman. Jelaskan
bagaimana sistem grid Bootstrap bekerja dan berikan contoh
implementasinya dengan HTML.
Jawaban: Cara Kerja Sistem Grid Bootstrap:
Container: Semua elemen grid ditempatkan di dalam sebuah
container. Ada dua jenis container di Bootstrap: .container
(fixed width) dan .container-fluid (full width).
Row: Untuk membuat baris dalam grid, kita menggunakan
elemen dengan kelas .row. Elemen ini akan menampung
kolom-kolom yang akan dibagi.
Col: Kolom menggunakan kelas .col dan dapat dibagi lebih
lanjut dengan menambahkan ukuran layar dan jumlah kolom
yang diinginkan. Misalnya, .col-md-4 artinya kolom tersebut
akan mengambil 4 dari 12 kolom untuk ukuran layar medium
(tablet dan desktop).
Breakpoint: Bootstrap memiliki breakpoint untuk berbagai
ukuran layar seperti:
1. .col-xs-*: untuk layar ekstra kecil (mobile).
2. .col-sm-*: untuk layar kecil (tablet).
3. .col-md-*: untuk layar medium (tablet besar, laptop).
4. .col-lg-*: untuk layar besar (desktop besar).
5. .col-xl-*: untuk layar ekstra besar
4. Apa perbedaan antara class.container, .container-fluid, dan .row
dalam Bootstrap? Jelaskan kegunaannya masing-masing.
Jawaban:
. Container
Fungsi: Kelas .container digunakan untuk membungkus
konten dalam lebar yang tetap atau terstruktur,
mengikuti lebar maksimum yang ditentukan oleh
Bootstrap untuk berbagai ukuran layar (breakpoint).
Lebar konten ini akan berubah sesuai dengan ukuran
layar, namun memiliki batasan yang ditetapkan.
Kegunaan: Digunakan ketika Anda ingin agar layout
konten memiliki lebar yang tetap dan terpusat di tengah
layar, serta responsif terhadap ukuran layar yang
berbeda. Pada ukuran layar besar, konten tidak akan
melebar lebih dari ukuran maksimum yang ditentukan
oleh Bootstrap.
. .container-fluid
Fungsi: Kelas .container-fluid memberikan kontainer
yang selalu penuh (full-width), artinya konten akan
mengisi seluruh lebar layar, tanpa batasan lebar
maksimum.
Kegunaan: Digunakan ketika Anda ingin halaman atau
bagian halaman Anda memiliki lebar penuh,
menyesuaikan dengan lebar layar perangkat apa pun
tanpa adanya batasan. Ini cocok untuk desain yang
memanfaatkan seluruh ruang layar, seperti header
penuh atau gambar latar belakang yang meluas ke
seluruh lebar.
. .row
Fungsi: Kelas .row digunakan untuk membuat baris
dalam sistem grid Bootstrap. Semua kolom (dengan
kelas .col-*) harus berada di dalam elemen dengan kelas
.row. Elemen ini memastikan kolom-kolom yang ada di
dalamnya disejajarkan dengan benar dan memberikan
jarak antar kolom.
Kegunaan: Kelas .row digunakan untuk
mengelompokkan kolom dalam baris tertentu. Setiap
kolom yang ada di dalam .row akan saling berbagi ruang
dalam baris tersebut.
