Membuat header dengan bootstrap 5

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.

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.

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.

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:

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

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:

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:

Baca Juga : Cara Menggunakan Bootstrap 4

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.

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:

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

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


//JS

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

  
    
    
    

    
    

    
  
  
    
Hello, world!

    

    
    

    
    
  

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.

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:

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

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:

  

    
Custom Jumbotron
    
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.
    Button
  

3. Menggunakan Card 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 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:

  

    

      

        

          

          

            
Hosting
            
This is a wider card with supporting text below as a natural lead-in to additional content.
              This content is a little bit longer.
          
          

            Last updated 3 mins ago
          
        
      
      

        

          

          

            
Domain
            
This card has supporting text below as a natural lead-in to additional content.
          
          

            Last updated 3 mins ago
          
        
      
      

        

          

          

            
Website
            
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.
          
          

            Last updated 3 mins ago
          
        
      
    
  

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:

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

  

    
Contact Us
  

  

    

      

          

            Email
            
          
          

            Message
            
          

          

            
            Subscribe to Niagahoster's newsletter.
          
          
          

            Submit
          
          
        
    
  

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 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:

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 Webhosting Indonesia 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 menggunakanImunify360 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!