25 Pertanyaan dan Jawaban Wawancara Bootstrap Teratas (2025)

Berikut adalah pertanyaan dan jawaban wawancara Bootstrap untuk kandidat Front End Developer baru dan berpengalaman untuk mendapatkan pekerjaan impian mereka.

---

1) Jelaskan apa itu Bootstrap?

Bootstrap adalah kerangka kerja HTML, CSS, dan JS untuk membangun aplikasi web yang kaya dengan sedikit usaha. Framework ini lebih menekankan pada pembangunan aplikasi web mobile.

Unduh PDF Gratis: Pertanyaan dan Jawaban Wawancara Bootstrap

---

2) Jelaskan mengapa memilih Bootstrap untuk membangun situs web?

Ada beberapa alasan mengapa kami memilih Bootstrap untuk membangun situs web

• Dukungan Seluler: Untuk perangkat seluler, ini memberikan dukungan penuh dalam satu file, bukan dalam file terpisah. Ini mendukung desain responsif termasuk menyesuaikan CSS berdasarkan jenis perangkat yang berbeda, ukuran layar, dll. Ini mengurangi upaya ekstra bagi pengembang.
• Mudah untuk dipelajari: Menulis aplikasi di bootstrap mudah jika Anda mengetahui CSS dan HTML
• Dukungan Browser: Ini mendukung semua browser populer seperti Firefox, Opera, Safari, IE dll.

---

3) Apa saja komponen utama Bootstrap?

Komponen utama Bootstrap adalah

• CSS: Muncul dengan banyak file CSS
• Perancah: Ini menyediakan struktur dasar dengan sistem Grid, gaya tautan, dan latar belakang
• Komponen Tata Letak: Daftar komponen tata letak
• Plugin JavaScript : Ini berisi banyak jQuery dan plugin JavaScript
• Menyesuaikan: Untuk mendapatkan kerangka versi Anda sendiri, Anda dapat menyesuaikan komponen Anda

---

4) Jelaskan apa yang dimaksud dengan pemuat kelas di Bootstrap?

Pemuat kelas adalah bagian dari JRE (Java Runtime Environment) yang memuat kelas Java ke dalam lingkungan virtual Java. Pemuat kelas juga melakukan proses mengubah kelas bernama menjadi bentuk biner yang setara.

---

5) Apa saja jenis tata letak yang tersedia di Bootstrap?

Di Bootstrap ada dua jenis Layout yang tersedia

• Tata Letak Cairan: Tata letak yang dapat disesuaikan digunakan saat Anda ingin membuat aplikasi dengan lebar 100% dan menggunakan seluruh lebar layar
• Tata Letak Tetap: Untuk layar standar Anda akan menggunakan opsi tata letak tetap (940 px).

---

6) Jelaskan apa itu Sistem Grid Bootstrap?

Untuk membuat tata letak halaman melalui serangkaian baris dan kolom yang menampung konten Anda, Bootstrap Grid Sytem digunakan.

---

7) Apa yang dimaksud dengan kolom offset di Bootstrap?

Untuk tata letak yang lebih khusus, offset adalah fitur yang berguna. Untuk jarak yang lebih jauh, mereka dapat digunakan dengan mendorong kolom ke atas.

Sebagai contoh, .col-xs=* kelas tidak mendukung offset tetapi mudah direplikasi menggunakan sel kosong

---

8) Apa yang dimaksud dengan pemesanan kolom di Bootstrap?

Pengurutan kolom adalah salah satu fitur yang tersedia di bootstrap dan Anda dapat dengan mudah menulis kolom secara berurutan dan menampilkannya di urutan lain. Dengan .col-md-push-* dan .col-md-pull-*

urutan kolom dapat dengan mudah diubah.

---

9) Fungsi apa yang dapat Anda gunakan untuk membungkus konten halaman?

Untuk membungkus konten halaman dapat Anda gunakan .wadah dan menggunakannya Anda juga dapat memusatkan konten.

---

10) Jelaskan apa itu pagination di bootstrap dan bagaimana klasifikasinya?

Pagination adalah penanganan daftar tidak berurutan dengan bootstrap. Untuk menangani pagination bootstrap menyediakan kelas-kelas berikut

• .paginasi: Untuk mendapatkan penomoran halaman di halaman Anda, Anda harus menambahkan kelas ini
• .dinonaktifkan, .aktif: Sesuaikan tautan dengan .disabled untuk tautan yang tidak dapat diklik dan .active untuk menunjukkan halaman saat ini
• .pagination-Ig, .pagination-sm: Gunakan kelas-kelas ini untuk mendapatkan item dengan ukuran berbeda

---

11) Apa gunanya Jumbotron di Bootstrap?

Dalam bootstrap, Jumbotron umumnya digunakan untuk konten yang ingin Anda soroti seperti slogan atau judul pemasaran dll. dengan kata lain digunakan untuk memperbesar ukuran judul dan menambahkan margin untuk konten halaman arahan

Untuk menggunakan Jumbotron di Bootstrap

• Buat wadah dengan kelas .jumbotron

---

12) Apa perbedaan antara Bootstrap dan Foundation?

