Cara Membuat Website dengan Bootstrap 5: Panduan Lengkap 2026
Mengapa Bootstrap adalah Pilihan Terbaik untuk Membuat Website Cepat?
Cara membuat website dengan Bootstrap adalah salah satu pendekatan paling efisien dalam dunia web development modern. Bootstrap adalah framework CSS open-source yang dikembangkan oleh Twitter, kini telah menjadi framework frontend paling populer di dunia dengan jutaan website yang menggunakannya. Versi terbarunya, Bootstrap 5, hadir tanpa ketergantungan jQuery dan menawarkan komponen yang lebih modern, sistem grid yang lebih fleksibel, serta utilitas CSS yang semakin lengkap.
Alasan utama menggunakan Bootstrap adalah kecepatan pengembangan. Daripada menulis CSS dari nol untuk setiap elemen - navbar, tombol, kartu, modal, formulir - Bootstrap menyediakan semua komponen itu siap pakai dengan tampilan profesional. Anda bisa membangun prototype atau website lengkap dalam hitungan jam, bukan hari. Ditambah lagi, semua komponen Bootstrap sudah diuji untuk kompatibilitas lintas browser dan responsivitas di semua ukuran layar.
Persiapan Sebelum Memulai
Sebelum belajar cara membuat website dengan Bootstrap, pastikan Anda sudah memiliki pemahaman dasar tentang HTML dan CSS. Bootstrap tidak menggantikan HTML/CSS - ia memperluas kemampuannya. Selain itu, siapkan:
- Text Editor - Visual Studio Code (VS Code) sangat direkomendasikan. Install ekstensi Live Server untuk preview real-time.
- Browser Modern - Chrome atau Firefox dengan DevTools untuk inspeksi elemen dan responsivitas.
- Koneksi Internet - Untuk mengakses Bootstrap via CDN (cara paling mudah untuk memulai).
Langkah 1: Cara Memasang Bootstrap 5
Ada dua cara utama memasang Bootstrap ke project Anda: via CDN atau via npm. Untuk pemula, CDN adalah cara termudah.
Cara 1: Menggunakan CDN (Paling Mudah)
Buat file index.html dan tambahkan kode berikut. Bootstrap CSS diletakkan di <head>,
Bootstrap JS diletakkan sebelum penutup </body>:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Bootstrap Saya</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body>
<h1 class="text-center text-primary mt-5">Halo, Bootstrap!</h1>
<!-- Bootstrap 5 JS Bundle (termasuk Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmLXzMLhM8M+C7aLVdgFYhRX9Lj9"
crossorigin="anonymous"></script>
</body>
</html>
Buka file ini di browser - Anda akan melihat teks "Halo, Bootstrap!" dengan warna biru dan rata tengah.
Bootstrap sudah aktif! Tag class text-center, text-primary, dan mt-5
adalah utility classes Bootstrap yang mengatur alignment, warna, dan margin.
Cara 2: Menggunakan npm (untuk Project yang Lebih Serius)
# Inisialisasi project
npm init -y
# Install Bootstrap
npm install bootstrap
# Di file JavaScript utama Anda
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';Langkah 2: Memahami Bootstrap Grid System
Grid system adalah jantung dari Bootstrap. Ini adalah sistem 12-kolom yang membuat layout responsif menjadi
sangat mudah dibuat. Konsep dasarnya: bungkus konten dalam .container, tambahkan .row,
lalu isi dengan .col-*.
<div class="container">
<div class="row">
<!-- 3 kolom sama rata (masing-masing 4 dari 12) -->
<div class="col-md-4">
<p>Kolom pertama</p>
</div>
<div class="col-md-4">
<p>Kolom kedua</p>
</div>
<div class="col-md-4">
<p>Kolom ketiga</p>
</div>
</div>
<div class="row">
<!-- Layout sidebar: konten lebar + sidebar sempit -->
<div class="col-md-8">
<p>Konten utama (8 kolom)</p>
</div>
<div class="col-md-4">
<p>Sidebar (4 kolom)</p>
</div>
</div>
</div>Breakpoint Bootstrap 5
Bootstrap 5 memiliki 6 breakpoint yang bisa dikombinasikan untuk layout yang berbeda di setiap ukuran layar:
| Breakpoint | Class Prefix | Lebar Minimum |
|---|---|---|
| Extra small | col- |
<576px (default) |
| Small | col-sm- |
≥576px |
| Medium | col-md- |
≥768px |
| Large | col-lg- |
≥992px |
| Extra large | col-xl- |
≥1200px |
| XXL | col-xxl- |
≥1400px |
<!-- Responsif: 1 kolom di mobile, 2 di tablet, 4 di desktop -->
<div class="row">
<div class="col-12 col-sm-6 col-md-3">Produk 1</div>
<div class="col-12 col-sm-6 col-md-3">Produk 2</div>
<div class="col-12 col-sm-6 col-md-3">Produk 3</div>
<div class="col-12 col-sm-6 col-md-3">Produk 4</div>
</div>Langkah 3: Membuat Navbar Bootstrap yang Responsif
Navbar adalah komponen pertama yang biasanya dibuat saat membangun website. Bootstrap menyediakan komponen navbar yang sudah responsif - otomatis berubah menjadi hamburger menu di layar kecil:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<!-- Logo / Brand -->
<a class="navbar-brand fw-bold" href="/">NamaBrand</a>
<!-- Tombol hamburger menu untuk mobile -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMenu"
aria-controls="navbarMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menu items -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#beranda">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#layanan">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tentang">Tentang</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kontak">Kontak</a>
</li>
</ul>
<a href="#daftar" class="btn btn-warning fw-bold ms-lg-3">Mulai Sekarang</a>
</div>
</div>
</nav>
Class navbar-expand-lg berarti menu akan tampil horizontal di layar ≥992px dan berubah
menjadi hamburger menu di bawahnya. Class ms-auto mendorong menu ke kanan (margin-start: auto).
Langkah 4: Membuat Hero Section yang Menarik
Hero section adalah bagian pertama yang dilihat pengunjung. Gunakan utility classes Bootstrap untuk membuat hero yang menonjol dengan cepat:
<section id="beranda" class="bg-primary text-white py-5">
<div class="container py-5">
<div class="row align-items-center">
<div class="col-lg-6">
<span class="badge bg-warning text-dark mb-3">
Launching Sekarang
</span>
<h1 class="display-4 fw-bold mb-3">
Solusi Digital Terbaik untuk Bisnis Anda
</h1>
<p class="lead mb-4">
Kami membantu UMKM Indonesia berkembang dengan teknologi website
modern, cepat, dan mudah dikelola.
</p>
<div class="d-flex flex-wrap gap-3">
<a href="#layanan" class="btn btn-warning btn-lg fw-bold px-4">
Lihat Layanan
</a>
<a href="#kontak" class="btn btn-outline-light btn-lg px-4">
Hubungi Kami
</a>
</div>
</div>
<div class="col-lg-6 mt-5 mt-lg-0">
<img src="hero-image.png" alt="Ilustrasi solusi digital" class="img-fluid">
</div>
</div>
</div>
</section>
Langkah 5: Membuat Card Grid untuk Layanan atau Produk
Komponen card Bootstrap sangat serbaguna - bisa digunakan untuk menampilkan layanan, produk, artikel blog, atau portofolio. Berikut contoh grid kartu layanan dengan 3 kolom:
<section id="layanan" class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<h2 class="fw-bold">Layanan Kami</h2>
<p class="text-muted">Solusi lengkap untuk kebutuhan digital bisnis Anda</p>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center p-4">
<div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex
align-items-center justify-content-center mb-4"
style="width: 64px; height: 64px;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
fill="currentColor" class="text-primary" viewBox="0 0 16 16">
<path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4
c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75
c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302
A1.46 1.46 0 0 0 1 4.01V9c0 .325.078.502.145.602.07.105.17.188.302.254
a1.464 1.464 0 0 0 .538.143L2.01 10H14c.325 0 .502-.078.602-.145
a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9V4c0-.325-.078-.502
-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078
-.602.145z"/>
</svg>
</div>
<h5 class="card-title fw-bold">Pembuatan Website</h5>
<p class="card-text text-muted">
Website profesional responsif yang dioptimalkan untuk SEO dan
performa tinggi.
</p>
<a href="#kontak" class="btn btn-outline-primary mt-3">
Pelajari Lebih Lanjut
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm border-0 border-top border-3 border-warning">
<div class="card-body text-center p-4">
<div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex
align-items-center justify-content-center mb-4"
style="width: 64px; height: 64px;">
<!-- Ikon SEO -->
<span class="fw-bold text-warning fs-5">SEO</span>
</div>
<h5 class="card-title fw-bold">Optimasi SEO</h5>
<p class="card-text text-muted">
Tingkatkan peringkat website Anda di Google dan raih lebih banyak
pengunjung organik.
</p>
<a href="#kontak" class="btn btn-warning mt-3 fw-bold">
Pelajari Lebih Lanjut
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center p-4">
<div class="bg-success bg-opacity-10 rounded-circle d-inline-flex
align-items-center justify-content-center mb-4"
style="width: 64px; height: 64px;">
<span class="fw-bold text-success fs-5">+%</span>
</div>
<h5 class="card-title fw-bold">Digital Marketing</h5>
<p class="card-text text-muted">
Strategi pemasaran digital terintegrasi untuk meningkatkan penjualan
dan brand awareness.
</p>
<a href="#kontak" class="btn btn-outline-success mt-3">
Pelajari Lebih Lanjut
</a>
</div>
</div>
</div>
</div>
</div>
</section>
Class g-4 pada .row adalah gutter - jarak antar kolom dan baris.
Nilainya berkisar dari g-1 (4px) hingga g-5 (48px).
Class h-100 membuat semua kartu sama tinggi, sedangkan shadow-sm menambahkan bayangan halus.
Langkah 6: Komponen Bootstrap Lain yang Sering Digunakan
Accordion / FAQ
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button fw-bold" type="button"
data-bs-toggle="collapse" data-bs-target="#faq1">
Berapa biaya pembuatan website?
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show"
data-bs-parent="#faqAccordion">
<div class="accordion-body">
Biaya pembuatan website bervariasi mulai dari Rp 1.500.000 tergantung
jenis dan kompleksitas website yang dibutuhkan.
</div>
</div>
</div>
<!-- Tambahkan accordion-item lebih... -->
</div>Modal (Popup)
<!-- Tombol trigger -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#modalKontak">
Hubungi Kami
</button>
<!-- Modal -->
<div class="modal fade" id="modalKontak" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fw-bold">Hubungi Kami</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Form kontak di sini -->
</div>
</div>
</div>
</div>Alert dan Badge
<!-- Alert -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Berhasil!</strong> Pesan Anda telah terkirim.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<!-- Badge -->
<span class="badge bg-warning text-dark">Populer</span>
<span class="badge bg-success">Baru</span>
<span class="badge bg-danger">Diskon 30%</span>Langkah 7: Kustomisasi Bootstrap dengan CSS Custom
Bootstrap bisa dikustomisasi untuk mencerminkan identitas brand Anda. Buat file custom.css
dan load setelah Bootstrap CSS untuk menimpa style defaultnya:
/* custom.css */
/* Override warna primary Bootstrap */
:root {
--bs-primary: #6c3bff; /* Ungu sebagai warna brand */
--bs-primary-rgb: 108, 59, 255;
}
/* Font custom */
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Navbar custom */
.navbar-brand {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.5px;
}
/* Button dengan efek hover kustom */
.btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(108, 59, 255, 0.3);
}
/* Hero section gradient */
.hero-gradient {
background: linear-gradient(135deg, #6c3bff 0%, #3b82f6 100%);
}
/* Card dengan efek hover */
.card-hover {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}Langkah 8: Membuat Footer Lengkap dengan Bootstrap
<footer class="bg-dark text-white py-5">
<div class="container">
<div class="row g-4">
<div class="col-lg-4">
<h5 class="fw-bold mb-3">NamaBrand</h5>
<p class="text-white-50">
Solusi digital terpercaya untuk UMKM Indonesia. Kami hadir membantu
bisnis Anda berkembang di era digital.
</p>
</div>
<div class="col-md-4 col-lg-2">
<h6 class="fw-bold mb-3">Layanan</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Pembuatan Website</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Optimasi SEO</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Digital Marketing</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-2">
<h6 class="fw-bold mb-3">Perusahaan</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-white-50 text-decoration-none">Tentang Kami</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Blog</a></li>
<li><a href="#" class="text-white-50 text-decoration-none">Karier</a></li>
</ul>
</div>
<div class="col-md-4 col-lg-4">
<h6 class="fw-bold mb-3">Newsletter</h6>
<p class="text-white-50 small mb-3">Dapatkan tips web development dan bisnis digital terbaru.</p>
<form class="d-flex gap-2">
<input type="email" class="form-control form-control-sm"
placeholder="email@contoh.com">
<button class="btn btn-warning btn-sm fw-bold" type="submit">Langganan</button>
</form>
</div>
</div>
<hr class="border-secondary my-4">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
<p class="text-white-50 small mb-2 mb-md-0">
© 2026 NamaBrand. Semua hak dilindungi.
</p>
<div class="d-flex gap-3">
<a href="#" class="text-white-50 text-decoration-none small">Kebijakan Privasi</a>
<a href="#" class="text-white-50 text-decoration-none small">Syarat Penggunaan</a>
</div>
</div>
</div>
</footer>Langkah 9: Upload Website Bootstrap ke Hosting
Website Bootstrap yang sudah selesai adalah kumpulan file statis (HTML, CSS, JS, gambar). Cara upload-nya ke hosting sangat mudah:
- Pilih paket hosting yang tepat - Shared hosting adalah pilihan ideal untuk website Bootstrap statis. HostingEkspres menyediakan hosting murah dengan cPanel yang memudahkan pengelolaan file.
-
Buka File Manager di cPanel - Login ke cPanel hosting Anda, buka File Manager,
dan navigasi ke folder
public_html. -
Upload semua file project - Upload file
index.html,custom.css, dan semua folder (images, js, dll). Pastikan struktur folder tetap sama. -
Jika menggunakan CDN Bootstrap - Tidak perlu upload file Bootstrap; cukup pastikan
link CDN di
<head>sudah benar. - Uji di browser - Buka domain Anda. Periksa semua halaman dan pastikan responsivitas berfungsi dengan baik di mobile dan desktop.
Kesimpulan
Cara membuat website dengan Bootstrap 5 adalah pilihan cerdas bagi siapa pun yang ingin membangun website responsif dan profesional dengan cepat. Dengan grid system yang powerful, ratusan komponen siap pakai, dan utility classes yang komprehensif, Bootstrap mempersingkat waktu pengembangan secara signifikan. Mulailah dengan template sederhana, pelajari grid system secara mendalam, kuasai komponen-komponen utama, dan jangan ragu untuk mengkustomisasi sesuai identitas brand Anda.
Setelah website Bootstrap Anda selesai, pastikan dipublikasikan dengan domain dan hosting yang handal. HostingEkspres menyediakan layanan hosting Indonesia dengan uptime tinggi, cPanel yang mudah digunakan, dan support responsif - sempurna untuk website Bootstrap Anda.
Baca Juga:
- 5 AI Website Builder Terbaik 2026: Perbandingan Lengkap & Rekomendasi
- Cara Belajar Coding untuk Pemula: Panduan Mulai dari Nol Hingga Bisa Buat Website
FAQ - Pertanyaan Umum tentang Membuat Website dengan Bootstrap
Apakah Bootstrap gratis digunakan?
Ya, Bootstrap sepenuhnya gratis dan open-source di bawah lisensi MIT. Anda bisa menggunakannya untuk proyek personal maupun komersial tanpa biaya. Source code-nya tersedia di GitHub dan bisa dimodifikasi sesuai kebutuhan.
Apa perbedaan Bootstrap 4 dan Bootstrap 5?
Bootstrap 5 memiliki beberapa perbedaan utama: tidak lagi membutuhkan jQuery, sistem grid diperluas dengan
breakpoint xxl baru, utilitas CSS yang lebih lengkap, komponen baru seperti Offcanvas,
peningkatan aksesibilitas, dan dukungan RTL bawaan. Bootstrap 5 adalah versi yang direkomendasikan
untuk semua project baru.
Apakah saya perlu belajar CSS sebelum belajar Bootstrap?
Sangat disarankan. Anda perlu memahami konsep seperti box model, display, flexbox, dan positioning agar bisa menggunakan Bootstrap secara efektif dan mengatasi masalah ketika muncul. Minimal kuasai dasar-dasar CSS selama 1–2 minggu, lalu lanjutkan ke Bootstrap.
Berapa lama belajar Bootstrap hingga bisa membuat website?
Jika sudah memiliki dasar HTML dan CSS, Anda bisa membuat website sederhana dengan Bootstrap dalam 2–3 hari belajar. Untuk menguasai semua komponen dan fitur Bootstrap secara komprehensif, butuh sekitar 2–4 minggu. Kuncinya adalah langsung praktek membuat project nyata.
Apakah Bootstrap cocok untuk semua jenis website?
Bootstrap sangat cocok untuk website perusahaan, landing page, dashboard admin, portofolio, dan e-commerce sederhana. Namun untuk desain yang sangat unik dan kustom, Bootstrap bisa terasa membatasi. Dalam kasus tersebut, Tailwind CSS atau pure CSS bisa menjadi alternatif yang lebih fleksibel.
Bagaimana cara mengubah warna default Bootstrap?
Dua cara utama: (1) Override CSS variable di file custom.css Anda dengan
:root { --bs-primary: #warna-anda; } setelah import Bootstrap CSS.
(2) Compile Bootstrap dari source dengan mengubah variabel Sass. Cara pertama lebih mudah untuk pemula.
Apakah Bootstrap bisa digunakan bersama React atau Vue?
Ya. Bootstrap CSS bisa digunakan langsung di project React atau Vue. Untuk komponen JavaScript Bootstrap,
gunakan versi yang sudah diporting: React Bootstrap (react-bootstrap) untuk React,
atau BootstrapVue untuk Vue - ini menghindari konflik antara manipulasi DOM Bootstrap
dan virtual DOM React/Vue.
Artikel Terkait
Cara Membuat Website dari Nol: Panduan Lengkap 2026
Pelajari cara membuat website dari nol dengan panduan lengkap step-by-step. Pilih hosting, domain, CMS, dan desain website profesional untuk bisnis Anda.
Baca Selengkapnya →Cara Membuat Website dengan HTML & CSS: Panduan Pemula Lengkap
Pelajari cara membuat website dengan HTML dan CSS dari nol. Panduan pemula lengkap dengan contoh kode nyata, mulai dari struktur dasar HTML hingga styling dengan CSS modern.
Baca Selengkapnya →Cara Membuat Landing Page yang Mengkonversi: Panduan Lengkap 2026
Pelajari cara membuat landing page yang mengkonversi pengunjung menjadi pelanggan. Panduan lengkap 2026 mulai dari struktur, copywriting, desain, hingga optimasi konversi dengan teknik terbukti.
Baca Selengkapnya →Cara Membuat Website Responsive: Panduan Mobile-First Design 2026
Panduan lengkap cara membuat website responsive dengan pendekatan mobile-first design. Pelajari teknik CSS Grid, Flexbox, media queries, dan best practice untuk website yang tampil sempurna di semua perangkat.
Baca Selengkapnya →Butuh Hosting untuk Website Anda?
Dapatkan hosting cepat, aman, dan terpercaya dengan harga terjangkau. Gratis domain, SSL, dan support 24/7.
Jangan Ketinggalan Promo!
Subscribe newsletter kami dan dapatkan diskon hingga 50% untuk pembelian pertama kamu.
Gratis, tanpa spam. Bisa unsubscribe kapan saja.