Cara Menggunakan Bootstrap 5

lebakcyber.net – Cara Menggunakan Bootstrap 5. Oke jadi pada kesempatan kali ini kita akan bersama-sama mempelajari bagaimana sih cara untuk menggunakan framework Bootstrap 5 pada website yang sedang kita buat.

Sebelum mulai menggunakan Bootstrap 5, ada baiknya kita persiapkan terlebih dahulu tools apa saja yang dibutuhkan untuk mulai belajar Bootstrap 5 ini.

Text Editor

Tools pertama yang dibutuhkan untuk menggunakan Bootstrap 5 adalah text editor yang nantinya akan kita gunakan untuk menulis kode program. Teman-teman bisa menggunakan teks editor apa saja seperti VS Code, Sublime, Notepad++, Atom atau teks editor apapun sesuai dengan yang sering teman-teman gunakan.

Web Browser

Tools yang kedua adalah web browser yang nantinya akan kita gunakan untuk melihat hasil dari kode program yang kita sudah tulis. Dan web browser yang teman-teman bisa gunakan seperti Google Chrome, Mozilla Firefox, Opera ataupun Safari.

Bootstrap Versi 5

Oke sekarang kita mulai masuk ke pembahasan cara menggunakan Bootstrap versi 5. Ada beberapa cara yang bisa teman-teman gunakan untuk menggunakan Bootstrap versi 5 ini, dan kita akan menggunakan cara yang paling mudah saja, yaitu dengan :

Memanfaatkan CDN.
Mendownload File Bootstrap 5 Secara Manual

Nah sekarang tinggal kita bahas satu persatu bagaimana cara menggunakan Bootstrap baik itu dengan menggunakan CDN ataupun mendownload file bootstrap versi 5 secara manual.

Memanfaatkan CDN Untuk Bootstrap

CDN (Content Delivery Network) merupakan sebuah server yang tersebar di seluruh dunia yang digunakan untuk mengantarkan konten secara cepat dan juga optimal.

Menggunakan CDN untuk Bootstrap memang merupakan cara yang paling mudah untuk dilakukan, hal tersebut karena kita hanya perlu mengcopy link CDN Bootstrapnya saja untuk selanjutnya kita taruh pada kode HTML yang kita buat.

Namun jika menggunakan CDN untuk Bootstrap, kita membutuhkan koneksi internet pada saat kita membuat sebuah website agar dapat menarik data Bootstrap dan menampilkannya di browser saat kita ingin melihat perubahan dari kode yang kita buat.

Untuk menambahkan CDN Bootstrap kedalam file HTML yang kita buat, kita hanya perlu menambahkan baris kode dibawah ini tepat didalam tag <head> pada halaman HTML yang kita buat :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

Selanjutnya load CDN Javascript didalam tag<body> pada halaman HTML yang kita buat dengan perintah seperti dibawah ini :

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
   integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
   crossorigin="anonymous"></script>

Sekarang kita coba terapkan penggunaan Bootstrap dengan memanfaatkan CDN tersebut, silahkan teman-teman masukan perintah seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lebakcyber.net - Belajar Bootstrap 5</title>

    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>

    <header class="bg-danger">
        <div class="container">
            <h3 class="text-white">Menggunakan Bootstrap Dengan CDN</h3>
            <p class = "text-white">Belajar Bootstrap 5 bersama lebakcyber.net</p>
        </div>
    </header>

</body>

</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Mendownload File Bootstrap 5 Secara Manual

Selain menggunakan CDN, kita juga bisa mendownload Bootstrap 5 langsung melalui situs webnya yang beralamat di www.getbootstrap.com dan didalam website resminya tersebut tersedia tombol Download untuk mendownload file Bootstrap.

Silahkan tekan tombol Download tersebut untuk mendownload file Bootstrap 5 yang nantinya akan kita gunakan secara lokal saat develop website yang akan kita buat.

Setelah file Bootstrap berhasil di download, ekstrak file bootstrap tersebut yang didalamnya terdapat file CSS dan JS lalu jadikan satu folder dengan proyek web yang sedang kita buat. Contohnya seperti gambar dibawah ini :

Selanjutnya kita akan menggunakan file bootstrap lokal yang sudah kita download tersebut. Caranya dengan menggunakan tag<link> pada bagian <head> lalu masukan perintah dibawah ini :

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

Dan juga masukan tag<script> untuk menggunakan script Bootstrap yang sudah kita download tersebut dengan perintah :

<script src="js/bootstrap.min.js"></script>

Untuk mempraktekannya silahkan masukan perintah seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lebakcyber.net - Belajar Bootstrap 5</title>

    <!-- CSS Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
</head>

<body>

    <!-- JavaScript Lokal -->
    <script src="js/bootstrap.min.js"></script>

    <header class="bg-primary">
        <div class="container">
            <h3 class="text-white">Menggunakan Bootstrap Secara Lokal</h3>
            <p class = "text-white">Belajar Bootstrap 5 bersama lebakcyber.net</p>
        </div>
    </header>

</body>

</html>

Sekarang coba jalankan melalui browser, nanti hasinya akan seperti gambar dibawah ini :

Oke sampai disini sekarang kita sudah bisa menggunakan Bootstrap baik itu dengan menggunakan CDN ataupun dengan cara mendownload file Bootstrap secara lokal dan memanggil file Bootstrap lokal tersebut kedalam projek web yang sedang kita buat.

Semoga tutorial belajar bootstrap 5 ini bisa bermanfaat, dan jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial belajar Bootstrap 5 lainnya ya. Sampai bertemu di tutorial-tuorial selanjutnya.

Lebak Cyber Tips dan Trik Komputer

Cara Menggunakan Bootstrap 5