Cara Mudah Membuat Bottom Navbar Seperti Instagram Dengan Bootstrap 5

Pada artikel ini saya akan membagi artikel yang hendak mengulas mengenai bagaimana sich langkah membuat bottom navbar seperti instagram atau umumnya mobile app dengan bootstrap 5. pada eksperimen di artikel ini, kita akan mengawali dari 0 yakni dengan membuat file html baru dengan starter template dari bootstrap.

Saat sebelum berlanjut ke beberapa langkah pembikinan bottom navbar dengan bootstrap 5, kita harus tahu lebih dulu mengapa sich kita perlu membuat bottom navbar situs untuk versus mobile ? Maka karena ada bottom navbar akan mempermudah pemakai untuk beralih halaman karena status navbar dengan jempol pemakai (yang umumnya dipakai untuk tekan) lebih dekat, berlainan bila button navbar ada di sudut atas piranti seperti umumnya situs yang ada sekarang ini, pemakai kesusahan dalam menyaksikan menu navigasi yang berada di website. Kehadiran bottom navbar benar-benar baik untuk pemakai experience.

Lalu, mengapa di beberapa situs belum mengaplikasikan bottom navbar ? tidak seluruhnya web harus mengaplikasikan bottom navbar, bergantung sasaran rutinitas audiens dan audiens. Peluang, karena sasaran audiencenya ialah pemakai yang mencari panduan programming yang umumnya jika orang program, piranti yang dipakai ialah piranti yang memiliki lebar monitor large atau lebar seperti netbook, PC dan sebagainya, oleh karena itu banyak situs belum juga mengaplikasikan bottom navbar, tetapi peluang bila waktunya datang akan mengaplikasikan bottom navbar.

Bottom navbar biasa kita temui di situs atau program e-commerce, media sosial seperti twitter, instagram. Nach, kesempatan ini saya akan ajak rekan-rekan belajar bagaimanakah cara membuat bottom navbar seperti instagram dengan bootstrap versus 5. Marilah kita awali beberapa langkahnya.

Apa yang penting disiapkan ?

Teks editor (Saya memakai Visual Studio Code)
Browser (Saya memakai Google Chrome)
Jaringan Internet (Optional)

Mempersiapkan File HTML

Langkah awal untuk membikin bottom navbar seperti instagram dengan bootstrap ialah kita perlu mempersiapkan atau membuat file HTML baru. Silakan buat file HTML bernama file index.html, selanjutnya copy code starter bootstrap berikut ini dan paste pada file HTML yang barusan dibuat.

Dari code di atas, kita akan memakai bootstrap CSS versus CDN dan bootstrap bundel with popper versus CDN juga. Silakan save, lalu coba membuka di browser. Apa yang diperlihatkan ? kosong ? ya memang kita cuman baru membuat starter template, belum membuat penampilannya. Saat ini, silakan copy code berikut ini dan paste di bawah tag <body> .

Dengan code di atas, saat ini kita telah memiliki penampilan navbar tetapi saat pada monitor kecil navbar masih di status atas sama dalam gambar di bawah ini.

Supaya saat monitor memiliki ukuran kecil navbar tidak diperlihatkan, kita perlu manambahkan class d-none d-lg-block pada tag navbar yang maknanya hebat navbar akan diselinapkan disemua ukuran monitor terkecuali pada monitor memiliki ukuran large atau besar. Saat ini tag navbar kita bisa menjadi mirip contoh di bawah ini.

Saat ini coba save dan membuka pada browser sama ukuran monitor mobile, karena itu navbar tidak diperlihatkan lagi. Selanjutnya bagaimanakah cara supaya navbar tampil di bawah ? nach, saat ini coba copy kode berikut ini dan paste pas di bawah </nav> yang telah dibikin sebelumnya.

Penting diingat pada code bottom navbar di atas, kita menambah class border-top, navbar-expand, d-md-none, d-lg-none, d-xl-none, fixed-bottom, class-class itu perannya apa ? silahkan baca penuturannya pada tabel di bawah ini.

