Bootstrap Adalah: Pengertian, Fungsi & Cara Menggunakannya

Satu halaman web yang sama hari ini dibuka dari layar ponsel selebar 375 piksel dan dari monitor selebar 1.400 piksel. Agar tetap rapi di keduanya, seseorang harus memutuskan banyak hal. Berapa lebar kolom, di ukuran layar berapa susunan berubah, seberapa besar jarak antarelemen, dan seperti apa tombol yang terlihat bisa diklik. Dengan CSS murni, keputusan-keputusan itu diulang dari nol di setiap proyek.

Bootstrap adalah framework CSS gratis berisi kelas dan komponen siap pakai untuk membuat tampilan web yang responsif. Ia menjawab keputusan berulang tersebut: Anda cukup menulis nama kelas di elemen HTML, dan Bootstrap yang mengurus sisanya.

Apa Itu Bootstrap? Kumpulan Keputusan Desain yang Sudah Diambil

Bootstrap adalah framework (kerangka kerja) CSS untuk front-end, yaitu sisi antarmuka pengguna yang dilihat dan disentuh pengunjung website. Isinya berupa ribuan kelas CSS siap pakai dan sekumpulan komponen JavaScript. Bootstrap bersifat open source dengan lisensi MIT, sehingga gratis dipakai untuk proyek pribadi maupun komersial.

Bayangkan buku tulis kosong dan buku tulis bergaris. Di buku kosong, Anda bebas menggambar, tetapi harus menarik garis sendiri. Buku bergaris sudah menetapkan jarak antarbaris, sehingga tulisan otomatis rapi walau pilihan Anda lebih terbatas. Bootstrap adalah buku bergaris untuk halaman web.

Contoh nyatanya terlihat pada tombol. Tanpa Bootstrap, Anda menulis warna latar, warna teks, padding, sudut melengkung, dan efek saat kursor di atasnya. Dengan Bootstrap, cukup satu baris:

<button class="btn btn-primary">Simpan</button>

Kelas btn memberi bentuk dasar tombol, sedangkan btn-primary memberi warna utama. Seluruh aturan CSS di baliknya sudah ditulis tim Bootstrap.

Bootstrap tidak menggantikan bahasa dasar web. HTML tetap menyusun struktur halaman, dan CSS tetap mengatur tampilan. Bootstrap menyediakan CSS dan JavaScript yang sudah ditulis, lalu Anda memanggilnya lewat atribut class. Karena itulah framework Bootstrap sering disebut juga Bootstrap CSS.

Dari Twitter Blueprint ke Bootstrap 5.3

Bootstrap lahir di Twitter pada pertengahan 2010. Desainer Mark Otto dan developer Jacob Thornton membuatnya untuk menyeragamkan tampilan alat-alat internal perusahaan, dengan nama awal Twitter Blueprint. Proyek ini dirilis ke publik pada 19 Agustus 2011. Lisensinya semula Apache 2.0, lalu berganti ke MIT mulai versi 3.1.0 pada Januari 2014.

Setiap versi mayor membawa perubahan cara kerja, bukan sekadar tampilan baru:

Per September 2026, versi stabil terbaru adalah Bootstrap 5.3.8 yang dirilis 25 Agustus 2025. Tim Bootstrap menyebut versi berikutnya adalah 5.4.0, yang hingga kini belum keluar. Adapun Bootstrap 6 masih berada di cabang pengembangan v6-dev di GitHub dan belum dipublikasikan, bahkan dalam bentuk alpha.

Banyak tutorial lama masih memakai kode Bootstrap 3 atau 4, misalnya kelas img-responsive atau atribut data-toggle. Keduanya tidak berfungsi di Bootstrap 5, yang memakai img-fluid dan data-bs-toggle. Saat mengikuti tutorial, periksa dulu versi yang dipakai penulisnya.

Isi Paket Bootstrap dan Ukurannya

Paket Bootstrap 5 berisi dua berkas utama yang dipakai hampir semua proyek. Ukuran di bawah ini hasil pengukuran kami terhadap versi 5.3.8 yang disajikan jsDelivr:

1. bootstrap.min.css: seluruh gaya Bootstrap dalam satu berkas, sekitar 227 KB. Setelah dikompresi gzip oleh server, yang benar-benar dikirim ke browser sekitar 31 KB.
2. bootstrap.bundle.min.js: seluruh komponen interaktif seperti modal, dropdown, dan carousel, sekitar 79 KB (24 KB setelah gzip). Kata bundle berarti berkas ini sudah menyertakan Popper, pustaka pengatur posisi menu dropdown dan tooltip (keterangan kecil yang muncul saat kursor diarahkan).

Di dalam CSS tersebut ada lapisan bernama Reboot, yang menyamakan gaya dasar elemen di semua browser. Ada juga Utility API, yaitu mekanisme berbasis Sass untuk menambah atau membuang kelas utilitas. Kelas utilitas adalah kelas kecil berisi satu tugas, misalnya p-3 untuk padding sebesar 1rem atau text-center untuk rata tengah.

💡 Dua hal yang sering disebut sebagai bagian Bootstrap sebenarnya sudah lama keluar dari paketnya. jQuery tidak lagi dibutuhkan sejak Bootstrap 5, dan ikon Glyphicons sudah dihapus sejak Bootstrap 4. Penggantinya adalah Bootstrap Icons, proyek terpisah berisi lebih dari 2.000 ikon SVG berlisensi MIT yang bisa dipakai dengan atau tanpa Bootstrap.

Cara Kerja Grid Bootstrap: 12 Kolom dan Breakpoint

Sistem grid adalah bagian Bootstrap yang paling sering dipakai. Grid membagi lebar halaman menjadi 12 kolom imajiner. Angka 12 dipilih karena habis dibagi 2, 3, 4, dan 6. Tata letak dua, tiga, empat, atau enam bagian sama besar pun bisa dibentuk tanpa sisa.

Struktur grid selalu terdiri dari tiga lapis. Lapis terluar adalah container, yang membatasi lebar isi halaman. Di dalamnya ada row sebagai baris, lalu col sebagai kolom. Kolom inilah yang menampung konten, dan jarak antarkolomnya (gutter) bawaannya 1,5rem.

Kekuatan grid ada pada breakpoint, yaitu lebar layar tempat susunan halaman berubah. Bootstrap 5 memiliki enam breakpoint:

Bootstrap memakai prinsip mobile first. Aturan ditulis untuk layar terkecil lebih dulu, lalu setiap breakpoint menimpa aturan di bawahnya. Kelas col-md-6 berarti "ambil 6 dari 12 kolom mulai layar medium ke atas". Di bawah 768 piksel, kelas itu tidak berlaku.

Kombinasi beberapa kelas membuat satu elemen berganti ukuran di tiap layar. Perhatikan kolom berikut:

<div class="col-12 col-md-6 col-lg-4">

Di ponsel, kolom ini memakai 12 dari 12 bagian, sehingga kartu-kartu tampil bertumpuk. Di tablet, lebarnya 6 bagian, jadi dua kartu berjajar. Di laptop, lebarnya 4 bagian, sehingga tiga kartu tampil dalam satu baris. Satu baris kode menggantikan tiga blok media query yang biasanya ditulis manual. Prinsip tata letak seperti ini dibahas lebih luas di artikel pengertian layout.

Fungsi Bootstrap: Dipakai untuk Apa Saja?

Bootstrap paling terasa manfaatnya pada proyek yang butuh tampilan rapi dalam waktu singkat, tanpa tuntutan desain yang unik. Beberapa pemakaian yang umum:

1. Panel admin dan dashboard: halaman berisi tabel, formulir, dan grafik yang polanya berulang. Komponen tabel, formulir, dan navigasi Bootstrap sudah mencakup sebagian besar kebutuhannya.
2. Sistem informasi sekolah dan kampus: aplikasi ujian, presensi, atau akademik yang lebih mementingkan fungsi daripada identitas visual. Aplikasi ujian Candy CBT versi terbarunya, misalnya, dibangun di atas Bootstrap 5.
3. Prototipe: tampilan kasar untuk menguji alur aplikasi sebelum desainer turun tangan.
4. Proyek tim tanpa desainer: programmer backend bisa menghasilkan antarmuka yang layak tanpa harus mendalami CSS.
5. Template siap pakai: banyak template Bootstrap gratis, mulai dari halaman profil hingga tema admin, tersedia untuk langsung disunting isinya.

