MENU

Cara Menggunakan Bootstrap 5

...

Digital Cilacap - Kali ini kami akan menginfokan bagiamana cara menggunakan bootrstrap 5. Framework Bootstrap yang terbaru yang sudah publish ada versi 5.2. Artikel ini Saya khususkan untuk para pemula yang masih belajar seperti kami, bagi yang sudah paham dan sudah pro, bisa skip dan beralih ke topik artikel lainnya.

Cara Menggunakan Bootstrap 5

Pertama-tama jika kita ingin menggunakan bootstrap 5 untuk membuat tampilan sebuah website, kita download atau langsung kunjungi halaman situsnya disini. Anda bisa mendowload file css dan js di menu download. Namun kali ini, kami menginfokan untuk yang tidak mendownload file css dan js bootstrapnya.

1. Buka aplikasi codingan Anda (notepad, sublime text dll).

2. Pastikan server localhost di PC/Laptop Anda sudah aktif yah (Anda bisa menggunakan xampp, wampp atau server localhost lainnya)

3. Buat sebuah folder baru untuk project Anda di server localhost PC/Laptop

4. Buat file baru bernama index.html  dalam sebuah folder yang sudah Anda buat tadi, Anda bisa langsung bisa membuka folder project Anda di aplikasi kodingan Anda

5. Copy paste codingan dibawah dan masukan kedalam file index.html, jangan lupa SAVE setelah di paste


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demotitle>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  head>
  <body>
    <h1>Hello, world!h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">script>
  body>
html>

6. Cari Bootstrap demo dan ubah kata Bootstrap demo menjadi judul halaman website Anda.

7. Buka browser, dan ketikan alamat server localhost project bootstrap Anda, sehingga muncul halaman Hello, word!

Nah disitu Anda sudah memulai awal membangun sebuah website dengan bootstrap. Pastikan koneksi internet Anda terhubung yah. Untuk menambahkan komponen-komponen bootstrap lainnya, Anda bisa langsung kunjungi situs bootstrap dan masuk ke menu komponen, disitu Anda cari bagian komponen yang ingin Anda pakai, setelah itu copy codingannya, dan masukan ke halaman index.html tadi, ingat, diantara yah?

cara menggunakan bootstrap 5