Cara instal bootstrap 5 offline

Penggunaan Bootstrap untuk mengembangkan aplikasi web membuat proses koding lebih mudah dan cepat. Sayangnya, Bootstrap versi terdahulu masih membuat load website menjadi lambat. Nah, Bootstrap 5 hadir dengan performa yang lebih baik

Benarkah begitu?

Pada artikel tutorial Bootstrap 5 ini kami akan menjelaskannya lengkap. Mulai dari apa itu Bootstrap 5, hal baru apa saja yang ada di versi 5, berbagai keunggulan, sampai cara menggunakan Bootstrap 5.  

Daftar isi

Apa Itu Bootstrap 5?

Bootstrap 5 adalah versi terbaru Bootstrap yang resmi dirilis pada tanggal 5 Mei 2021. Pada versi ini, beberapa komponen mendapat update agar memudahkan developer saat proses pengembangan website

Sebagai salah satu framework CSS terpopuler di dunia, Bootstrap terbukti mampu mempercepat proses coding, menawarkan kemudahan integrasi pada website yang dikembangkan, dan berjalan baik di berbagai web browser modern

Sayangnya, penggunaan Bootstrap 4 untuk website dinilai terlalu berat dan bisa memperlambat kinerja website. Nah, Bootstrap 5 hadir untuk menyelesaikan masalah tersebut

Salah satu perubahan besar pada versi terbaru ini adalah dihilangkannya jQuery dan dilarang dengan penggunaan Vanilla JS. Hal ini akan membuat website lebih ringan dan tentu mempercepat loading website

Tak hanya itu, masih banyak perubahan dan hal baru yang ditawarkan Bootstrap 5. Penasaran?

Apa Saja Hal Baru di Bootstrap 5?

Ada beberapa hal baru di Bootstrap 5 dan update yang bisa Anda temukan, yaitu

1. Logo dan Tampilan Dokumentasi Baru

Perubahan pada Bootstrap 5 bisa langsung Anda rasakan ketika mengakses website resmi Bootstrap, yaitu logo dan tampilan dokumentasinya yang baru

Desain logo baru pada Bootstrap terinspirasi dari tanda kurung kurawal ({}) yang biasa dipakai untuk penulisan kode CSS. Selain lebih fresh, Bootstrap ingin menunjukkan merekalah salah satu framework CSS terbaik

2. jQuery Tidak Lagi Ditambang

Bootstrap 4 menggunakan jQuery untuk membuat desain menjadi interaktif. Sayangnya, penggunaan jQuery kurang efektif karena harus memanggil external library jQuery dulu untuk menjalankan suatu interaksi

Sebagai gantinya, Vanilla JS yang dipilih untuk membantu developer menciptakan desain interaktif karena lebih ringan

3. Dukungan Penghentian untuk Browser Lama

Di versi terbaru, Bootstrap menghentikan support terhadap beberapa versi browser berikut ini

• Warisan Microsoft Edge
• Internet Explorer versi 10 dan 11
• Firefox versi 60 ke bawah
• Safari versi 10 ke bawah
• iOS Safari versi 10 ke bawah
• Chrome versi 60 ke bawah
• Android versi 6 ke bawah

Dukungan penghentian pada browser di atas dilakukan untuk memaksimalkan fungsi custom properties pada Bootstrap versi terbarunya ini. Pasalnya, fungsi ini hanya bisa dijalankan pada web browser modern dengan teknologi terbaru

4. Dukungan untuk Tampilan Kanan-Ke-Kiri (RTL)

Bootstrap 5 kini mendukung text-alignment yang dimulai dari arah kanan atau Right to Left ( RTL). Hal ini dilakukan sebagai dukungan terhadap website yang tulisannya dibaca dari kanan, seperti website berbahasa arab

Jika pada Bootstrap 4 text-alignment bisa diatur menggunakan class text-left, text-center dan text-right, pada versi terbarunya, Bootstrap mengganti class left dan right menjadi start dan end seperti berikut ini

• text-start untuk mengganti text-left
• pusat teks
• text-end untuk mengganti text-right

Tak hanya text-alignment, semua hal yang melibatkan penulisan posisi left dan right di Bootstrap 5 berganti menjadi start dan end

5. Ikon Bootstrap

Sebelum adanya Bootstrap Icons, Anda memerlukan penyedia layanan icon pihak ketiga seperti Font Awesome, Feather maupun Octicons untuk menggunakan icon di website yang Anda kembangkan.  