Coba save dari peralihan yang sudah dilaksanakan barusan dan lihat di browser sama ukuran small atau kecil, karena itu penampilannya bakal jadi gambar di atas. Oke, sama ukuran monitor kecil, hebat navbar telah diselinapkan dan bottom navbar di tampilkan. Beberapa menu di bottom navbar masih berbentuk text, kita inginya menu navbar berbentuk ikon seperti pada instagram, apa jalan keluarnya ? Coba datangi di icon.getbootstrap.com, selanjutnya mencari keyword misalkan home.

Nach, kelak ada ikon seperti gambar di atas, click selanjutnya copy HTML atau svg karena kita akan memakai pilihan svg (bukan icon). Membuka file HTML kembali, dan paste code svg itu gantikan menu Home di section bottom navbar. Kerjakan kembali dengan cari ikon untuk search, add, profil dan shop. Keseluruhannya, nanti code bottom navbar akan seperti pada bawah ini.

Dengan code di atas, kita telah mengganti semua teks menu yang berada di bottom navbar dengan ikon seperti pada instagram memakai ikon dari bootstrap. Dengan code di atas, karena itu penampilan menu atau bottom navbar kita bisa menjadi seperti gambar di bawah ini.

Bagaimana ? telah kelihatan serupa dengan menu atau bottom navbar di instagram kan ? tinggal menambah contoh content saja supaya tidak kelihatan kosong. Silakan copy code berikut ini, selanjutnya paste di bawah tag atau di atas <script>.

engan menambahkan kode di atas, maka sekarang tampilan projek latihan membuat bottom navbar seperti instagram dengan bootstrap akan menjadi seperti gambar di bawah ini.

kode lengkap Index.html

Keseluruhannya code yang sudah kita bikin pada latihan membuat menu atau bottom navbar pada penampilan mobile seperti instagram dengan bootstrap 5 dapat disaksikan pada code di atas.

Demikian artikel ini kali, sampai di sini kita telah sukses menuntaskan atau membuat menu bottom navbar seperti pada instagram dengan bootstrap 5. Silakan rekan-rekan modifikasi atau improvisasi sesuai keperluan rekan atau kemauan. Bila ada anjuran, kritikan, saran atau apa saja itu yang ingin dibicarakan, silakan catat komentar di bawah ini.

Post Views: 2,210

