Author : flanoids Date : June 4, 2025

Ingin membuat website yang responsif? Untuk mempermudah proses desain website, Bootstrap menjadi salah satu solusi yang dapat dipertimbangkan.

Bootstrap adalah sebuah framework web developer gratis dan open-source yang dapat digunakan untuk membuat situs atau aplikasi web. Alat ini menyediakan berbagai komponen siap pakai, grid system fleksibel, dan mendukung akses mobile-friendly.

Namun, masih banyak yang belum mengetahui cara menggunakan Bootstrap dengan benar. Oleh karena itu, simak artikel ini untuk mengetahui panduan cara mengunduh, memodifikasi, dan membuat berbagai komponen dalam Bootstrap!

Baca juga: Bootstrap Adalah: Fungsi dan Kelebihannya!

1. Mengunduh Bootstrap

Sebelum memulai, Anda perlu mengunduh atau menyiapkan Bootstrap terlebih dahulu. Ada beberapa cara untuk melakukannya, yaitu menggunakan CDN, npm, dan melalui framework Laravel atau React.

Menggunakan CDN

Cara tercepat dan termudah untuk menggunakan Bootstrap adalah melalui Content Delivery Network (CDN). Anda hanya perlu menambahkan link Bootstrap ke dalam file HTML tanpa harus mengunduh atau menginstal apa pun.

  • Buka file HTML dan tambahkan link CSS Bootstrap di dalam <head>:
Menambahkan link CSS Bootstrap
  • Tambahkan script JavaScript Bootstrap sebelum penutup </body>:
Menambahkan script JavaScript Bootstrap
  • Mulailah menggunakan kelas Bootstrap seperti container, btn btn-primary, atau row di HTML Anda.

Instalasi via npm

Untuk proyek yang lebih besar atau menggunakan workflow modern, kami menyarankan Anda untuk melakukan instalasi via npm. Dengan cara ini, Anda dapat mengintegrasikannya dengan tools seperti Webpack, Laravel Mix, atau Vite.

  • Pastikan sudah menginstall Node.js dan npm dalam perangkat Anda.
  • Buka terminal dan jalankan perintah berikut ini:
bash

npm install bootstrap
  • Impor Bootstrap ke dalam file JavaScript atau SCSS Anda
import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  • Jalankan build tools Anda (misal dengan kode npm run dev atau npm start)
  • Jika menggunakan Sass, Anda bisa mengimpor file sumber Bootstrap untuk melakukan kustomisasi lebih lanjut.

Integrasi Bootstrap dengan Framework Laravel atau React

Tahukah Anda bahwa Bootstrap bisa diintegrasikan dengan framework modern seperti Laravel atau React? Hal ini dapat meningkatkan kecepatan pembuatan aplikasi web dibandingkan pada umumnya.

Integrasi dengan Laravel

  • Instal Bootstrap via npm dengan kode berikut
bash

npm install bootstrap
  • Selanjutnya, impor Bootstrap di resources/js/app.js
javascript

import 'bootstrap';
  • Compile asset dengan perintah ini
bash

npm run dev

Integrasi dengan React

  • Install Bootstrap dan React Bootstrap dengan perintah berikut
bash

npm install bootstrap react-bootstrap
  • Lalu, impor di komponen React menggunakan kode ini
javascript

import 'bootstrap/dist/css/bootstrap.min.css';

import { Button } from 'react-bootstrap';
  • Bootstrap sudah siap digunakan di komponen React Anda!

2. Memodifikasi Bootstrap

Untuk membuat platform Bootstrap sesuai dengan kebutuhan proyek, Anda dapat memodifikasinya dengan mudah. Berikut kami sertakan beberapa opsi modifikasi Bootstrap sebagai inspirasi Anda:

1. Override CSS dengan File Eksternal

Cara termudah untuk menyesuaikan tampilan Bootstrap adalah dengan menambahkan file CSS kustom setelah file CSS Bootstrap. Dalam file ini, Anda dapat menimpa (override) kelas-kelas Bootstrap yang ada.

  • Buat file custom.css dan letakkan setelah Bootstrap CSS di HTML projek.
html

<link href="bootstrap.min.css" rel="stylesheet">

<link href="custom.css" rel="stylesheet">
  • Gunakan selektor yang sama dan ubah properti yang diinginkan. Dalam contoh ini, misalnya Anda ingin mengganti warna tombol utama, maka tulislah kode berikut ini:
btn-primary {
background-color: #FC7F66;

  border-color: #FC7F66;

}
  • Pastikan selector Anda cukup spesifik agar menimpa style Bootstrap dengan benar.

2. Menggunakan Variabel Sass untuk Kustomisasi Lebih Dalam

Bootstrap dibangun dengan Sass. Hal ini memungkinkan Anda untuk mengubah variabel default sebelum mengkompilasi ulang file CSS. Dengan cara ini, Anda dapat menyesuaikan tema, warna, ukuran, dan lainnya secara menyeluruh.

  • Download source Bootstrap (bukan hanya file CSS).
  • Edit file variabel Sass, misalnya _variables.scss, sebelum mengimpor Bootstrap.
  • Ubah nilai variabel seperti $primary, $font-family-base, dan lain sebagainya.
  • Compile ulang Sass menjadi CSS menggunakan tools seperti sass atau Laravel Mix

3. Menghapus Komponen yang Tidak Diperlukan

Apakah Anda ingin mengurangi ukuran file CSS dan JavaScript? Tenang saja, pilihlah beberapa komponen yang benar-benar dibutuhkan. Imporlah bagian-bagian tertentu ini dengan menggunakan versi modular dari Bootstrap.

  • Gunakan Bootstrap Customizer di situs resmi Bootstrap.
  • Pilih hanya komponen yang Anda butuhkan, lalu download versi hasil kustomisasi.
  • Gunakan file CSS dan JS hasil customizer di proyek Anda