Kini, Bootstrap memiliki library open-source sendiri yang menyediakan lebih dari 1500 ikon gratis dengan format SVG

Tak hanya untuk Bootstrap 5, Bootstrap Icons juga bisa digunakan pada Bootstrap versi sebelumnya maupun project website tanpa Bootstrap sekalipun

6. Perbarui pada Formulir Elemen

Bootstrap 5 mengubah tampilan elemen checks and radios menjadi lebih modern serta menambahkan elemen switch checkbox untuk form Anda

Pada versi sebelumnya, tampilan element form di atas bisa berubah-ubah tergantung web browser yang digunakan. Hal tersebut membuat desain website Anda terkesan tidak konsisten

Sekarang di Bootstrap versi 5, semua bentuk elemen tidak akan berubah meski digunakan pada web browser yang berbeda

Hal baru lainnya di elemen form Bootstrap 5 adalah adanya Floating labels untuk textual input, selects dan textareas. Dengan floating labels, Anda bisa menuliskan label langsung pada kolom input yang disediakan Bootstrap

Selain penambahan beberapa elemen form, Bootstrap versi 5 juga melakukan penghapusan beberapa class seperti

• form-file
• form-group
• bentuk-baris
• form-inline

Kelas khusus. form-file dihilangkan di versi terbaru untuk mengurangi penggunaan JavaScript pada form. Sedangkan, kelas. kelompok bentuk,. bentuk-baris dan. form-inline dihapus untuk memudahkan tata letak

7. Perbarui pada Sistem Grid

Grid system adalah suatu sistem pada Bootstrap yang berfungsi untuk mengatur layout tampilan website, sistem ini terdiri dari 12 kolom.  

Awalnya, Bootstrap 4 memiliki lima breakpoints pada grid system yang digunakan untuk menentukan tampilan responsif terhadap berbagai perangkat, mulai dari perangkat mobile hingga desktop

Seiring dengan banyaknya pengguna yang menggunakan layar berukuran lebar (ultra wide screen), Bootstrap versi 5 menambahkan satu grid xxl untuk mengatur tampilan pada monitor ultra wide.  

Karena itu, default grid pada Bootstrap 5 menjadi enam breakpoints, yaitu

• Ekstra kecil (. kol-)
• Kecil (. col-sm-)
• Medium (. col-md-)
• Besar (. col-lg-)
• Ekstra besar (. col-xl-)
• Ekstra ekstra besar (. col-xxl-)

8. Perbarui pada Navbar

Navbar adalah salah satu komponen dasar yang selalu digunakan dalam pengembangan website dengan dua pilihan warna tema, yaitu navbar-light (navbar dengan warna terang), dan navbar-dark (navbar dengan warna gelap)

Sayangnya, saat menggunakan navbar-dark, default warna background pada opsi menu dropdown tetaplah putih, bahkan jika Anda menggunakan class dropdown-menu-dark sekalipun. Jadi, kurang cocok dengan tema, bukan?

Nah, di Bootstrap 5, default warna background pada class dropdown-menu-dark berubah menjadi hitam sesuai dengan tema dark yang digunakan

9. Properti Kustomisasi

Bootstrap 5 meningkatkan fitur kustomisasi pada properties Bootstrap, salah satunya adalah kustomisasi warna. Pada versi sebelumnya, pilihan warna Bootstrap terbatas dengan warna-warna berikut ini

Bootstrap 5 menawarkan pilihan warna yang lebih luas dengan palet warna sebagai berikut

10. Penghapusan Beberapa Kelas (Update Kelas)

Selain adanya penambahan dan perubahan class pada versi terbarunya ini, Bootstrap 5 juga menghapus beberapa class. Ini dia beberapa contohnya

• Dek kartu. Di Bootstrap 4, Anda membutuhkan class card-deck jika ingin membuat kartu dengan tinggi dan lebar yang sama, namun tidak terikat satu sama lain. Sekarang, Anda bisa membuatnya hanya dengan menggunakan kisi-kisi saja.  

• Membenarkan. Di Bootstrap 4, text-alignment justify digunakan untuk membuat teks dengan rata kanan-kiri. Namun, penggunaan class ini membuat teks memiliki spasi yang acak. Sehingga, teks sulit untuk dibaca. Oleh karena itu, class ini dihapus di Bootstrap versi terbaru

• Jumbotron. Di Bootstrap 4, jumbotron bisa Anda buat langsung dengan memanggil class jumbotron pada script html Anda. Di Bootstrap 5, meskipun class jumbotron dihilangkan, Anda tetap bisa membuat jumbotron dengan menggunakan class yang ada

