-->
Home  ›  Programming

Dua Cara Menghubungkan Bootstrap 4 Dengan HTML

Dalam dunia web programming atau pemrograman web, tentu tidak asing lagi dengan sebuah library yang bernama Bootstrap. Bootstrap atau yang sekarang sering disebut Bootstrap 4 merupakan salah satu framework CSS yang populer karena responsif dan mobile friendly, serta mudah untuk digunakan bahkan oleh pemula sekalipun. Walaupun penggunaan Bootstrap 4 terbilang cukup mudah, namun untuk beberapa orang yang baru saja mendalami dunia web programming dan hendak menggunakan Bootstrap ini akan menghadapi satu kendala pertama, yaitu:

Bagaimana cara menghubungkan Bootstrap 4 dengan HTML?

Langkah pertama untuk menggunakan Bootstrap, tentu saja menghubungkannya ke file HTML yang kita miliki. Terdapat dua cara untuk menghubungkan Bootstrap 4 ke HTML, yaitu dengan cara online dan offline. Mari bahas satu per satu langkah-langkah untuk menghubungkan Bootstrap 4 dengan file HTML yang sudah kita miliki.

Metode pertama

Cara yang pertama ini adalah versi menghubungkan Boostrap 4 secara online. Sehingga pastikan laptop atau komputer kalian terhubung dengan internet, karena Bootstrap tidak dapat berjalan pada saat kalian ingin melakukan preview jika tidak terkoneksi dengan internet.

Menghubungkan Bootstrap 4 Dengan HTML

Langkah pertama:
Buka website resmi dari Bootstrap 4 (getbootstrap.com), kemudian pilih "Documentation" yang berada disebelah kanan "Home" pada bagian navbar.

Langkah kedua:
Pada bagian CSS, kalian dapat menemukan link yang akan menghungkan HTML dengan Bootstrap seperti dibawah ini.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Silahkan copy kode tersebut dan letakkan kode tersebut diantara tag <head> pada file HTML kalian. Bootstrap juga menyediakan starter template untuk mempermudah pengguna, sehingga tidak perlu lagi mencari tag <head> untuk meletakkan kode di atas. Kalian dapat menemukan kode tersebut masih pada halaman yang sama yaitu pada bagian Starter template dengan kode sebagai berikut.

<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>


    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </body>

</html>

Setelah kalian memiliki file HTML dengan sebuah link Bootstrap yang sudah kalian tempatkan diantara tag <head>, maka kalian sudah berhasil menghubungkan Bootstrap 4 dengan file HTML milik kalian dengan metode online yang lebih dikenal sebagai BootstrapCDN.

Metode kedua

Pada metode yang kedua ini, kalian tidak perlu terkoneksi dengan internet sepanjang waktu. Kalian hanya akan membutuhkan internet diawal untuk download atau mengunduh file Bootstrap yang dibutuhkan. File Bootstrap tersebut dapat kalian dapatkan di website yang sama seperti pada metode pertama.

Langkah pertama:
Setelah membuka website Bootstrap seperti pada gambar di atas, klik "Download" yang ada di pojok kanan atas pada website tersebut. Setelah kalian klik "Download", maka akan terbuka sebuah halaman baru seperti gambar dibawah ini.

Dua Cara Menghubungkan Bootstrap 4 Dengan HTML

Silahkan klik tombol download dan tunggu hingga selesai.

Langkah kedua:
Setelah selesai di-download, extract file tersebut karena masih dalam format zip. Setelah selesai melakukan extract, kalian akan mendapatkan sebuah folder yang berisi beberapa file.

Langkah ketiga:
Buka folder css dan silahkan copy salah satu diantara file bootstrap.css atau bootstrap.min.css lalu paste file tersebut di folder yang sama dengan file HTML kalian.

Langkah keempat:
Setelah file .css berada di satu folder dengan file .html yang kalian miliki, silahkan copy kode di bawah ini dan letakkan diantara tag <head> pada file HTML.
<link rel="stylesheet" href="bootstrap.css">

Untuk teks yang berwarna merah, kalian dapat mengganti sesuai dengan nama file yang kalian copy sebelumnya (bootstrap.css atau bootstrap.min.css).

Bagitulah dua cara untuk menghubungkan Bootstrap 4 dengan HTML yang dapat kalian pilih. Silahkan pilih salah satu dari metode tersebut sesuai kebutuhan dan keinginan. Tidak perlu khawatir, karena diantara dua metode tersebut tidak ada perbedaan yang akan mengganggu tampilan dari website kalian. Semoga membantu dan selamat mencoba!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel