Cara menggunakan bootstrap 5 adalah

Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.

Table of Contents Show

Cara Menginstall Bootstrap 5
Template Dasar HTML Bootstrap
Apa itu Bootstrap 5?
Apa yang dimaksud dengan bootstrap dan bagaimana cara menggunakannya?
Bagaimana cara memasang bootstrap?
Apa yang baru di bootstrap 5?

Pada kelas ini kamu akan mempelajari topik-topik penting pada Bootstrap 5 dan menerapkannya dengan membuat sebuah website landing page.

Kelas ini berbasis project. Kamu akan membuat Website Landing Page seperti Medium yaitu sebuah platform Blog yang sudah dikenal luas saat ini. Berikut adalah preview dari project yang akan kamu buat pada kelas ini https://small-medium.netlify.app/

Pada kelas ini kamu akan mampu:

Memahami konsep dari Bootstrap dan proses instalasi
Memahami dan mampu menerapkan layout yang ada pada Bootstrap
Memahami dan mampu membuat tampilan website menggunakan komponen yang ada pada Bootstrap
Memahami dan mampu membuat responsive websites menggunakan Bootstrap
Mampu membuat website Landing Page menggunakan Bootstrap

Kamu juga akan dapat bergabung ke komunitas Skilvul melalui Discord untuk belajar, berdiskusi, dan berkomunikasi bersama sobat Skilvul lainnya melalui link berikut https://bit.ly/Join-SkilHub

Melanjutkan tutorial belajar framework CSS Bootstrap, kali ini kita akan bahas cara mendownload dan menginstall Bootstrap 5.

Cara Menginstall Bootstrap 5

Istilah “instalasi Bootstrap” sebenarnya kurang tepat, karena Bootstrap hanya terdiri dari kumpulan file CSS dan JavaScript yang cukup di download dan di copy. Namun tetap saja butuh suatu cara untuk menginput file Bootstrap, dan inilah yang akan kita bahas.

Pada saat tutorial ini saya tulis, Bootstrap baru saja merilis update ke versi 5.1. Untuk mendownload file Bootstrap, silahkan buka web resmi Bootstrap di getbootstrap.com, lalu klik tombol Download yang ada di tengah halaman.

Di halaman Download, scroll sedikit ke bawah hingga judul “Compiled CSS and JS“, lalu klik lagi tombol Download.

Proses download file bootstrap-5.1.1-dist.zip akan berlangsung beberapa saat (berukuran sekitar 1,3 MB).

Silahkan extract file ini ke sebuah folder. Kali ini saya akan extract ke folder belajar_bootstrap di drive D:

Terdapat 2 folder dalam file ini, yakni folder css dan folder js. Setiap folder berisi cukup banyak file, tapi yang kita perlukan hanya 2 saja, yakni css\bootstrap.css, dan js\bootstrap.bundle.js.

Template Dasar HTML Bootstrap

Kita sudah memiliki file Bootstrap, sekarang mari tes buat file HTML untuk mengaksesnya. Pastikan di dalam folder belajar_bootstrap sudah tersedia folder css yang berisi file bootstrap.js serta folder js yang berisi file bootstrap.bundle.js.

Silahkan buat file index.html di dalam folder belajar_bootstrap, lalu isi dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
  <div class="container">
    <h1>Belajar Bootstrap</h1>
  </div>
  <script src="js/bootstrap.bundle.js"></script>
</body>
</html>

Proses import file CSS dilakukan dari tag <link> di baris 7. Lalu di dalam tag <body> terdapat tambahan tag <div class=”container”>. Class .container merupakan class bawaan Bootstrap yang sengaja saya tambah untuk menguji apakah file CSS bootstrap sudah berhasil diakses atau belum. Terakhir di baris 13 terdapat tag <script> untuk proses import file JavaScript Bootstrap.

Setelah itu akses file index.html dari web browser:

Salah satu bukti jika kode CSS Bootstrap sudah berhasil diakses adalah teks “Belajar Bootstrap” berada sedikit ke tengah sebagai efek dari tag <div class=”container”>. Selain itu teks tampil dengan font sans-serif (font tanpa “kaki”) yang jika dijalankan di Windows 10 akan memakai font Segoe UI.

Selanjutnya untuk menguji apakah file JavaScript Bootstrap juga sudah bisa diakses, silahkan buat file index-js.html dengan kode sebagai berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
  <div class="container">
    <h1 id="myPopover" data-bs-toggle="popover" data-bs-placement="bottom" 
    class="text-center" title="Welcome to Web Design"
    data-bs-content="Ingin jadi web designer? 
    Duniailkom siap memandu anda">
    Belajar Bootstrap </h1>
  </div>
  <script src="js/bootstrap.bundle.js"></script>
  <script>
    new bootstrap.Popover(document.getElementById('myPopover'))
  </script>
</body>
</html>

Untuk saat ini boleh abaikan maksud kode program di atas. Di dalamnya saya menulis beberapa atribut baru ke dalam tag <h1> serta satu baris kode JavaScript di akhir tag <body>. Ini semua dipakai untuk membuat efek Popovers.

Silahkan buka di web browser, kemudian klik judul “Belajar Bootstrap”:

Jika saat di klik tampil kotak kecil di bawah judul “Belajar Bootstrap”, berarti file bootstrap.bundle.js bawaan Bootstrap sudah bisa diakses. Namun jika tidak tampil, silahkan cek kembali apakah terdapat salah ketik atau file bootstrap.bundle.js ternyata berada di folder lain.

Sebagai antisipasi dari salah ketik / salah penempatan file Bootstrap, saya juga menyediakan file .zip dari 2 praktek kita diatas. File ini bisa diakses dari link berikut: file_master_belajar_bootstrap_duniailkom.zip

Itulah bahasan tentang cara download dan menginstall file Bootstrap 5. Pada dasarnya kita cukup mengakses file CSS dan JS bawaan Bootstrap. Berikutnya akan masuk ke materi tentang Pengertian Bootstrap Container.

Saat ini di Duniailkom tersedia eBook / buku Bootstrap 5 Uncover. Dengan 529 halaman A4, materi di buku jauh lebih banyak daripada tutorial Bootstrap di web Duniailkom. Penjelasan lebih lanjut bisa ke: Bootstrap 5 Uncover – Panduan Belajar Framework Bootstrap.

Apa itu Bootstrap 5?

Tentang Kelas. Bootstrap adalah sebuah framework yang paling populer digunakan untuk membuat sebuah website. Bootstrap membuat front-end developer dapat membuat website dengan cepat, fokus pada responsive mobile, dan membuat website menjadi lebih interaktif tanpa membuat banyak CSS dan JavaScript dari nol.

Apa yang dimaksud dengan bootstrap dan bagaimana cara menggunakannya?

Bootstrap adalah framework front-end gratis yang cukup populer di kalangan developer saat ini, khususnya yang bekerja di bidang desain web. Framework ini mudah digunakan dan membantu developer bekerja lebih cepat tanpa harus menulis kode HTML, CSS, dan JavaScript secara manual.