Fungsi kelas di atas masih bisa disamakan dengan kelas lain. Jadi, bisa dihapus saja untuk mengurangi jumlah class pada file Bootstrap, sehingga file akan lebih ringan

Keunggulan Bootstrap 5

Berikut ini adalah beberapa keunggulan yang ditawarkan Bootstrap 5 untuk Anda

1. Lebih Mudah Membaca Dokumentasi

Bootstrap 5 melakukan update tampilan pada dokumentasinya sehingga lebih mudah dibaca oleh pengguna seperti di bawah ini

Pada Bootstrap 4, Anda harus berpindah halaman ke setiap kategori utama untuk mengecek sub kategori pada setiap dokumentasi. Di Bootstrap 5, sub kategori bisa Anda cek langsung dengan menu dropdown.  

Dengan demikian, Anda dapat berpindah dari satu dokumen ke dokumen lainnya dengan lebih mudah dan cepat tanpa mengecek satu sama lain pada setiap kategori utamanya.  

Selain itu, Bootstrap versi terbaru ini juga menambahkan keyboard shortcut CTRL + / untuk memudahkan Anda mengakses kolom pencarian dokumen

2. Ringan dan Cepat

Dengan penggantian jQuery ke Vanilla JS, penggunaan Bootstrap 5 menjadi lebih ringan dan cepat. Kenapa begitu?

Vanilla JS bukanlah sebuah framework JavaScript baru, tapi JavaScript murni. Artinya, Bootstrap versi terbaru menggunakan JavaScript murni dalam membuat interaksi desain

Penggunaan Vanilla JS memang akan membuat baris kodenya lebih panjang daripada menggunakan library jQuery. Meski begitu, proses kompilasinya akan lebih cepat dan terasa ringan. Alasannya, semua itu terjadi langsung pada Bootstrap tanpa pemanggilan library external dulu

3. Desain yang Responsif

Bootstrap merupakan framework yang mengusung mobile-first sehingga kompatibel dan responsif terhadap device dengan layar yang kecil.  

Namun, semakin banyak pengguna Bootstrap yang memakai layar ultra wide membuat versi Bootstrap 5 menambahkan breakpoint. col-xxl pada grid system yang digunakan. Tujuannya, Anda bisa membuat desain yang responsif untuk layar dengan lebar maksimal lebih dari 1400px sekalipun

4. Desain yang Konsisten

Bootstrap versi terbaru memungkinkan Anda untuk membuat desain website yang lebih konsisten. Tak perlu lagi khawatir akan perubahan pada komponen website ketika dibuka di browser yang berbeda.  

Semua itu terjadi berkat adanya update pada element form di versi terbaru Bootstrap ini.  

5. Mendukung Peramban Modern

Bootstrap 5 masih menjadi framework yang mendukung berbagai browser. Namun, kini dukungan mereka diberikan kepada browser modern saja.  

Pasalnya, dengan browser modern fitur kustomisasi properti yang ada di Bootstrap 5 bisa lebih optimal. Dengan begitu, pengembangan website untuk kebutuhan pengguna saat ini bisa lebih mudah

Nah, itulah beberapa keunggulan Bootstrap 5. Untuk memudahkan Anda memilih versi yang terbaik, inilah rangkumannya

Cara Upgrade ke Bootstrap 5

Kalau Anda ingin melakukan upgrade ke Bootstrap 5, inilah dua cara yang bisa Anda lakukan

1. Gunakan Bootstrap Offline
2. Menggunakan Bootstrap Online

Anda bebas memilih untuk menggunakan dua opsi diatas, tergantung dari kenyamanan Anda saat mengembangkan website, baik secara online maupun offline

Gunakan Bootstrap Offline

Anda perlu mendownload Bootstrap 5 secara manual untuk menggunakannya di project Anda. Ada empat langkah yang bisa Anda ikuti, yaitu

1. Konfigurasi Situs Web Proyek

Hal pertama yang harus Anda lakukan adalah menyiapkan situs web proyek Bootstrap Anda. Buatlah sebuah folder khusus untuk menyimpan project. Pada tutorial Bootstrap 5 ini, kami membuat folder dengan nama project-web-bs5

2. Unduh Bootstrap 5

Selanjutnya, unduh Bootstrap 5 langsung dari website resminya. Masuklah ke halaman Download, lalu klik tombol Download pada bagian Compiled CSS and JS seperti pada gambar berikut