Related Posts:

  • Cara Agar WA Terlihat Offline Padahal Online Cara Agar WA Terlihat Offline Padahal Online – WhatsApp menawarkan berbagai fitur yang bisa dinikmati oleh penggunanya. Hanya saja, tidak semua pengguna bisa memaksimalkan fitur tersebut dengan baik. Misalnya, ada…
  • Perbedaan PHP 5x dan 7x dari Segi Kecepatan hingga… Dalam aktivitas building website atau pembentukan suatu website tidak terlepas dari kebutuhan akan bahasa pemrograman. Pemilihan bahasa pemrograman akan menentukan performa hingga keunggulan dari suatu website yang dibangun. Tidak hanya…
  • Mudah! Ini 10 Cara Mendapatkan Uang dari Internet Tahun 2023 Cara Mendapatkan Uang dari Internet - Saat ini, internet telah menjadi salah satu media yang paling populer untuk mencari uang. Tidak hanya dapat digunakan untuk berbelanja atau mencari informasi, internet…
  • 5 Cara Upload File ke Link Google Drive Orang Lain Ada beberapa cara upload file ke link Google Drive orang lain. Google Drive bisa dimanfaatkan sebagai ruang penyimpanan pihak ketiga yang memiliki kapasitas sebesar 15 GB dan gratis. Akan tetapi…
  • Wajib Coba! 11 Aplikasi Whatsapp Mod (WA MOD) Terbaru 2023 Anda pasti sudah tahu bahwa aplikasi WhatsApp Mod telah hadir! Aplikasi WhatsApp Mod menawarkan berbagai fitur tambahan yang pasti akan membuat sesi chatting Anda lebih menyenangkan. Berikut panduan instalasi sederhana…
  • Pengenalan Dasar Vuejs untuk Pemula Pengenalan dasar vuejs untuk pemula dibutuhkan jika Anda ingin membangun sebuah aplikasi berbasis web. Jika Anda ingin tampilan website yang interactive dan user friendly, maka Anda membutuhkan framework. Vuejs sendiri…
  • Tips Jitu dan Cara Agar Google Form Tidak Bisa… Google Form merupakan salah satu produk Google. Dimana Anda dapat membuat semua formulir dan menyebarkannya secara online. Anda tidak lagi membutuhkan berlembar-lembar kertas serta berkeliling untuk menyebarkan formulir, sangat canggih…
  • Komentar Tak Enak Seorang Netizen Bikin Kiper… Komentar tidak senonoh dari netizen membuat kiper tim Persiga marah itu, dan istrinya dilecehkan. Komentar warganet di akun Instagramnya membuat kiper Persija Jakarta Andreitani Ardiasa murka. Andrettani menganggap komentar itu…
  • Kenapa Tidak Bisa Upload Foto di Google Form, Ini… Google Form merupakan sebuah layanan yang banyak dimanfaatkan dalam penelitian. Namun terkadang, responden mengalami kendala saat mengisi Google Form ini seperti tidak bisa upload foto. Lalu, kenapa tidak bisa upload…
  • Aplikasi Berbayar di iPhone Jadi Gratis dengan Cara Ini Vpn.co.id - Aplikasi berbayar di iPhone bisa kita dapatkan secara gratis dengan mengikuti beberapa cara yang akan kami sampaikan di dalam artikel ringkas ini. iPhone merupakan salah satu perangkat ponsel…
  • 35+ Aplikasi Nonton Piala Dunia Gratis di Hp dan Laptop Aplikasi Nonton Piala Dunia 2022 ialah aplikasi yang harus kamu punyai saat sebelum gelaran sepak bola termegah piala dunia 2022 di mulai. Dengan jejeran aplikasi ini kamu segera dapat melihat…
  • Cara Instal Ulang Windows Menggunakan Flashdisk Hello Teman Semua! Apakah kamu bosan dengan kinerja laptop atau komputer yang semakin lambat? Atau mungkin, kamu ingin menghapus data kamu untuk menjual laptop atau komputer kamu? Nah, salah satu…
  • Begini Cara Download Lagu Tanpa Aplikasi dengan Mudah Banyak orang mencari cara download lagu tanpa aplikasi sehingga tidak perlu mengunduh apps tambahan di perangkatnya. Terlebih, hampir semua orang senang mendengarkan musik. Tidak hanya untuk hiburan, melainkan juga teman…
  • Begini Cara Edit Twibbon Video di Alight Motion dan Canva Pada dasarnya, penggunaan twibbon sudah menjadi budaya baru di kalangan masyarakat. Menariknya, ini tidak hanya happening di Indonesia saja, namun juga hampir di seluruh dunia. Pada momen tertentu, para pengguna…
  • Simak! Beberapa Aplikasi Kamera Tembus Pandang Yang… Ada beberapa aplikasi bawaan yang akan Anda dapatkan jika membeli hape baru. Salah satu aplikasi bawaan yang ada di hape baru Anda antara lain adalah kamera. Namun, tidak semua kamera…
  • 6 Cara Menambah Followers Instagram Tanpa Aplikasi dan Aman Saat ini ada banyak cara menambah followers instagram tanpa aplikasi dan aman. Tentu saja hal ini dikarenakan followers instagram sangatlah berpengaruh dikarenakan instagram saat ini tidak hanya sebagai media sosial…
  • Wajib Tahu, Pengenalan Dasar CSS untuk Pemula Bagi seorang pengembang website, pasti Anda pernah mendengar Cascading Style Sheets atau biasa disebut dengan CSS. CSS ini menjadi salah satu hal yang harus dipelajari oleh para pengembang website sehingga…
  • 6 Situs Baru Pengganti Driverays (Update Link) Driverays adalah situs download film BluRay berkualitas HD dengan resolusi minimal 720p/1080p. Sejak dilakukan pemblokiran, situs asli Driverays sudah tidak dapat diakses. Namun kenyataannya, kami mendapati bahwa pihak Driverays sengaja…
  • 10 Marketer Terbaik di Indonesia, Semua Perusahaan Unicorn! Marketer merupakan orang yang bertanggung jawab sebagai jantung dari perusahaan, karena memang peranannya yang sangat penting. Di Indonesia sendiri ada beberapa "jagoan"yang menjadi marketer terbaik di Indonesia dan keahliannya ini…
  • 8 VPN Smart TV Terbaik (Update 2023) Dengan menggunakan VPN, Anda dapat mengakses berbagai konten dan situs favorit di Smart TV. Termasuk yang tidak tersedia atau diblokir di Indonesia. Berbeda dengan TV biasa, melalui Smart TV kita…
  • 35 Situs Baru Pengganti IndoXXI 206.189.151.55 (Update 2023) IndoXXI adalah situs untuk menonton berbagai jenis film secara online dengan beragam kualitas video. Sejak diblokir, situs utama INDOXXI sudah tidak dapat diakses. Namun kami melakukan pemantauan dan menemukan fakta…
  • Download Aplikasi YoWhatsApp Terbaru 2021 YoWhatsApp adalah alternatif non-resmi dari aplikasi WhatsApp messenger yang paling banyak digunakan di Indonesia. Saat ini, Whatsapp sudah menjadi bagian tak terpisahkan dari kehidupan kita. Mulai dari chatting non-formal hingga…
  • Cara Instal APK di Memori Eksternal Hello Teman Semua, kali ini admin akan membahas tentang cara instal APK di memori eksternal. Bagi kalian yang sering mengunduh aplikasi dari internet, pasti pernah mengalami kehabisan ruang penyimpanan di…
  • Cara Instal Ulang Windows 10 dengan Flashdisk Hello Teman Semua, kali ini admin akan membahas tentang cara instal ulang Windows 10 dengan menggunakan flashdisk. Hal ini bisa kita lakukan apabila terjadi masalah pada sistem operasi yang tidak…
  • Apa Itu Directive pada Vue JS? Javascript merupakan bahasa pemrograman tingkat tinggi yang populer di kalangan developer. Banyak framework yang tersedia saat mengerjakan project javascript. Salah satu paling populer, Vue JS. Namun, sudahkah Anda tahu apa…
  • Mikrotik Hotspot: Pengertian dan Cara Setting Hotspot adalah sebuah fungsi dari router mikrotik untuk memberikan otentikasi pada pengguna yang akan menggunakan jaringan internet nirkabel (wifi). Ini adalah solusi untuk menyediakan akses internet kepada pelanggan melalui menu…
  • 9 Fitur Terbaru Instagram yang Dapat Anda Nikmati Fitur terbaru Instagram selalu ditambahkan setiap tahun. Inilah salah satu alasan mengapa platform sosial media satu ini punya pengguna yang terus bertambah. Setiap pengguna pada akhirnya mendapatkan pengalaman bersosial media…
  • Aplikasi Penambah Like Instagram Paling Work 2023 Vpn.co.id - Aplikasi penambah like instagram berguna untuk meningkatkan popularitas kita dengan menambah jumlah suka. Dalam era dinamis digital, platform media sosial telah mengambil peran sentral dalam berinteraksi dan berbagi…
  • Fungsi dan Manfaat CSS yang Perlu Anda Ketahui Fungsi dan manfaat CSS memang cukup beragam. Seseorang yang ingin membangun website harus mengetahui dan memahami apa itu CSS dan fungsi penggunaannya, karena CSS merupakan suatu bahasa pemrograman yang memiliki…
  • Cara Live Streaming di IG Biar Banyak Penonton Vpn.co.id - Cara live streaming di IG biar banyak penonton bisa kalian simak di dalam tulisan ini dengan cermat sampai habis. Media sosial telah menjadi bagian penting dalam kehidupan sehari-hari…