Bootstrap	Prinsip Dasar
– Bootstrap menawarkan elemen UI dalam jumlah tidak terbatas	– Opsi elemen UI Foundation sangat terbatas jumlahnya
– Bootstraps menggunakan piksel	– Foundation menggunakan REM
– Bootstrap mendorong desain untuk desktop dan seluler.	– Yayasan mendorong untuk merancang seluler terlebih dahulu
– Bootstrap mendukung LESS sebagai praprosesornya	– Dukungan yayasan Kelancangan dan Kompas sebagai praprosesornya

 

---

13) Di Bootstrap, apa dua cara untuk menampilkan kode?

Di bootstrap Anda dapat menampilkan kode dengan dua cara

• tag : Jika Anda ingin menampilkan kode sebaris, Anda harus menggunakan tag
• menandai: Jika Anda ingin menampilkan kode sebagai elemen blok yang berdiri sendiri atau memiliki banyak baris maka Anda harus menggunakan menandai

---

14) Jelaskan apa saja langkah-langkah membuat bentuk dasar atau vertikal?

Langkah-langkah membuat bentuk dasar atau vertikal adalah

• Tambahkan peran bentuk kepada orang tua elemen
• Bungkus label dan kontrol dalam a dengan kelas .form-grup. Untuk mencapai jarak tanam yang optimal, hal ini diperlukan
• Tambahkan kelas .kontrol formulir untuk semua tekstur , , dan elemen <select>

---

15) Jelaskan untuk apa plugin Modal digunakan di Bootstrap?

Modal adalah jendela anak yang berlapis di atas jendela induknya. Menggunakan Plugin Jquery khusus, Bootstrap Modal dibuat. Untuk memperkaya pengalaman pengguna dan menambah fungsionalitas bagi pengguna, jendela modal dibuat dengan bantuan plugin Modal.

---

16) Jelaskan apa itu Bootstrap Container?

Kontainer bootstrap adalah kelas yang berguna dan menciptakan area terpusat di dalam halaman tempat konten situs kita dapat dimasukkan ke dalamnya. Keuntungan dari bootstrap .container adalah responsif dan akan menempatkan semua kode HTML kita yang lain.

---

17) Jelaskan apa yang dimaksud dengan elemen runtuh Bootstrap?

Elemen penciutan bootstrap memungkinkan Anda menciutkan elemen tertentu tanpa menulis kode JavaScript atau markup akordeon apa pun. Di Bootstrap untuk menerapkan elemen yang dapat diciutkan, Anda harus menambahkan data-toggle= “collapse” ke elemen pengontrol bersama dengan target data atau href untuk secara otomatis menetapkan kontrol elemen yang dapat diciutkan. Demikian pula, Anda dapat menggunakan .collapse (opsi), .collapse ('show') atau .collapse ('hide')

---

18) Jelaskan apa itu grup daftar di Bootstrap dan apa gunanya?

Grup daftar adalah komponen untuk menampilkan elemen sederhana dan kompleks dengan konten khusus

Misalnya, grup daftar sederhana dibuat menggunakan kelas .daftar-grup untuk mengatasi daftar, dan kelas .list-group-item untuk mengatasi item individual.

---

19) Bagaimana Anda bisa menambahkan lencana ke grup daftar di Bootstrap?

Untuk menambahkan lencana ke grup daftar di Bootstrap Anda cukup menambahkan dalam elemen.

---

20) Jelaskan apa itu objek media di Bootstrap dan apa saja tipenya?

Objek media di Bootstrap memungkinkan untuk menempatkan objek media seperti gambar, video, atau audio di kiri atau kanan blok konten. Elemen media dapat dibuat menggunakan kelas .a rata-rata dan sumbernya ditentukan dalam menggunakan kelas .media-objek. Objek media ada dua jenis,

Mereka terdiri dari dua jenis

• .a rata-rata
• .daftar-media

---

21) Jelaskan apa itu Bootstrap dengan baik?

Bootstrap dengan baik adalah sebuah wadah yang membuat konten tampak cekung atau efek sisipan pada halaman. Untuk membuat sumur, bungkus konten yang ingin Anda tampilkan di dalam sumur dengan a berisi kelas .well.

 

---

22) Jelaskan bagaimana Anda bisa membuat elemen Nav di Bootstrap?

Bootstrap menawarkan berbagai opsi untuk menata elemen navigasi, semuanya menggunakan markup dan kelas dasar .nav yang sama.

Untuk membuat Navigasi Tabular atau Tab

• Mulailah dengan daftar dasar tidak berurutan dengan kelas dasar .nav
• Kemudian tambahkan kelas .nav-tab

---

23) Jelaskan apa gunanya plugin Bootstrap Carousel?

Plugin Carousel digunakan untuk menambahkan slider ke situs Anda. Ini berguna ketika Anda ingin menampilkan konten dalam jumlah besar dalam ruang kecil di halaman web. Beberapa carousel standar disertakan

• .carousel (opsi)
• .carousel ('siklus')
• .carousel ('jeda')
• .carousel ('angka')
• .carousel ('sebelumnya')
• .carousel ('berikutnya')

Pertanyaan wawancara ini juga akan membantu dalam viva Anda (lisan)