Dua Cara Memasang Bootstrap di CodeIgniter 4 Beserta Kapan Harus Memilih Masing-Masing

Bootstrap adalah framework CSS paling populer di dunia untuk membangun tampilan web yang responsif dan konsisten. Bagi mahasiswa yang sedang belajar CodeIgniter 4, mengintegrasikan Bootstrap ke dalam proyek adalah langkah praktis untuk menghasilkan antarmuka yang rapi tanpa perlu menulis CSS dari nol. Ada dua cara resmi untuk melakukannya, masing-masing dengan kelebihan dan skenario penggunaan yang berbeda.

"Pilihan metode instalasi Bootstrap bukan soal benar atau salah — melainkan soal konteks: apakah proyekmu membutuhkan akses internet stabil, atau harus bisa berjalan secara offline sepenuhnya?"

Prasyarat Sebelum Mulai

Pastikan Anda sudah memiliki:

• Proyek CodeIgniter 4 yang sudah berjalan (minimal akses ke http://localhost:8080)
• Setidaknya satu file layout/main.php yang berfungsi sebagai template utama (lihat artikel Render Section untuk panduannya)
• Teks editor seperti VS Code

Cara 1 — Memasang Bootstrap Lewat CDN (Content Delivery Network)

CDN adalah cara tercepat dan termudah. Anda tidak perlu mengunduh file apapun. Bootstrap disajikan langsung dari server CDN milik jsDelivr yang tersebar di seluruh dunia. Metode ini cocok untuk pengembangan dan proyek yang deployment-nya memerlukan koneksi internet.

Langkah — Tambahkan Link ke Layout Utama

Buka file app/Views/layout/main.php, lalu tambahkan tag CSS Bootstrap di dalam <head> dan tag JavaScript Bootstrap tepat sebelum tag penutup </body>.

<!-- app/Views/layout/main.php -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $this->renderSection('title') ?></title>

    <!-- ✅ Bootstrap CSS — via CDN -->
    <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>

    <?= $this->renderSection('content') ?>

    <!-- ✅ Bootstrap JS Bundle (termasuk Popper.js) — via CDN -->
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc4s9bIOgUxi8T/jzmMhBrPeudPkV3GDnMjJr6L3biq"
        crossorigin="anonymous"></script>
</body>
</html>

Setelah disimpan, buka browser dan coba buat tombol Bootstrap untuk memverifikasi keberhasilan pemasangan:

<!-- Tes di salah satu view Anda -->
<?= $this->section('content') ?>
<div class="container mt-4">
    <h1>Bootstrap Berhasil Dipasang!</h1>
    <button class="btn btn-primary">Tombol Bootstrap</button>
</div>
<?= $this->endSection() ?>

Jika tombol biru berhasil muncul dengan gaya Bootstrap, instalasi via CDN sudah berhasil.

Cara 2 — Memasang Bootstrap Secara Manual (Download & Pasang di Folder Public)

Metode manual cocok saat Anda mengerjakan proyek di lingkungan yang tidak memiliki koneksi internet stabil, atau saat Anda ingin memastikan versi Bootstrap yang digunakan tidak berubah tanpa sepengetahuan tim. File Bootstrap disimpan langsung di dalam proyek Anda.

Langkah 1 — Unduh File Bootstrap

Kunjungi halaman resmi Bootstrap di getbootstrap.com, lalu klik tombol "Download" dan pilih opsi "Compiled CSS and JS". Anda akan mendapatkan file ZIP berisi folder css/ dan js/.

Langkah 2 — Taruh File di Folder Public CodeIgniter 4

Ekstrak file ZIP yang diunduh, lalu salin dua file yang dibutuhkan ke dalam folder public/ proyek CI4 Anda. Struktur folder yang direkomendasikan adalah:

nama-proyek-ci4/
├── app/
├── public/              ← Folder yang bisa diakses browser
│   ├── css/
│   │   ├── bootstrap.min.css    ← Salin file ini
│   │   └── style.css            ← (CSS kustom milik Anda)
│   ├── js/
│   │   └── bootstrap.bundle.min.js  ← Salin file ini
│   └── index.php
├── system/
└── writable/

Langkah 3 — Hubungkan ke Layout dengan base_url()

Buka kembali file app/Views/layout/main.php dan gunakan fungsi base_url() bawaan CI4 untuk menghasilkan path yang benar ke file Bootstrap lokal Anda. Pastikan helper url sudah diaktifkan (secara default sudah aktif di CI4).

<!-- app/Views/layout/main.php -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $this->renderSection('title') ?></title>

    <!-- ✅ Bootstrap CSS — file lokal dari folder public/css/ -->
    <link href="<?= base_url('css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>

    <?= $this->renderSection('content') ?>

    <!-- ✅ Bootstrap JS — file lokal dari folder public/js/ -->
    <script src="<?= base_url('js/bootstrap.bundle.min.js') ?>"></script>

</body>
</html>

Perbandingan Dua Cara — Mana yang Harus Dipilih?

Aspek	Cara 1 — CDN	Cara 2 — Manual
Kemudahan setup	✅ Sangat mudah	⚠️ Perlu langkah tambahan
Butuh internet saat development	❌ Ya	✅ Tidak (file lokal)
Kecepatan loading (ada cache CDN)	✅ Lebih cepat di production	⚠️ Tergantung server hosting
Kontrol versi	⚠️ Bergantung CDN	✅ Penuh
Cocok untuk	Prototype, belajar cepat	Proyek final, offline dev

Kesimpulan

Untuk keperluan tugas kuliah dan pembelajaran, Cara 1 via CDN adalah pilihan yang paling efisien — satu baris kode langsung aktif. Namun saat Anda sudah mengerjakan proyek skripsi atau proyek klien yang lebih serius, biasakan menggunakan Cara 2 manual agar proyek Anda tidak bergantung pada koneksi internet pihak ketiga saat diuji dosen atau dipresentasikan. Kuasai keduanya, dan sesuaikan dengan konteks proyek yang sedang Anda kerjakan.