3. Ekstrak File Bootstrap

Jika file. zip sudah berhasil terdownload, ekstrak file tersebut di dalam project website yang Anda miliki. Nantinya, Anda akan mendapatkan folder Bootstrap dengan CSS dan JS di dalamnya, seperti berikut ini

4. Impor Bootstrap 5 ke File HTML

Agar Bootstrap 5 dapat digunakan pada project website, Anda perlu melakukan import CSS dan JS Bootstrap ke file HTML di project Anda. Masukkanlah lokasi tempat file bootstrap. min. css dan bootstrap. min. js berada

Berhati-hati dengan penulisan path/lokasi file, karena jika salah, Bootstrap tidak akan terpanggil

Menggunakan Bootstrap Online

Selain menggunakan Bootstrap secara offline, Anda juga bisa menggunakan Bootstrap online.  

Dengan cara ini, Anda tidak perlu mendownload file CSS dan JS ke dalam project website. Anda hanya perlu menambahkan script CSS dan script JS berikut ini pada file HTML yang Anda miliki

//CSS
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

//JS
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Untuk mempermudah inisialisasi project, Bootstrap juga menyediakan starter template file HTML yang bisa langsung Anda gunakan seperti ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Nah, itu dia tutorial Bootstrap 5 secara online. Yang perlu diingat, pastikan Anda memiliki koneksi internet saat melakukan pengembangan website jika Anda menggunakan opsi ini ya

Baca juga. Unduh Templat Bootstrap

Cara Menggunakan Bootstrap 5

Bootstrap 5 memiliki fitur baru yang bisa diterapkan pada website yang Anda buat. Pada panduan kali ini, Anda akan mempelajari lima cara menggunakan Bootstrap 5, yaitu

1. Membuat Navbar
2. Membuat Jumbotron
3. Menggunakan Kartu
4. Membuat Formulir
5. Membuat Footer

Yuk, ikuti tutorial Bootstrap 5 selengkapnya di bawah ini

1. Membuat Navbar

Salah satu fitur baru Bootstrap yang bisa Anda coba adalah membuat navbar yang menggunakan class dropdown-menu-dark.  

Di versi terbaru, default background pada class dropdown-menu-dark berubah menjadi hitam seperti ini

Untuk membuat navbar seperti gambar di atas, Anda bisa menyalin kode berikut ini

 <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
      <div class="container">
        <a class="navbar-brand" href="#">Niagahoster</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Services
              </a>
              <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownMenuLink">
                <li><a class="dropdown-item" href="#">Hosting</a></li>
                <li><a class="dropdown-item" href="#">Domain</a></li>
                <li><a class="dropdown-item" href="#">Website</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Login</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- End Navbar -->

2. Membuat Jumbotron

Jumbotron adalah komponen yang digunakan untuk menampilkan informasi yang di-highlight pada sebuah halaman website. Penggunaan jumbotron bertujuan agar pengunjung bisa lebih fokus dan menaruh perhatian lebih pada pesan yang ditampilkan

Pada tutorial Bootstrap 5 ini, Anda bisa membuat custom jumbotron dengan utilities seperti contoh di bawah ini

Nah, untuk membuat jumbotron di atas, Anda bisa menggunakan kode berikut ini

<!--Jumbotron-->
<div class="p-5 mb-4 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">Custom Jumbotron</h1>
    <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous
      versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
    <button class="btn btn-primary btn-lg" type="button">Button</button>
  </div>
</div>
<!--End Jumbotron-->

3. Menggunakan Kartu di Bootstrap 5

Di bagian ini, Anda akan mencoba menggunakan card pada Bootstrap versi terbaru seperti tampilan di bawah ini

Sesuai dengan contoh di atas, Anda akan membuat tiga kartu dengan text-alignment yang berbeda pada setiap kartu. Kartu pertama menggunakan text-start, kartu kedua menggunakan text-center, dan kartu ketiga menggunakan text-end

Berikut ini kode lengkap cara menggunakan Bootstrap 5 untuk membuat kartu yang bisa Anda salin

<!--card-->
<section id="card">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col mb-5">
        <div class="card h-100">
          <img src="C:\Users\niagahoster\Pictures\website3.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Hosting</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
              This content is a little bit longer.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
      </div>
      <div class="col mb-5">
        <div class="card h-100 text-center">
          <img src="C:\Users\niagahoster\Pictures\website2.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Domain</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
      </div>
      <div class="col mb-5">
        <div class="card h-100 text-end">
          <img src="C:\Users\niagahoster\Pictures\website.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Website</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.
              This card has even longer content than the first to show that equal height action.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--End card-->

