bootstrap-2

Seorang siswa menambahkan navigasi menggunakan Bootstrap 5. Navbar sudah memiliki tombol hamburger (navbar-toggler) di layar kecil. Namun, ketika tombol ditekan, menu tidak muncul sama sekali meskipun sudah ada daftar link di dalamnya. Setelah diteliti, ternyata siswa lupa menambahkan class pada wadah menu.

Class Bootstrap manakah yang wajib ditambahkan pada wadah menu agar menu bisa muncul dan hilang saat tombol ditekan?

• navbar-light

• navbar-expand-lg

• navbar-toggler

• collapse navbar-collapse

• nav-item

Seorang siswa membuat navbar Bootstrap 5 dengan menambahkan tombol hamburger. Saat diuji, tombol hamburger muncul pada layar kecil, tetapi ikon garis tiga (toggler icon) tidak terlihat sama sekali meskipun tombol dapat ditekan.

Class manakah yang seharusnya digunakan agar ikon toggler dapat muncul dengan benar pada tombol hamburger?

• navbar-brand

• navbar-toggler-icon

• navbar-collapse

• nav-item

• container-fluid

Seorang siswa membuat layout dengan Bootstrap. Ia ingin menampilkan 3 kolom sama besar dalam satu baris. Saat diuji, kolom pertama lebih lebar dibanding dua lainnya karena siswa hanya memberi class col pada satu elemen, sedangkan dua lainnya tanpa class.

Class apa yang paling tepat agar semua kolom dalam satu baris otomatis memiliki lebar yang sama?

• container

• col

• col-3

• col-12

• g-3

Seorang siswa membuat desain galeri foto. Pada layar besar ia ingin tampil 4 kolom, pada layar sedang 2 kolom, dan pada layar kecil 1 kolom. Namun hasilnya selalu 4 kolom di semua ukuran layar.

Class kombinasi grid mana yang paling tepat untuk memenuhi kebutuhan tersebut?

• col-4 col-2 col-1

• col-lg-3 col-md-6 col-12

• col-12 col-6 col-3

• col-1 col-2 col-4

• col-sm-3 col-md-12 col-lg-6

Seorang siswa membuat layout dengan 2 baris. Baris pertama harus memiliki 2 kolom sama besar, dan baris kedua harus memiliki 3 kolom sama besar. Namun hasilnya berantakan karena siswa tidak membungkus kolom dengan elemen yang sesuai.

Elemen apa yang harus digunakan untuk membungkus setiap kelompok kolom agar layout tersusun rapi sesuai grid Bootstrap?

• container-fluid

• col

• row

• navbar

• g-0

Seorang siswa ingin memberi jarak luar (margin) pada sebuah card agar tidak terlalu menempel dengan elemen di sekitarnya. Namun ia salah menambahkan p-3 sehingga yang bertambah justru ruang di dalam card.

Class apa yang seharusnya digunakan untuk menambahkan jarak luar di semua sisi card?

• p-3

• m-3

• g-3

• mx-3

• pt-3

Seorang siswa membuat tombol yang menempel ke kiri container. Ia ingin tombol tersebut berada di tengah secara horizontal tanpa mengatur manual dengan CSS.

Class margin Bootstrap mana yang digunakan untuk membuat tombol otomatis rata tengah secara horizontal?

• mx-auto

• my-auto

• m-0

• px-auto

• m-auto

Dalam sistem grid, siswa membuat dua kolom dalam satu baris tetapi hasilnya terlalu rapat. Ia ingin menambahkan jarak antar kolom tanpa menambah margin/padding manual.

Class Bootstrap mana yang digunakan untuk mengatur jarak antar kolom (gutter) pada row?

• p-3

• m-3

• g-3

• gap-3

• px-3

Seorang siswa membuat form login dengan Bootstrap tetapi lupa menambahkan class .form-control pada input. Apa dampak yang terjadi?

• input tidak terjadi masalah

• input kehilangan styling standar bootstrap

• input tidak bisa diketik

• input otomatis menjadi tombol

• form tidak terkontrol

Seorang siswa membuat fitur notifikasi menggunakan Toast Bootstrap 5. Saat diuji, toast tampil tetapi tidak menghilang secara otomatis setelah beberapa detik.

Apa yang harus ditambahkan agar toast bisa hilang secara otomatis setelah durasi tertentu?

• Menambahkan class alert-dismissible

• Menggunakan class fade show

• Memberikan atribut data-bs-delay dan data-bs-autohide="true"

• Mengganti class toast menjadi toast-auto

• Menambahkan data-bs-dismiss="toast" pada tombol