Skalanya pun besar. Menurut W3Techs per 29 September 2026, Bootstrap dipakai 74,8% dari seluruh situs yang framework CSS-nya berhasil dideteksi. Angka itu setara 13,4% dari semua website yang dipantau. Repositorinya di GitHub juga mengumpulkan sekitar 175 ribu stars (tanda suka dari pengguna GitHub).

Kelebihan Bootstrap

Selain mempercepat pekerjaan, beberapa kelebihan Bootstrap baru terasa setelah proyek berjalan beberapa bulan:

1. Tampilan konsisten antarhalaman: tombol di halaman login dan di halaman laporan memakai kelas yang sama, sehingga tampil sama. Konsistensi ini sulit dijaga kalau lima orang menulis CSS masing-masing.
2. Aksesibilitas bawaan: komponen interaktif seperti modal dan dropdown dirancang agar bisa dipakai lewat keyboard dan dibaca screen reader (aplikasi pembaca layar untuk tunanetra). Syaratnya, Anda mengikuti contoh markup di dokumentasinya.
3. Dokumentasi berbentuk contoh: setiap komponen di getbootstrap.com disertai tampilan dan kode yang bisa langsung disalin. Bagi pemula, ini sumber belajar yang rapi.
4. Mode gelap tanpa CSS tambahan: sejak versi 5.3, cukup menambahkan atribut data-bs-theme="dark" untuk mengganti seluruh halaman ke tema gelap.
5. Bisa dirampingkan: kalau Anda memakai versi Sass, komponen yang tidak dibutuhkan bisa dibuang dari hasil akhir, dan warna utama cukup diganti di satu variabel.

Kekurangan Bootstrap yang Perlu Anda Pertimbangkan

Setiap keputusan yang sudah diambil Bootstrap juga berarti keputusan yang bukan milik Anda. Ada konsekuensi yang perlu dihitung sebelum memilihnya:

1. Muatan yang tidak terpakai: halaman yang hanya memakai grid dan tombol tetap memuat 227 KB CSS, termasuk gaya carousel dan modal yang tidak pernah muncul. Untuk memeriksanya, buka Chrome DevTools, lalu tab Coverage. Di sana terlihat berapa persen CSS yang benar-benar dipakai halaman.
2. Wajah "khas Bootstrap": tanpa kustomisasi, website Anda terlihat mirip ribuan website lain yang memakai warna biru dan tombol yang sama. Mengubahnya butuh pemahaman variabel Sass atau variabel CSS.
3. Menimpa gaya bisa melelahkan: kalau ingin tombol tampil berbeda, aturan CSS Anda harus lebih kuat atau dimuat setelah Bootstrap. Di proyek besar, ini bisa berujung pada tumpukan aturan penimpa. Bootstrap 5.3 meringankannya lewat variabel CSS seperti --bs-btn-bg, tetapi tetap ada lapisan tambahan yang perlu dipahami.
4. Aturan global yang ikut terpasang: Bootstrap mengubah box-sizing semua elemen menjadi border-box. Dokumentasinya sendiri mengingatkan bahwa ini bisa bentrok dengan widget pihak ketiga, misalnya peta Google Maps.
5. Ritme rilis melambat: sejak 5.3.8 pada Agustus 2025, belum ada rilis baru selama lebih dari setahun. Bootstrap tetap aman dipakai, tetapi fitur CSS modern masuk lebih lambat dibanding framework yang lebih aktif.

Bootstrap vs Tailwind CSS dan Pilihan Selain Bootstrap

Pesaing terdekat Bootstrap saat ini adalah Tailwind CSS. Perbedaannya ada pada cara berpikir. Bootstrap memberi komponen jadi, misalnya card atau navbar, yang cukup Anda sesuaikan. Tailwind memberi potongan kecil seperti px-4, rounded-lg, dan bg-blue-600, lalu Anda merangkai sendiri bentuk kartu atau tombolnya. Pendekatan ini disebut utility-first.

Data popularitas keduanya sering tampak bertentangan, karena memang mengukur hal berbeda:

Unduhan npm mencerminkan proyek baru dan proses build otomatis, dan di sinilah Tailwind unggul sekitar 21 kali lipat. W3Techs menghitung website yang sudah tayang, dan di sana Bootstrap masih mendominasi. Banyak situs memuat Bootstrap langsung dari CDN tanpa npm, sehingga tidak tercatat di angka unduhan. Kesimpulannya, Bootstrap menguasai website yang sudah ada, sementara Tailwind lebih sering dipilih untuk proyek baru.

Selain Tailwind, ada beberapa alternatif lain. Bulma hanya berisi CSS tanpa JavaScript, Foundation menyediakan komponen serupa Bootstrap, dan CSS murni dengan Flexbox dan Grid kini sudah cukup kuat untuk banyak kebutuhan.

Sebagai pegangan, berikut rekomendasi kami:

1. Pilih Bootstrap kalau Anda membangun panel admin atau sistem informasi tanpa desainer di tim. Pilihan ini makin tepat bila Anda butuh modal, tab, dan dropdown tanpa menulis JavaScript.
2. Pilih Tailwind kalau desain sudah dibuat desainer dan harus ditiru persis piksel demi piksel, apalagi bila proyek memakai React atau Vue.
3. Pilih CSS murni kalau halamannya sedikit, misalnya satu sampai tiga halaman profil. Seluruh CSS yang Anda tulis kemungkinan besar lebih kecil daripada 31 KB versi gzip Bootstrap.

Cara Menggunakan Bootstrap 5 untuk Pemula

Cara paling cepat memakai Bootstrap adalah memuatnya dari CDN, tanpa mengunduh apa pun. Anda hanya butuh editor teks dan browser. Langkah berikut kami uji dengan Bootstrap 5.3.8.

Langkah #1: Siapkan Berkas HTML dengan Meta Viewport

Buat berkas baru bernama index.html. Isi bagian <head> dengan tag meta berikut:

<meta charset="utf-8">
<meta name="viewport"
  content="width=device-width, initial-scale=1">

Baris viewport wajib ada. Tanpanya, browser ponsel menampilkan halaman seperti versi desktop yang diperkecil, sehingga breakpoint Bootstrap tidak pernah aktif.

Langkah #2: Pasang Bootstrap Lewat CDN

Tambahkan tautan CSS di dalam <head>, tepat di bawah tag meta tadi:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
  crossorigin="anonymous">

Lalu tambahkan berkas JavaScript tepat sebelum tag penutup </body>:

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
  crossorigin="anonymous"></script>

Tautan seperti ini sering disebut CDN Bootstrap. Atribut integrity di dalamnya berisi sidik jari berkas. Browser menolak memuat berkas kalau isinya berubah, misalnya karena server CDN disusupi. Sidik jari ini berbeda untuk setiap versi, jadi salin ulang dari dokumentasi resmi setiap kali Anda menaikkan versi.

Alternatifnya, pasang lewat npm dengan npm install bootstrap@5.3.8 bila Anda ingin mengkustomisasi Bootstrap melalui Sass. Anda juga bisa download Bootstrap dalam bentuk berkas jadi dari getbootstrap.com, lalu menyimpannya di folder proyek.

Langkah #3: Susun Tata Letak dengan Grid

Tempel kode berikut di dalam <body>. Kode ini membuat tiga kartu yang menyesuaikan diri dengan lebar layar:

<div class="container py-4">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card p-3">Kartu 1</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card p-3">Kartu 2</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card p-3">Kartu 3</div>
    </div>
  </div>
</div>

Buka berkasnya di browser, lalu ubah lebar jendela perlahan. Di bawah 768 piksel, ketiga kartu bertumpuk. Di antara 768 dan 991 piksel, dua kartu berjajar dan kartu ketiga turun ke baris berikutnya. Mulai 992 piksel, ketiganya tampil sejajar. Kelas g-3 mengatur jarak antarkartu, sedangkan py-4 memberi ruang di atas dan bawah container.

Langkah #4: Tambahkan Tombol dan Coba Mode Gelap

Tambahkan tombol di bawah baris kartu, masih di dalam container:

<button class="btn btn-primary mt-3">
  Simpan
</button>

Untuk melihat mode gelap, ubah tag pembuka <html> di baris kedua berkas menjadi seperti ini:

<html lang="id" data-bs-theme="dark">

Simpan, lalu muat ulang halaman. Latar, teks, dan kartu langsung berganti ke tema gelap tanpa satu baris CSS pun dari Anda. Hapus atribut tersebut untuk kembali ke tema terang.

Bootstrap tidak butuh pengaturan khusus di server karena seluruhnya berjalan di browser. Berkas index.html ini bisa langsung diunggah ke hosting mana pun.

Arti Bootstrap di Luar Web: Booting, Bisnis, dan Statistik

Secara harfiah, arti kata bootstrap adalah tali kecil di bagian belakang sepatu bot, yang ditarik saat memakainya. Dari sana muncul ungkapan Inggris "mengangkat diri sendiri dengan menarik tali sepatu". Awalnya ungkapan itu menggambarkan hal yang mustahil, lalu bergeser menjadi "maju dengan usaha sendiri". Makna kedua inilah yang melahirkan beberapa istilah teknis:

1. Komputer: prosedur bootstrap pada komputer adalah proses menyalakan sistem. Sejak 1950-an, istilah ini dipakai untuk program kecil yang memuat program lebih besar hingga sistem operasi siap. Kata boot dan booting merupakan singkatannya, seperti yang kami uraikan di artikel arti reboot. Program pemuat awal itu disebut bootstrap loader.
2. Bisnis: bootstrap dalam bisnis, atau bootstrapping, berarti merintis usaha dengan modal sendiri tanpa investor. Biaya ditutup dari pendapatan usaha itu sendiri, sehingga pengeluaran ditekan seketat mungkin.
3. Statistik: metode bootstrap diperkenalkan Bradley Efron pada 1979. Metode ini mengambil sampel ulang berkali-kali dari data yang sama untuk memperkirakan seberapa andal sebuah hasil hitungan. Bootstrap sang framework CSS memakai nama ini dengan semangat yang sama: titik awal yang membuat Anda bisa langsung berjalan.

Pertanyaan Seputar Bootstrap

Apakah Bootstrap gratis untuk proyek komersial?

Ya. Bootstrap berlisensi MIT, sehingga boleh dipakai, diubah, dan dijual sebagai bagian dari produk Anda. Syaratnya hanya mempertahankan pemberitahuan hak cipta di berkas sumbernya. Namun, tema buatan pihak ketiga bisa punya lisensi berbayar sendiri.

Apakah Bootstrap 5 masih membutuhkan jQuery?

Tidak. Sejak versi 5, seluruh komponen ditulis ulang dengan JavaScript biasa. Kalau sebuah tutorial meminta Anda memuat jQuery sebelum Bootstrap, tutorial itu hampir pasti ditulis untuk versi 4 atau lebih lama.

Perlukah menguasai CSS sebelum belajar Bootstrap?

Sebaiknya kuasai dasarnya dulu, terutama selector, box model, dan cara kerja Flexbox. Tanpa dasar itu, Anda akan kesulitan begitu ingin mengubah satu detail yang tidak disediakan kelasnya.

Bisakah Bootstrap dipakai bersama Laravel, WordPress, atau React?

Bisa, karena Bootstrap pada dasarnya hanya berkas CSS dan JavaScript. Di Laravel dan WordPress, Bootstrap dimuat seperti aset biasa di template. Untuk React, tersedia paket React Bootstrap yang menyajikan komponennya sebagai komponen React.

Kapan Bootstrap 6 dirilis?

Belum ada tanggal resmi. Per September 2026, Bootstrap 6 masih dikerjakan di cabang v6-dev repositori GitHub, dan tim Bootstrap menyebut 5.4.0 sebagai rilis berikutnya. Untuk proyek yang dimulai sekarang, Bootstrap 5.3 adalah pilihan yang tepat.

Kesimpulan

Bootstrap adalah framework CSS gratis yang menyediakan keputusan desain siap pakai: grid 12 kolom dengan enam breakpoint, komponen interaktif tanpa jQuery, dan mode gelap bawaan. Ia paling cocok untuk panel admin, sistem informasi, dan tim tanpa desainer. Untuk desain yang harus unik atau halaman yang sangat sedikit, Tailwind CSS atau CSS murni sering lebih ringan.

Semoga artikel ini membantu.