Jangan lupa, gantilah jalur gambar pada kode di atas dengan lokasi tempat Anda menyimpan gambar

4. Membuat Formulir

Hal baru lainnya yang bisa Anda coba pada tutorial Bootstrap 5 adalah penggunaan elemen form. Di contoh ini, Anda akan membuat halaman Contact Us sederhana sebagai berikut

Pada contoh di atas, Anda membuat form dan menambahkan switch checkbox. Untuk membuat halaman di atas, silakan salin kode lengkapnya di bawah ini

<!--contact-->
<section id="contact">
<div class="container">
  <div class="mb-3 row text-center">
    <h1>Contact Us</h1>
  </div>

  <div class="row justify-content-center">
    <div class="col-md-6">
      <form>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
          </div>
          <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label">Message</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>

          <div class="mb-3 form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
            <label class="form-check-label" for="flexSwitchCheckDefault">Subscribe to Niagahoster's newsletter.</label>
          </div>
          
          <div class="mb-3">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
          
        </form>
    </div>
  </div>

</div>
</section>
<!--end services-->

5. Membuat Footer di Bootstrap 5

Hal terakhir yang akan Anda coba dalam tutorial Bootstrap 5 adalah Anda membuat footer. Di bagian ini, Anda akan mengimplementasikan cara menggunakan Bootstrap 5 icon, text-alignment, serta sistem grid yang baru di Bootstrap

Inilah gambar footer yang akan dibuat

Icon yang digunakan adalah icon media sosial. Di bagian alamat, kami menggunakan text-end agar text menjadi rata kanan. Untuk gridnya, kami menggunakan col-sm untuk mengatur grid pada layar kecil dan col-xxl untuk grid pada ultra wide screen

Berikut ini kode yang bisa Anda salin

<!--footer-->
<footer class="bg-dark text-white mb-3">
  <div class="container">
    <div class="row p-3">
      <div class="col-sm-8 col-xxl-9">
        <div class="mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-instagram"
            viewBox="0 0 16 16">
            <path
              d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
          </svg>
          <a class="m-3 text-white" href="#">@niagahoster.id</a>
        </div>

        <div class="mb-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-twitter"
            viewBox="0 0 16 16">
            <path
              d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
          </svg>
          <a class="m-3 text-white">Niagahoster</a>
        </div>

        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-whatsapp"
            viewBox="0 0 16 16">
            <path
              d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z" />
          </svg>
          <a class="m-3 text-white">+628123456789</a>
        </div>
      </div>

      <div class="col-sm-4 col-xxl-3 text-end mb-3">
        Jl. Palagan Tentara Pelajar No.81, Jongkang, Sariharjo, Kec. Ngaglik, Kabupaten Sleman, 
        Daerah Istimewa Yogyakarta
        55581
      </div>
    </div>
  </div>

    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
      © 2021 Copyright: Niagahoster
    </div>

</footer>
<!--end footer-->

Sudah Siap Menggunakan Bootstrap 5?

Demikianlah artikel lengkap tutorial Bootstrap 5. Anda sudah mengetahui apa saja hal baru di Bootstrap 5 dan cara menggunakan Bootstrap 5, bukan?

Bootstrap 5 adalah versi terbaru dari salah satu front-end framework terbaik yang cepat dan ringan. untuk membantu proses pengembangan website. Dengan Bootstrap, Anda tidak perlu menulis kode CSS yang panjang, karena Anda bisa langsung menggunakan semua elemen yang disediakan Bootstrap

Nah, jika website Bootstrap Anda sudah selesai, jangan lupa untuk meng-onlinekannya agar bisa diakses oleh banyak orang ya. Bebas layanan hosting yang aman dan bisa mendukung website Anda untuk selalu online 24 jam

Layanan Unlimited Hosting Niagahoster tentu bisa menjadi pilihan yang tepat

Dengan waktu aktif 99. 98%, Niagahoster menjamin website Anda selalu bisa diakses kapan saja. Tak hanya itu, Niagahoster juga menggunakan Imunify360 yang akan melindungi website dari serangan DDoS ataupun malware

Menariknya, fitur tersebut bisa Anda nikmati hanya dengan harga mulai dari Rp10rb/bulan saja, loh. Sangat murah kan?

Jadi, tunggu apa lagi?

Saya Ingin Berlangganan Hosting Termurah di Indonesia