3. Membuat Berbagai Komponen dengan Bootstrap

Bootstrap menyediakan berbagai komponen siap pakai yang bisa Anda gunakan langsung. Mari simak cara menggunakan Bootstrap untuk membuat tombol, navbar, card, dan komponen penting lainnya dengan mudah!

Tombol (Buttons)

Tombol merupakan salah satu komponen penting di website. Biasanya, tombol ini digunakan untuk meningkatkan jumlah konversi dalam bisnis. Dengan Bootstrap, Anda bisa membuatnya dalam beberapa detik.

  • Gunakan class btn sebagai dasar.
  • Tambahkan variasi warna seperti btn-primary, btn-success, atau btn-danger.
  • Untuk kustomisasi ukurannya, gunakan kode btn-sm (kecil) atau btn-lg (besar).

Berikut adalah contoh kodenya: 

Kode Button
Contoh Kode Pembuatan Button

Untuk membuat tombol non aktif, Anda bisa menggunakan disabled. Tambahkan juga ikon dengan Font Awesome jika perlu.

Navigasi (Navbar)

Navbar sangat penting agar user dapat menavigasi website Anda. Beruntungnya, Bootstrap menyediakan komponen navbar yang mudah digunakan. Ikuti langkah-langkah berikut:

  • Buat struktur dasar dengan navbar navbar-expand-lg.
  • Tambahkan logo dan menu menggunakan navbar-brand dan nav-item.
  • Aktifkan mode mobile dengan navbar-toggler.

Berikut adalah contoh kodenya:

Kode Navbar

Agar navbar ini selalu muncul di atas, gunakan fixed-top. Sesuaikan warnanya juga dengan bg-dark atau bg-primary.

Baca juga: 5 Cara Buat Landing Page Gratis yang Mudah Diikuti Pemula

Kartu (Cards)

Anda bisa menggunakan elemen card untuk menampilkan konten ringkas seperti artikel, produk, atau profil. Berikut adalah langkah-langkah pembuatannya:

  • Gunakan class card sebagai wadah.
  • Tambahkan card-body untuk konten utama.
  • Masukkan gambar dengan card-img-top.

Berikut adalah contoh kode yang dapat Anda gunakan:

Kode Cards

Formulir (Forms)

Formulir digunakan untuk mengumpulkan data dari pengguna. Beruntungnya, Bootstrap dapat membantu membuat formulir dengan gaya yang konsisten. Ikuti langkah-langkahnya berikut ini:

  • Gunakan form-control untuk input teks.
  • Tambahkan label dengan form-label.
  • Untuk menambahkan checkbox atau radio, gunakan kode form-check.

Berikut adalah contoh kodenya untuk membuat formulir sederhana:

Kode Forms
Contoh Kode Pembuatan Form

Modal (Popup Dialog)

Elemen yang dapat Anda buat selanjutnya adalah Modal atau popup dialog. Biasanya, modal digunakan untuk menampilkan konten tambahan tanpa meninggalkan halaman saat ini. Berikut adalah langkah-langkah dalam membangun modal dalam Bootstrap:

  • Buat struktur modal dengan modal-dialog.
  • Tambahkan tombol trigger dengan data-bs-toggle="modal".
  • Atur konten yang ingin Anda buat di dalam modal-body.

Berikut adalah contoh kode yang dapat Anda terapkan:

Kode Popup Dialog
Contoh Kode Popup Dialog

Gunakan modal-lg untuk ukuran yang lebih besar dan tambahkan animasi dengan fade.

Slider Gambar (Carousel)

Elemen carousel digunakan untuk menampilkan slideshow gambar atau konten lainnya, seperti promo. Berikut adalah langkah-langkahnya:

  • Gunakan carousel slide sebagai wadah.
  • Tambahkan gambar dengan carousel-item.
  • Aktifkan kontrol dengan carousel-control-prev/next.

Contoh kodenya adalah sebagai berikut:

Kode Carousel

Sistem Grid (Grid System)

Terakhir, Anda bisa membuat grid system juga. Grid system digunakan untuk mengatur tata letak halaman secara responsif. Untuk membuat grid system, ikuti langkah-langkah di bawah ini:

  • Gunakan container atau container-fluid sebagai wadah.
  • Bagi kolom dengan row dan col-md-6 (misalnya).

Berikut adalah contoh kodenya:

Kode Grid System

Pelajari Ilmu Web Developer Lebih Lanjut Bersama Coding Studio!

Itulah panduan tentang cara menggunakan Bootstrap sesuai kebutuhan. Dengan memahami kegunaan dan membuat elemen dalam Bootstrap, Anda dapat membangun antarmuka web yang responsif dan menarik.

Namun, untuk menjadi seorang web developer yang handal, Anda perlu memiliki pemahaman yang lebih mendalam dan praktik yang konsisten. 

Ingin belajar lebih dalam tentang pengembangan website? Daftarkan diri Anda di kursus web programming dari Coding Studio!

Dalam kursus ini, Anda akan mendapatkan video learning HTML, CSS, dan JavaScript fundamental untuk website yang menarik dan interaktif. 

Tak hanya menyediakan materi yang ter-update, para akademisi dan mentor kami juga menggunakan pendekatan praktis dan studi kasus nyata. Ini membuat Anda paham akan materi dan siap praktik di dunia kerja!

Jangan lewatkan kesempatan ini! Kunjungi website kami dan mulai rencana karier Anda sebagai web developer profesional!