How to Install Bootstrap in Visual Studio Code
Bootstrap 4 merupakan salah satu framework CSS yang hingga saat ini masih cukup populer di kalangan web developer. Sebagai seorang web developer, tentunya kita harus bisa menginstall bootstrap 4 agar bisa menggunakannya. Pada artikel kali ini, kita akan membahas cara install bootstrap 4 di XAMPP pada Windows baik secara offline maupun dengan memanfaatkan CDN. Namun, sebelum masuk ke bagaimana caranya, alangkah baiknya kita sedikit mengenal framework CSS populer ini.
Bootstrap dengan versi 4 ini termasuk versi yang lama dari bootstrap. Hal ini karena saat ini sudah hadir bootstrap 5 yang tentunya lebih lengkap lagi fitur-fiturnya. Meskipun sudah tertinggal, Bootstrap 4 memiliki berbagai macam fitur yang cukup lengkap dan sangat berguna bagi kita dalam merancang suatu tampilan website.
Bootstrap 4 dapat memudahkan kita saat merancang tampilan website kita. Sehingga waktu yang kita butuhkan untuk membangun suatu website pun bisa menjadi lebih cepat dari sebelumnya. Hal ini bisa meningkatkan produktivitas kita dalam membuat website.
Persiapan Sebelum Install Bootstrap 4
Ada beberapa software yang perlu Anda siapkan sebelum menginstall bootstrap 4. Tentunya software di bawah dapat membantu Anda dalam membuat website. Apa saja? Berikut softwarenya:
1. Text Editor
Persiapan pertama yang harus kita lakukan adalah menyiapkan text editor. Kita, biasanya menggunakan software code editor di windows yang sudah cukup populer seperti Visual Studio Code, Sublime Text, Notepad++, dan lain sebagainya. Nah, pada tutorial kali ini, kita akan menggunakan Visual Studio Code sebagai code editor yang akan kita gunakan.
2. Web Browser
Kemudian persiapan selanjutnya sebelum masuk ke cara install bootstrap 4 adalah dengan menyiapkan web browser. Browser ini akan kita gunakan untuk melakukan pengecekan apakah tampilan website sudah sesuai atau belum. Browser yang akan kita gunakan kali ini adalah Google Chrome yang biasanya sudah ada di windows kita masing-masing.
Dengan browser ini, kita akan membuka file HTML kita nanti. Tampilan file HTML pada browser ini lah yang akan kita gunakan untuk melihat seperti apa tampilan HTML kita setelah kita berhasil melakukan proses install bootstrap 4 di xampp pada windows kita.
4. Software untuk Ekstrak File
Persiapan yang terakhir adalah software yang nantinya akan kita pakai untuk mengekstrak file. Software seperti ini akan kita butuhkan karena file dari bootstrap yang kita download nantinya akan memiliki format zip. File dengan format zip tersebut, tidak bisa kita gunakan sebelum kita melakukan proses ekstrak.
Maka dari itu, kita membutuhkan software yang bisa membantu kita menyelesaikan proses ekstrak file. Pada tutorial kali ini, kita akan menggunakan bantuan dari software bernama WinRAR yang bisa membantu kita mengekstrak file dengan format zip.
5. XAMPP (Optional)
XAMPP merupakan web server untuk menjalankan script PHP. Di tutorial ini, kita akan menginstall bootstrap di XAMPP. Namun, Anda tidak harus menggunakan XAMPP untuk dapat menggunakan bootstrap ini. Bagi Anda yang belum menginstall XAMPP, Anda bisa membaca artikel Cara Instal XAMPP agar mengetahui bagaimana cara instalasinya dengan benar.
Cara Install Bootstrap 4 secara Offline
Setelah semua peralatan pendukung sudah kita siapkan, sekarang saat nya kita masuk ke proses install bootstrap 4 di xampp pada windows. Pada bagian pertama ini, kita akan membahas mengenai cara install bootstrap 4 di xampp pada windows secara offline.
Ketika kita menggunakan cara yang satu ini, maka bootstrap akan benar-benar terinstall pada website kita. Jadi, kita bisa menemukan folder bootstrap tersebut di folder projek website kita. Karena bersifat offline inilah sehingga bootstrap tetap bisa berjalan meskipun kita tidak terhubung ke internet.
Sudah penasaran bagaimana cara instal bootstrap 4 secara offline? Langsung saja simak langkah-langkahnya berikut ini!
1. Download Bootstrap 4 melalui Website Bootstrap
Langkah pertama yang harus kita lakukan adalah mengunjungi website resmi dari bootstrap. Pastikan menggunakan website yang versi 4 ya. Jangan sampai salah mengakses yang versi 5. Karena secara defaultnya, bootstrap sendiri akan mengarahkan kita ke bootstrap 5 yang merupakan versi terbaru.
Untuk mengakses halaman bootstrap versi 4 ini, silahkan klik di sini agar kita tidak salah dalam mengakses website dari bootstrap ini.
Setelah itu, kita akan langsung berada di halaman download dari Bootstrap versi 4. Nah langkah berikutnya adalah dengan langsung saja menekan tombol download berwarna ungu. Letak tombol tersebut sudah bisa kita ketahui dari gambar di atas. Yaitu di bagian bawah, sesuai dengan tanda lingkaran merah di gambar tersebut.
Lalu, kita akan mendownload package berformat zip yang berisi file framework bootstrap 4 ini terlebih dahulu. Tunggu beberapa saat hingga proses download selesai.
Sekali lagi, pastikan kita mendownload bootstrap dari halaman bootstrap versi 4. Karena terdapat beberapa file konfigurasi yang berbeda antara bootstrap versi 4 dengan bootstrap versi 5. Jadi, apabila kita menggunakan bootstrap versi 5 pada tutorial kali ini, bisa saja terjadi kesalahan langkah yang menimbulkan terjadinya error di kode programnya nanti.
2. Melakukan Proses Ekstrak dengan WinRAR
Langkah selanjutnya untuk cara install bootstrap 4 di xampp pada windows secara offline yaitu melakukan proses ekstrak terhadap file yang sudah kita download sebelumnya. Ketika download sudah selesai, silahkan menuju ke direktori tempat kita menyimpan hasil unduhan kita tadi.
Pada tutorial kali ini, folder penyimpanan untuk menyimpan hasil download sebelumnya berada di This PC\Downloads\Compressed\. Bagi kita yang menggunakan Internet Download Manager ketika melakukan download bootstrap sebelumnya, maka penyimpanannya kemungkinan besar sama seperti di gambar.
Kemudian, klik dua kali pada file hasil download kita sebelumnya. Ketika kita sudah menginstall WinRAR, maka file akan otomatis terbuka pada WinRAR kita. Sehingga tampilan WinRAR nya akan seperti berikut ini.
Kemudian klik kanan pada bootstrap-4.6.0-dist yang ada pada WinRAR. Setelah itu akan muncul beberapa aksi yang bisa kita terapkan ke file tersebut. Pilih aksi dengan Extract to a specified folder. Aksi ini kita pilih karena dengan menggunakan pilihan aksi tersebut, kita bisa mengatur hasil ekstrak dari file tersebut ingin kita letakkan di mana.
Setelah memilih aksi tersebut, maka akan muncul perintah untuk memilih direktori tempat kita meletakkan hasil proses ekstrak nantinya. Nah, pada tahap ini, arahkan direktori ke tempat kita menginstall xampp. Arahkan ke tempat dimana proyek kita berada.
Pada xampp, proyek website milik kita biasanya berada di dalam folder htdocs yang berada di xampp. Pilih folder proyek website kita untuk meletakkan hasil ekstrak file nantinya. Pada tutorial kali ini, proyek yang akan kita gunakan memiliki nama folder belajar_bootstrap.
Bagi yang masih kebingungan bagaimana cara menggunakan XAMPP, sangat disarankan untuk membaca Cara Instal XAMPP dan Menggunakannya terlebih dahulu.
Setelah itu, klik OK untuk melanjutkan ke proses ekstrak file tersebut.
3. Menambahkan index.html dan Membukanya pada Code Editor.
Langkah berikutnya untuk cara install bootstrap 4 adalah menambahkan index.html pada proyek kita. Nah, karena pada tutorial kali ini kita hanya akan melakukan import bootstrap secara sederhana saja, maka dari itu kita hanya menggunakan satu file yaitu file index.html. Pastikan pada direktori tempat ekstrak bootstrap sebelumnya (proyek website kita) sudah terdapat file index.html ini. Jika belum ada, silahkan buat file index.html terlebih dahulu pada direktori tersebut.
Klik kanan pada file tersebut sehingga muncul pilihan aksi seperti pada gambar di atas. Kemudian silahkan pilih aksi untuk membuka file tersebut dengan code editor favorit kita masing-masing. Sehingga kita akan langsung diarahkan ke code editor kita tersebut.
Karena pada tutorial kali ini, code editor yang digunakan adalah Visual Studio Code, maka pada gambar tersebut dipilihlah software code editor itu. Bagi kita yang menggunakan code editor selain Visual Studio Code, silahkan pilih aksi Open with lalu klik pada code editor yang ingin dipakai. Atau kita juga bisa langsung pergi ke code editor favorit masing-masing dan membuka file index.html lewat code editor tersebut.
4. Menambahkan Kode Pada index.html
Setelah itu kita akan berada di code editor kita masing-masing. Nah, ketika sudah membuka index.html di code editor masing-masing, cara install bootstrap 4 selanjutnya adalah dengan menambahkan sedikit kode untuk mengimport atau memanggil CSS pada Bootstrap 4 ke file index.html kita. Caranya cukup kita tuliskan kode berikut ini ke dalam file index.html
<!DOCTYPE html> <head> <title>Belajar Bootstrap 4</title> </head> <body> <h1>Hello World!</h1> <button>Click Me!</button> </body> </html> Kode tersebut sebenarnya merupakan kode yang cukup simpel. Kode <!DOCTYPE html> merupakan kode yang berfungsi untuk membuat browser nanti bisa mengenali bahwa file tersebut merupakan sebuah dokumen dengan jenis html. Dengan begitu, browser akan dapat membaca file index.html ini sebagai sebuah file yang mengandung tag html dan akan menampilkan tag tersebut sebagai sebuah formatting pada tampilannya nanti.
Kode tersebut seringkali kita abaikan keberadaannya padahal kode itu memiliki peran yang sangat penting sebagai identitas dari file tersebut.
Kemudian kode dengan tag <title> berguna untuk menampilkan judul halaman nantinya. Judul dari sebuah halaman html seperti ini bisa kita lihat di tab browser masing-masing. Biasanya, di sebelah kiri dari judul ini, terletak icon dari dari tiap halaman yang kita buka melalui browser.
Lalu tag <h1> berguna untuk menampilkan tulisan di dalamnya dengan format h1 atau Heading 1. Dengan menggunakan tag ini, kita akan mendapatkan tulisan yang besar dengan gaya bold. Selain itu, ada juga button yang sudah kita tambahkan dengan menggunakan tag <button>
Dengan beberapa kode program tersebut, maka kita bisa menghasilkan tampilan HTML standar seperti berikut ini.
Tampilan di bawah ini juga bisa kita lihat di browser masing-masing dengan mengaktifkan xampp kita terlebih dahulu. Selanjutnya kita bisa mengaksesnya dengan mengetikkan localhost lalu nama folder kita untuk melihat tampilan dari kode program kita tadi.
Wah, tampilan seperti itu sudah pasti terlihat sangat jadul bukan? Tampilan standar dari sebuah html sangat tidak menarik. Apalagi bagi sebuah website di mana website merupakan tempat orang-orang melihat tampilan berbagai konten yang harus menarik agar pengunjung bisa betah mengunjungi website tersebut setiap hari. Maka dari itu, tampilan semacam ini sangat tidak bagus bagi sebuah website.
Tambahkan kode berikut ini untuk mengimport CSS dari Bootstrap 4. Letakkan di atas tag title.
<link rel="stylesheet" href="bootstrap-4.6.0-dist\css\bootstrap.min.css"> Selain itu, di bawah dari tag </body> (di luar tag body), kita akan melakukan import terhadap JQuery dan Javascript dari Bootstrap 4. Tambahkan kode berikut ini.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"> <script src="http://bootstrap-4.6.0-distjsbootstrap.min.js"> Sehingga file index.html kita berisi kode seperti di bawah ini.
<!DOCTYPE html> <head> <link rel="stylesheet" href="bootstrap-4.6.0-dist\css\bootstrap.min.css"> <title>Belajar Bootstrap 4</title> </head> <body> <h1>Hello World!</h1> <button>Click Me!</button> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> <script src="http://bootstrap-4.6.0-distjsbootstrap.min.js"> </html> Bingung? Mari kita bongkar kode tersebut satu persatu!
<link rel="stylesheet" href="bootstrap-4.6.0-dist\css\bootstrap.min.css"> Kode ini merupakan kode utama pada proses import yang akan kita lakukan kali ini. Kode ini berguna untuk memanggil file bootstrap.min.css yang berada di folder hasil ekstrak sebelumnya. Dengan memanggil file ini, maka seluruh konfigurasi css bootstrap, sudah berhasil kita import ke file index.html.
Namun, hal itu masih tidak cukup. Kita juga harus melakukan import javascript dari Bootstrap 4 agar seluruh fungsi dan berbagai fitur dari Bootstrap 4 bisa kita gunakan tanpa kendala. Itulah dia fungsi dari kode berikut ini:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"> <script src="http://bootstrap-4.6.0-distjsbootstrap.min.js"> Kode tersebut berguna untuk memasukkan fungsi javascript yang juga terdapat di Bootstrap 4 agar bisa kita gunakan berbagai fiturnya. Walaupun sebenarnya apabila kita tidak menambahkan kode ini, kita tetap bisa melihat perubahan pada tampilan website kita. Itu karena CSS dari Bootstrap memang sudah terinstall dengan menggunakan kodingan sebelumnya. Namun, dalam pengembangannya nanti, ketika kita mencoba fitur dari Bootstrap 4 contohnya seperti modal box, maka kita membutuhkan javascript ini.
Namun, Javascript dari Bootstrap 4 tidak bisa berjalan seutuhnya sendirian karena ada beberapa fungsinya yang membutuhkan JQuery. Maka dari itu, sebelum baris terakhir yang merupakan kode untuk mengimport javascript dari Bootstrap 4, kita melakukan import terhadap library JQuery agar semuanya bisa berjalan dengan maksimal.
Nah, dengan sudah ter-import nya seluruh fungsi dari Bootstrap 4 ke file index.html kita, maka tampilan yang akan kita lihat pada browser sekarang akan lebih menarik dan enak untuk kita lihat.
Bagaimana? Terlihat lebih enak untuk kita lihat daripada sebelumnya ketika menggunakan tampilan html standar bukan? Perubahan yang terjadi ini, menandakan bahwa cara install Bootstrap 4 di xampp pada windows secara offline, kini sudah berhasil kita lakukan. Nah, agar lebih yakin lagi, mari kita menambahkan sedikit hiasan pada button dengan menambahkan class dari Bootstrap 4.
4. Menambahkan Class dari Bootstrap 4 Pada Button
Bootstrap merupakan framework CSS yang memanfaatkan class pada tiap tag html untuk membuat suatu perubahan terhadap object yang memiliki class tersebut. Maka dari itu, kita akan melakukan percobaan dengan menambahkan sedikit class dari bootstrap 4 pada button yang sudah kita buat sebelumnya agar terlihat semakin cantik dan enak untuk kita lihat.
Silahkan buka file index.html pada code editor masing-masing kemudian ubah kode pada tag button menjadi kode seperti di bawah ini.
<button class="btn btn-primary">Click Me</button> Kode tersebut merupakan cara untuk memberikan warna pada tombol dengan biru yang merupakan warna primary dari Bootstrap 4. Class btn yang pertama merupakan class untuk mengidentifikasi bahwa object tersebut merupakan button. Kemudian di sebelah kanannya terdapat btn-primary yang merupakan penegasan dari class sebelumnya. Class btn-primary berarti bahwa button tersebut akan kita berikan warna primary atau biru.
Dengan menambahkan kode program tersebut, maka file index.html kita akan berisi kode seperti di bawah ini.
<!DOCTYPE html> <head> <link rel="stylesheet" href="bootstrap-4.6.0-dist\css\bootstrap.min.css"> <title>Belajar Bootstrap 4</title> </head> <body> <h1>Hello World!</h1> <button class="btn btn-primary">Click Me!</button> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> <script src="http://bootstrap-4.6.0-distjsbootstrap.min.js"> </html> Dengan kode program seperti itu, ketika kita ingin melakukan pengecekan seperti apa hasilnya pada browser, maka kita akan melihat tampilan seperti berikut ini.
Hanya dengan menambahkan beberapa kode pada class nya, kini tampilan button sudah menjadi lebih bagus dan enak untuk kita lihat. Perubahan yang terjadi ini juga merupakan pertanda bahwa kita sudah berhasil melakukan cara install bootstrap 4 di xampp pada windows secara offline.
Nah, setelah mengetahui bagaimana proses instalasi bootstrap 4 secara offline, kini saatnya kita membahas mengenai bagaimana cara menginstall bootstrap 4 dengan CDN. Simak selengkapnya berikut ini!
Cara Install Bootstrap 4 Dengan CDN
Sebelumnya kita sudah mengetahui bagaimana caranya kita bisa melakukan proses install bootstrap 4 di xampp pada windows secara offline sehingga kita bisa mengakses fitur Bootstrap tanpa ribet dan tanpa perlu terkoneksi dengan internet. Cara sebelumnya memang terkesan ribet dan harus melakukan ekstrak ini itu dan sebagainya.
Berbeda dengan cara offline, cara install bootstrap 4 dengan CDN ini jauh lebih mudah untuk kita lakukan. Penasaran bagaimana caranya? Simak caranya berikut ini!
1. Membuka Website Bootstrap 4 dan Menyalin Template Kode Program
Pertama, silahkan menuju ke halaman dokumentasi Bootstrap 4. Kemudian, carilah bagian yang bernama Starter Template. Di situ terdapat beberapa baris kode program yang merupakan template yang bisa kita pakai apabila ingin menjalankan bootstrap 4 pada file kita.
Apabila kesulitan untuk mengakses website tersebut dan kesulitan menemukan di mana letak starter template sesuai pada gambar, silahkan copy saja kode program berikut ini.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"> <!-- Option 2: Separate Popper and Bootstrap JS --> <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"> --> </body> </html> 2. Meletakkan Template Bootstrap ke File Kita
Langkah selanjutnya untuk melakukan proses install bootstrap 4 di xampp pada windows dengan CDN adalah meletakkan template yang sudah kita salin tadi ke file kita. Apabila belum memiliki folder website dan file sama sekali, mari kita melakukan hal yang sama agar lebih mudah dalam melakukan prakteknya.
Silahkan membuat folder dengan nama belajar_bootstrap di dalam htdocs yang berada di folder xampp masing-masing. Kemudian, silahkan membuat file dengan nama index.html di dalam folder yang sudah kita buat tersebut. Setelah melakukan hal tersebut, maka kini kita memiliki struktur folder seperti berikut ini.
Nah, sekarang kita sudah memiliki file index.html baru yang masih benar-benar kosong. Sekarang saatnya kita untuk melakukan paste dari kode program yang telah kita salin sebelumnya. Kita harus, membuka file index.html ini dengan code editor masing-masing terlebih dahulu agar bisa memasukkan kode program yang sudah kita salin sebelumnya.
Silahkan buka file index.html di code editor masing-masing. Lalu klik kanan dan paste kode program yang sudah kita salin sebelumnya. Apabila kita melakukan hal yang benar, maka ketika kita membuka file index.html pada browser, maka akan menampilkan hasil seperti berikut ini.
Hanya dengan melakukan copy paste saja, kita sudah bisa langsung melihat tulisan Hello, world! dengan gaya Bootstrap 4 sudah bisa muncul di browser kita. Sampai tahap ini, sebenarnya kita sudah berhasil melakukan cara install bootstrap 4 di xampp pada windows dengan CDN. Sangat mudah bukan?
Untuk memastikannya lagi, sekarang kita akan menambahkan button seperti pada cara yang sebelumnya. Kita akan mencoba menambahkan class pada button yang kita tambahkan. Apabila class tersebut sudah bisa terbaca dan bisa menampilkan seperti pada percobaan dari cara sebelumnya, berarti Bootstrap 4 sudah benar-benar berhasil kita install.
3. Melakukan Pengujian Bootstrap
Untuk memastikan bootstrap sudah terinstall di website kita atau belum, silahkan tambahkan kode berikut ini di bawah tag h1.
<button class="btn btn-primary">Click Me</button> Setelah menambahkannya, sekarang saatnya kita mencoba untuk membukanya di browser. Apabila kita mengikuti semua langkah yang sesuai, maka kita akan melihat hasil tampilan seperti di bawah ini.
Apabila kita sudah berhasil melihat tampilan seperti gambar di atas, berarti Bootstrap 4 sudah benar-benar berhasil kita install pada file index.html kita. Dengan begini, kita sudah bisa menggunakan berbagai fitur dari Bootstrap 4 yang bisa kita gunakan untuk mempermudah proses perancangan website kita nantinya.
Sudah Paham Cara Install Bootstrap 4?
Kedua cara tersebut bisa kita lakukan untuk menginstall bootstrap 4 pada proyek website kita. Bagi kita yang memiliki koneksi internet kurang stabil, alangkah baiknya untuk melakukan cara pertama di mana kita bisa melakukan proses install bootstrap 4 secara offline. Sehingga, ketidakstabilan sinyal yang kita alami tidak akan mempengaruhi bagaimana tampilan website kita nantinya. Sehingga akan lebih mudah dalam melakukan pengetesan dan sebagainya.
Namun, apabila koneksi internet kita cukup lancar dan kita tidak ingin terlalu ribet, maka cara kedua sangat cocok untuk kita lakukan. Hal itu karena langkah yang harus kita kerjakan jauh lebih sedikit dan lebih mudah daripada cara pertama.
Hal yang perlu kita perhatikan lagi adalah proyek website kita akan di hosting atau tidak. Apabila itu merupakan proyek website yang akan di hosting, sepertinya leibh baik menggunakan CDN karena lebih menghemat ruang. Sedangkan apabila proyek hanya berjalan di localhost, maka lebih bagus menggunakan cara pertama agar proyek di localhost bisa kita akses tanpa perlu koneksi internet.
How to Install Bootstrap in Visual Studio Code
Source: https://makinrajin.com/blog/cara-install-bootstrap/