Bootstrap
02 Jun 2025 -
Materi tentang Bootstrap
Apa Itu Bootstrap?
Bootstrap adalah framework front-end berbasis HTML, CSS, dan JavaScript
yang digunakan untuk membangun antarmuka web (UI) yang modern, responsif,
dan mobile-friendly,Bootstrap dibuat oleh tim dari Twitter pada tahun 2011
(oleh Mark Otto & Jacob Thornton) sebagai solusi agar tampilan web menjadi
seragam di berbagai browser dan perangkat. Kini, Bootstrap sudah menjadi
salah satu framework paling populer di dunia pengembangan web.
Tujuan utama Bootstrap adalah membuat desain web lebih cepat, mudah, dan konsisten.
Kelebihan Bootstrap
Berikut adalah alasan kenapa Bootstrap banyak digunakan
Keunggulan Penjelasan
Mobile-First Bootstrap dirancang untuk tampilan perangkat kecil dulu, lalu diperluas.
Responsif Gunakan grid 12-kolom untuk tampilan fleksibel di semua ukuran layar.
Cepat & Praktis Tinggal pakai class tanpa menulis CSS panjang.
Komponen Lengkap Tombol, kartu, form, navigasi, alert, carousel, modal, dll.
Konsisten Tampilannya stabil di berbagai browser & perangkat.
Dokumentasi Panduan resmi Bootstrap sangat lengkap dan mudah diikuti.
Cara Menggunakan Bootstrap
1. Melalui CDN (Cara Praktis)
Cukup tambahkan dua baris kode ke dalam file HTML:
2. Menggunakan NPM (Untuk Proyek Build Tools)
Jalankan perintah:
npm install bootstrap
Lalu import di file JS atau SCSS kamu:
js import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘bootstrap/dist/js/bootstrap.bundle.min.js’;
Komponen-Komponen Penting di Bootstrap
Bootstrap menyediakan banyak komponen siap pakai. Berikut beberapa yang paling sering digunakan:
Tombol
1. Navigasi (Navbar)
2.Kartu (Card)
Judul Card
Deskripsi singkat isi konten.
3. Formulir (Form)
4 .Peringatan (Alert)
5. Modal (Dialog Pop-up)
6.Sistem Grid di Bootstrap
Bootstrap menggunakan sistem grid 12 kolom yang fleksibel. Contoh layout 3 kolom seimbang:
Grid ini bisa diatur supaya berbeda di layar kecil (mobile) dan besar (desktop), contoh:
Kesimpulan
Bootstrap adalah solusi praktis dan cepat untuk membangun tampilan website yang modern,
responsif, dan user-friendly. Tanpa harus menulis CSS dari awal, kamu bisa menggunakan
berbagai komponen siap pakai hanya dengan menambahkan class tertentu.