Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Bootstrap 5 : Pengertian, Fitur, Keunggulan dan Cara Menggunakannya

13 min read

Cara Menggunakan Bootstrap 4 untuk Membuat Website

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

Benarkah begitu? Lalu, bagaimana cara menggunakan Bootstrap 5 dengan baik?

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! 

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 mempermudah 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 digantikan 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? Yuk, cari tau apa saja hal baru di Bootstrap 5 yang bisa digunakan untuk project website Anda!

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.

logo baru di bootstrap 5

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 Digunakan

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. Penghentian Support untuk Browser Lama

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

  • Microsoft Edge Legacy
  • 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

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

4. Dukungan untuk Tampilan Right-To-Left (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
  • text-center
  • 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. Bootstrap Icons 

Sebelum adanya Bootstrap Icons, Anda memerlukan layanan penyedia 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 icons 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. Update pada Elemen Form

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

update elemen checkbox pada form

Pada versi sebelumnya, tampilan elemen 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 elemen form 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.

penambahan elemen floating labels

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

  • .form-file
  • .form-group
  • .form-row
  • .form-inline

Custom class .form-file dihilangkan di versi terbaru untuk mengurangi penggunaan JavaScript pada form. Sedangkan, class .form-group, .form-row dan .form-inline dihapus untuk menyederhanakan layout.

7. Update pada Grid System

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 untuk berbagai perangkat, mulai dari perangkat mobile sampai 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. 

Dengan demikian, default grid pada Bootstrap 5 menjadi enam breakpoints, yaitu:

  • Extra small (.col-) 
  • Small (.col-sm-)
  • Medium (.col-md-)
  • Large (.col-lg-)
  • Extra large (.col-xl-)
  • Extra extra large (.col-xxl-)

8. Update 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. Kustomisasi Properties

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:

palet warna di bootstrap 4

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

palet warna di bootstrap 5

10. Penghapusan Beberapa Class (Class Update)

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

  • Card-deck: Di Bootstrap 4, Anda membutuhkan class card-deck jika ingin membuat card dengan height dan width yang sama, namun tidak terikat satu sama lain. Sekarang, Anda bisa membuatnya hanya dengan menggunakan grid saja. 
  • Justify: Di Bootstrap 4, text-alignment justify digunakan untuk membuat text dengan rata kanan-kiri. Namun, penggunaan class ini membuat text memiliki spasi yang random. Sehingga, text 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 class di atas masih bisa digantikan oleh class 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:

dokumentasi bootstrap 5 lebih rapi dan mudah dibaca

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 begitu, Anda bisa berpindah dari satu dokumen ke dokumen lainnya dengan lebih mudah dan cepat tanpa mengecek satu persatu 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 suatu framework JavaScript baru,tapi JavaScript murni. Artinya, Bootstrap versi terbaru menggunakan pure JavaScript dalam membuat interaksi desain.

Penggunaan Vanilla JS memang akan membuat baris kodenya lebih panjang daripada menggunakan library jQuery. Pun demikian, 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 untuk device dengan layar yang kecil. 

Namun, makin 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 max-width 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 elemen form di versi terbaru Bootstrap ini. 

5. Support Modern Browser

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

Alasannya, dengan browser modern fitur kustomisasi properties 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:

PerbandinganBootstrap 4Bootstrap 5
jQueryMenggunakan jQueryTidak menggunakan jQuery, beralih ke Vanilla JS
Grid system5 tier (xs, sm, md, lg, xl)6 tier (xs, sm, md, lg, xl, xxl)
Web BrowserSupport semua web browserTerbatas, hanya web browser dengan versi terbaru
WarnaTerbatasPalet warna lebih banyak
Elemen FormTampilan radio & checkbox bisa berbeda di setiap OS atau web browserTampilan elemen form tidak akan berubah meski berbeda OS dan web browser
Utilities APITidak bisa modifikasi utilities Bisa melakukan kustomisasi utilities
GutterMenggunakan kelas .glutter dan satuan ukuran fontsize pxMenggunakan kelas .g* dan satuan ukuran fontsize rem
Class VerticalColumn bisa menggunakan posisi relativeColumn tidak bisa menggunakan posisi relative
Bootstrap IconsTidak memiliki icon sendiriMemiliki icon SVG sendiri
JumbotronMendukungTidak mendukung
Card deckAdaTidak ada
NavbarMemiliki inline-block property dan white dropdown sebagai default dari class dropdown-menu-darkInline-block dihapus dan black dropdown sebagai default dari class dropdown-menu-dark
Static site generatorJekyllHugo

Cara Upgrade ke Bootstrap 5

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

  1. Menggunakan 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.

Menggunakan Bootstrap Offline

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

1. Siapkan Project Website 

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

menyiapkan project website

2. Download Bootstrap 5

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

mendownlad file zip bootstrap 5

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:

mengekstrak file zip bootstrap 5

4. Import Bootstrap 5 ke File HTML

Agar Bootstrap 5 bisa 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.

import bootstrap 5 ke file index.html project website

Berhati-hatilah 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

//JS
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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/bootstrap@5.0.2/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/bootstrap@5.0.2/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/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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: Download Template 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 Card
  4. Membuat Form
  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:

membuat navbar dengan bootstrap 5

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:

membuat jumbotron di bootstrap 5

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 Card di Bootstrap 5

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

menggunakan card di bootstrap 5

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

Berikut ini kode lengkap cara menggunakan Bootstrap 5 untuk membuat card 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 path gambar pada kode di atas dengan lokasi tempat Anda menyimpan gambar.

4. Membuat Form

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:

membuat form

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:

membuat footer

Icon yang digunakan adalah icon sosial media. 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 telah selesai, jangan lupa untuk meng-onlinekan nya agar bisa diakses oleh banyak orang, ya. Pilihlah 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 uptime 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? Yuk, online-kan website Bootstrap Anda dengan layanan hosting terbaik dan termurah di Indonesia!

Nida Regita F SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.

Leave a Reply

Your email address will not be published. Required fields are marked *